为什么这个仪表不工作？

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

由于某些原因，当我使用 Likes.innerHTML 或 Dislikes.innerHTML 时 meter.max 不起作用；但是，当我将 meter.max 中的那些替换为 500 和 50 时，它确实有效。

我是不是做错了什么？

Answer 1

您的代码将 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 2

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

为什么这个仪表不工作？

Why isn't this meter working?

javascript

jquery

html

meter