Sum checkbox with predefined values. Javascript

Question

I’m trying to add value values that were selected via checkbox with pure Javascript. What I’m missing ?

Follow the line of code I rationed ...

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;
}

Answer 1

Your code is very verbose and with some problems (for example, using the function parseInt instead of parseFloat being used for values with comma), can search the selected elements and scan (for) item to item seeking the property value and adding in some variable, example:

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>

The example is quite simple used a querySelectorAll looking for elements of the type checkbox and that they are selected and in the next line summing the values to know the final value of those that are selected.