Почему этот счетчик не работает?

Question

Поэтому у меня есть этот код (Fiddle):

(function() { 
 
    var meter = document.getElementById('somemeter'); 
 
    var Likes = document.getElementById('likes'); 
 
    var Dislikes = document.getElementById('dislikes'); 
 

 
    meter.max = Likes.innerHTML + Dislikes.innerHTML; 
 
    meter.value = Likes.innerHTML - Dislikes.innerHTML; 
 
})();

<div id="likes">500</div> 
 
<div id="dislikes">50</div> 
 
<meter value="10" min="0" max="1000" id="somemeter"></meter>

Как вы можете видеть, Likes.innerHTML является 500 и Dislikes.innerHTML является 50

По какой-то причине не meter.max работа, когда я использую Likes.innerHTML или Dislikes.innerHTML; однако, когда я заменяю их на meter.max на 500 и 50, он работает.

Я что-то не так?

Answer 1

Javascript строка обнаружения, вы должны использовать parseInt значения, попробуйте этот код:

(function() { 
 
    var meter = document.getElementById('somemeter'); 
 
    var Likes = document.getElementById('likes'); 
 
    var Dislikes = document.getElementById('dislikes'); 
 

 
    meter.max = parseInt(Likes.innerHTML) + parseInt(Dislikes.innerHTML); 
 
    meter.value = parseInt(Likes.innerHTML) - parseInt(Dislikes.innerHTML); 
 
    
 
    console.log(meter.max) 
 
})();

<div id="likes">500</div> 
 
<div id="dislikes">50</div> 
 
<meter value="10" min="0" max="1000" id="somemeter"></meter>

Answer 2

Ваш код принимает innerHTML как строку. Использование ParseInt вместо:

(function() { 
 
    var meter = document.getElementById('somemeter'); 
 
    var Likes = document.getElementById('likes'); 
 
    var Dislikes = document.getElementById('dislikes'); 
 

 
    meter.max = parseInt(Likes.innerHTML, 10) + parseInt(Dislikes.innerHTML, 10); 
 
    meter.value = parseInt(Likes.innerHTML, 10) - parseInt(Dislikes.innerHTML, 10); 
 
})();

<div id="likes">500</div> 
 
<div id="dislikes">50</div> 
 
<meter value="10" min="0" max="1000" id="somemeter"></meter>

Answer 3

Вам нужно преобразовать строки к числовым значениям для работы математики:

(function() { 
    var meter = document.getElementById('somemeter'); 
    var Likes = document.getElementById('likes'); 
    var Dislikes = document.getElementById('dislikes'); 

    meter.max = Number(Likes.innerHTML) + Number(Dislikes.innerHTML); 
    meter.value = Number(Likes.innerHTML) - Number(Dislikes.innerHTML); 
})(); 

Fiddle