为什么这个电表不工作？

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