Star Rating by @Realto619 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

maxImposta il valore numerico o temporale massimo per un elemento input
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<select>Usato per creare un menu a tendina.
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Users

Log in to search for users

Explore

Find inspiration

REVIEW: For Loops

Review of Functions I

Banner_cercatutto

Questa è una pagina dimostrativa

es da correggere

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<main>
<h2>Star Rating</h2>
<div class="row">
<span id="_1_star" class="fa fa-star rating checked"></span>
<span id="_2_star" class="fa fa-star rating checked"></span>
<span id="_3_star" class="fa fa-star rating checked"></span>
<span id="_4_star" class="fa fa-star rating"></span>
<span id="_5_star" class="fa fa-star rating"></span>
</div>
<div class="result"></div>

</main>

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://css.netcentrx.net/default.css);  
.checked {
  color: gold;
}
.fa.fa-star {
  margin: 0;
  letter-spacing:-2px;
  
}
main { 
  width: 80vw;
  max-width:500px;
}

const rating = document.querySelectorAll(".rating");

rating.forEach((item) => {
  item.addEventListener('click',(e) => {
    let check_class = 'unchecked';
    for(let i=0;i<document.getElementById(e.target.id).classList.length;i++) {
      if(document.getElementById(e.target.id).classList[i]==='checked') {
        document.getElementById(e.target.id).classList.remove("checked");
        check_class = 'unchecked';
        checkOtherStars(e.target.id);
        return;
      }
    }
    document.getElementById(e.target.id).classList.add("checked");    
    //checkOtherStars(document.getElementById(e.target.id));
    checkOtherStars(e.target.id);
    // document.querySelector('.result').innerHTML = `1) getID = `+ e.target.id;
  });
});
//const star_array = ['_1_star','_2_star','_3_star','_4_star','_5_star'];
function checkOtherStars(getID) {
  // document.querySelector('.result').innerHTML = `2) getID = `+ getID;
  let stripID = getID.replaceAll('_','').replace('star','');
  // document.querySelector('.result').innerHTML = parseInt(stripID) + ' | ' + document.getElementById(getID).classList + ' | ' + (document.getElementById(getID).classList.contains('checked'));
  if(parseInt(stripID) === 1 && document.getElementById('_2_star').classList.contains('checked')) {
    document.getElementById('_1_star').classList.add("checked");    
    document.getElementById('_2_star').classList.remove("checked");    
    document.getElementById('_3_star').classList.remove("checked");    
    document.getElementById('_4_star').classList.remove("checked");    
    document.getElementById('_5_star').classList.remove("checked");    
  } else if(parseInt(stripID) === 1) {
    document.getElementById('_2_star').classList.remove("checked");    
    document.getElementById('_3_star').classList.remove("checked");    
    document.getElementById('_4_star').classList.remove("checked");    
    document.getElementById('_5_star').classList.remove("checked");    
  } else if(parseInt(stripID) === 2 && document.getElementById('_3_star').classList.contains('checked')) {
    document.getElementById('_1_star').classList.add("checked");    
    document.getElementById('_2_star').classList.add("checked");    
    document.getElementById('_3_star').classList.remove("checked");    
    document.getElementById('_4_star').classList.remove("checked");    
    document.getElementById('_5_star').classList.remove("checked");    
  } else if(parseInt(stripID) === 2) {
    document.getElementById('_1_star').classList.add("checked");    
    document.getElementById('_3_star').classList.remove("checked");    
    document.getElementById('_4_star').classList.remove("checked");    
    document.getElementById('_5_star').classList.remove("checked");    
  } else if(parseInt(stripID) === 3 && document.getElementById('_4_star').classList.contains('checked')) {
    document.getElementById('_1_star').classList.add("checked");    
    document.getElementById('_2_star').classList.add("checked");    
    document.getElementById('_3_star').classList.add("checked");    
    document.getElementById('_4_star').classList.remove("checked");    
    document.getElementById('_5_star').classList.remove("checked");    
  } else if(parseInt(stripID) === 3) {
    document.getElementById('_1_star').classList.add("checked");    
    document.getElementById('_2_star').classList.add("checked");    
    document.getElementById('_4_star').classList.remove("checked");    
    document.getElementById('_5_star').classList.remove("checked");    
  } else if(parseInt(stripID) === 4 && document.getElementById('_5_star').classList.contains('checked')) {
    document.getElementById('_1_star').classList.add("checked");    
    document.getElementById('_2_star').classList.add("checked");    
    document.getElementById('_3_star').classList.add("checked");    
    document.getElementById('_4_star').classList.add("checked");    
    document.getElementById('_5_star').classList.remove("checked");    
  } else if(parseInt(stripID) === 4) {
    document.getElementById('_1_star').classList.add("checked");    
    document.getElementById('_2_star').classList.add("checked");    
    document.getElementById('_3_star').classList.add("checked");    
    document.getElementById('_5_star').classList.remove("checked");    
  } else if(parseInt(stripID) === 5) {
    document.getElementById('_1_star').classList.add("checked");    
    document.getElementById('_2_star').classList.add("checked");    
    document.getElementById('_3_star').classList.add("checked");    
    document.getElementById('_4_star').classList.add("checked");    
    // document.getElementById('_5_star').classList.remove("checked");    
  }
 
}