0

Estou tentando somar valores da value que foram selecionados via checkbox com JavaScript puro. No que estou errando ?

Segue linha de código que raciocinei ...

HTML

<h2>Escolha seus destinos:</h2>
        
        <input type="checkbox" class="passagem" value="780.00">
        <label for="pais1">Peru</label>

        <input type="checkbox" class="passagem" value="960.00">
        <label for="pais2">Chile</label>

        <input type="checkbox" class="passagem" value="870.00">
        <label for="pais3">Bolivia</label>

        <input type="checkbox" class="passagem" value="910.00">
        <label for="pais4">Uruguai</label>

        <input type="checkbox" class="passagem" value="980.00">
        <label for="pais5">Argentina</label>

        <hr>

        <div>
            <input type="checkbox" class="passagem" value="350.00">
            <label for="voltar">Deseja passagem de volta ao Brasil?</label>
        </div>

        <button onclick="calcular()">Calcular</button>

        <p class="resultado"></p>  

Javascript

function calcular () {
document.addEventListener('click', function() {
    var peru = document.querySelectorAll('input[valeu="780.00"][type="checkbox"]:checked').length;
})

document.addEventListener('click', function() {
    var chile = document.querySelectorAll('input[valeu="960.00"][type="checkbox"]:checked').length;
})

document.addEventListener('click', function() {
    var bolivia = document.querySelectorAll('input[valeu="870.00"][type="checkbox"]:checked').length;
})

document.addEventListener('click', function() {
    var uruguai = document.querySelectorAll('input[valeu="910.00"][type="checkbox"]:checked').length;
})

document.addEventListener('click', function() {
    var argentina = document.querySelectorAll('input[valeu="980.00"][type="checkbox"]:checked').length;
})

document.addEventListener('click', function() {
    var voltar = document.querySelectorAll('input[valeu="350.00"][type="checkbox"]:checked').length;
})

var passagem = parseInt(peru) + parseInt(chile) + parseInt(bolivia) + parseInt(uruguai) + parseInt(argentina) + parseInt(voltar);

document.querySelector('.resultado'). innerHTML = passagem;
}
2

1 Resposta 1

1

O seu código é muito verboso e com alguns problemas (por exemplo, a utilização da função parseInt em vez de parseFloat sendo esse utilizado para valores com virgula), pode buscar os elementos selecionados e varrer (for) item a item buscando a propriedade value e somando em alguma variável, exemplo:

function calcular() {
  document.querySelector('.resultado').innerHTML = '';
  const itens = document
    .querySelectorAll("input[type='checkbox']:checked");
  let values = 0; 
  if (itens.length > 0) {
    for(let i = 0; i < itens.length; i++) {
      values = values + (parseFloat(itens[i].value));
    }
   document.querySelector('.resultado').innerHTML = values
  }
}
<h2>Escolha seus destinos:</h2>

<input type="checkbox" class="passagem" value="780.00">
<label for="pais1">Peru</label>

<input type="checkbox" class="passagem" value="960.00">
<label for="pais2">Chile</label>

<input type="checkbox" class="passagem" value="870.00">
<label for="pais3">Bolivia</label>

<input type="checkbox" class="passagem" value="910.00">
<label for="pais4">Uruguai</label>

<input type="checkbox" class="passagem" value="980.00">
<label for="pais5">Argentina</label>

<hr>

<div>
  <input type="checkbox" class="passagem" value="350.00">
  <label for="voltar">Deseja passagem de volta ao Brasil?</label>
</div>

<button onclick="calcular()">Calcular</button>

<p class="resultado"></p>

O exemplo e bem simples utilizado um querySelectorAll buscando elementos do tipo checkbox e que estejam selecionados e na próxima linha somando os valores para saber o valor final daquelas que estão selecionadas.

1
  • o que na minha resposta está errada?
    – novic
    Commented 26/06/2021 às 0:12

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