爲什麼這個電錶不工作？

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