为什么不是'这个仪表不工作

Why isn't this meter working?

本文关键字：仪表 工作 为什么不      更新时间：2023-09-26

所以我有这个代码(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时，它确实有效。

我做错什么了吗？

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

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>

您需要将字符串转换为数值才能进行数学运算：

(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

相关文章：