Получить, сложить и записать все значения в элементы определенного класса

Question

Итак, у меня есть такой код:

<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'/>

Мой вопрос: как получить все значения из <div> s с классом .true и сложить их вместе ( 1 + 3 = 4), затем пишите 4 в .total, когда я нажимаю check?

То, что я до сих пор пробовал:

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

Ваниль 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'/>

Ваниль javascript с использованием уменьшения:

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'/>

Примечание: [...document.querySelectorAll('.true')] распространит объект HTMLCollection в массив.

---

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

Вам нужно получить атрибут значения с помощью функции attr(), и вам нужно создать переменную суммы для итога, как показано ниже

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'/>

Answer 3

Во-первых, это неправильно:

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

Вы должны написать это вместо:

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

Итак, что вы собираетесь сделать в первую очередь, это добавьте прослушиватель событий в <div>.

Затем получите список всех <div> с классом true.
Далее, получите их значения с помощью element.getAttribute('value') и преобразуйте его в число с помощью parseInt().

Вот ваш код:

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'/>