0

Bom dia, estou a tentar fazer um sistema de rating de estrelas com javascript mas não estou a conseguir retirar um valor apartir da escolha do menu de radio buttons. O botão Add serve para adicionar o valor que cada radio button tem ao texto do input readonly que está à direita mas com o meu código o output é apenas undefined.

Este é o meu layout, tem 5 radio buttons juntamente com 5 labels editadas em CSS para ficarem com este aspeto:

inserir a descrição da imagem aqui

Ainda sou muito novato no Javascript por isso se descobrirem código desnecessário no meu script ficarei feliz pela ajuda, este é o script:

var estrelas;

var estrela5 = document.getElementById('star5').value;

var estrela4 = document.getElementById('star4').value;

var estrela3 = document.getElementById('star3').value;

var estrela2 = document.getElementById('star2').value;

var estrela1 = document.getElementById('star1').value;

if (document.getElementById('star5').click()) {
    estrelas.value = estrela5;
}

if (document.getElementById('star4').click()) {
   estrelas.value = estrela4;
}

if (document.getElementById('star3').click()) {
   estrelas.value = estrela3;
}

if (document.getElementById('star2').click()) {
   estrelas.value = estrela2;
}

if (document.getElementById('star1').click()) {
   estrelas.value = estrela1;
}



function setValue() {
     if (input2.value == '' || input2.value == null) {
          input2.value = estrelas;
     }
};

Este é o meu código do menu de radio buttons HTML:

<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="5 Stars">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="4 Stars">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="3 Stars">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="2 Stars">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="1 Star">1 star</label>
1
  • 2
    não seria mais simples contar o número de estrelas que foram selecionadas (em amarelo)? mas o seu código se vc inverter a ordem dos if, começando por "star1" até "star5", vais ter ao final o maior valor, o que já resolveria o seu problema, só falta verificar se está selecionado,ou seja, se está "checked" Commented 18/04/2019 às 10:37

1 Resposta 1

1

Como as estrelas tem valor fixo (de 1 a 5) acho desnecessário você precisar pegar esse valor de inputs, como você ja sabe os valores, creio que você pode armazenar esses valores em um array e fazer a inserção em seu input readonly conforme necessário.

Fiz um exemplo, você pode adaptar caso queira.

const stars = [1,2,3,4,5];
document.querySelectorAll('.stars li').forEach(function(li, index) {
    li.addEventListener('click', function() {
        document.querySelector('.starSelected').innerHTML = (index == 0 ? stars[index] + " Estrela" : stars[index] + " Estrelas")
    });
});
ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

li {
  border: 1px solid;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
}

.starSelected {
display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    padding: 5px;
    border-radius: 5px;
    background-color: #e1fd66;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
   }
<ul class="stars">
        <li>1 star</li>
        <li>2 star</li>
        <li>3 star</li>
        <li>4 star</li>
        <li>5 star</li>
    </ul>

    <div class="starSelected">Sem Estrelas</div>

1
  • Olá Lucas, agradeço a sua ajuda mas consegui resolver o meu problema criando uma função onclick para cada input, muito obrigado na mesma :)
    – Afonso
    Commented 18/04/2019 às 14:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .