Get, add up, and write all values ​to elements of a certain class

Question

So I have a code like this:

<div class='true' value='1'/>
<div class='false' value='2'/>
<div class='true' value='3'/>
<div id='check'>Check my score</div>
Your score is: <div id='total'/>

My question is how to get all the values from the <div> s with the class .true and add them together (1 + 3 = 4), then write 4 in the .total when I click on check ?

What I've tried so far is:

 function checkscore(){ // where I was stuck to add all the values }; // I can only get the value and write it in the console $(function() { $('#check').click(function(){ var values = $('.true').map(function(i,v) { return v.value; }).get(); console.log(values); }); });

 <div class='true' value='1'/> <div class='false' value='2'/> <div class='true' value='3'/> <div id='check'>Check my score</div> Your score is: <div id='total'/>

Answer 1

Vanilla javascript:

 document.getElementById('check').addEventListener('click', function() { let sum = 0; document.querySelectorAll('.true').forEach(function(el) { sum += parseInt(el.getAttribute('value')); }); document.getElementById('total').innerHTML = sum; });

 <div class='true' value='1'/> <div class='false' value='2'/> <div class='true' value='3'/> <div id='check'>Check my score</div> Your score is: <div id='total'/>

Vanilla javascript using reduce:

 document.getElementById('check').addEventListener('click', function() { let result = [...document.querySelectorAll('.true')].reduce( (acc, item) => { return acc + parseInt(item.getAttribute('value')); }, 0); document.getElementById('total').innerHTML = result; });

 <div class='true' value='1'/> <div class='false' value='2'/> <div class='true' value='3'/> <div id='check'>Check my score</div> Your score is: <div id='total'/>

Note: [...document.querySelectorAll('.true')] will spread the HTMLCollection object into an array.

---

Jquery:

 $('#check').click(function() { let sum = 0; $('.true').each(function(el) { sum += parseInt($(this).attr('value')); }); $('#total').html(sum); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='true' value='1'/> <div class='false' value='2'/> <div class='true' value='3'/> <div id='check'>Check my score</div> Your score is: <div id='total'/>

Answer 2

First, this is wrong:

<div class='true' value='1'/>

You should write this instead:

<div class='true' value='1'></div>

So what you're going to do first is to add an event listener to the <div> .

Then get the list of all <div> s with the class true .
Next, get their values by using element.getAttribute('value') and convert it to a number by using parseInt() .

Here is your code:

 document.getElementById('check').addEventListener("click", function() { let elements = document.getElementsByClassName("true"); let total = 0; for(i = 0; i < elements.length; i++) { total = total + parseInt(elements[i].getAttribute('value')); } document.getElementById('total').innerHTML = Number(total); });

 <div class='true' value='1'></div> <div class='false' value='2'></div> <div class='true' value='3'></div> <div id='check'>Check my score</div> Your score is: <div id='total'/>

Answer 3

You need get value attribute by attr() function, and need create sum variable for total as below

function checkscore(){
  // where I was stuck to add all the values
  // I can only get the value and write it in the console
        var sum = 0;
        var values = $('.true').map(function(i,v) {

            var acc = parseInt($(v).attr('value'));
            sum += acc;
            //return acc;
        }).get(); 
        console.log( sum );
        $('#total').text(sum);
};

 function checkscore(){ // where I was stuck to add all the values // I can only get the value and write it in the console var sum = 0; var values = $('.true').map(function(i,v) { var acc = parseInt($(v).attr('value')); sum += acc; //return acc; }).get(); console.log( sum ); $('#total').text(sum); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='true' value='1'/> <div class='false' value='2'/> <div class='true' value='3'/> <div id='check' onclick='checkscore();'>Check my score</div> Your score is: <div id='total'/>