Star Rating by @Realto619 - Codewith.it

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

Referenze

<canvas>Tag per disegnare grafica dinamica su pagine web.
minImposta il valore numerico o temporale minimo per un elemento input
<object>Incorpora risorse varie nella pagina web.
<h2>Titolo di intestazione di secondo livello
valueValore alfanumerico o booleano contenuto in un elemento
<video>Integra e controlla video in una pagina HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Random Tally

sinodo diocesano

Ricomincio da Zero

Modulo multi Processo

stringhe casuali

PERGAMEMORY - I Segreti dei Bevill

Esercizio forse più giust

Costruzione di tabella con html5

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!-- 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");    
  }
 
}