Question

我正在编写一个脚本，我希望 H1 标签随着输入值的增加而增加。但它不起作用。我可能很笨，但我来这里是因为我需要帮助。

这是我的代码：

var h1Value = 0;

function addFun() {
  var changeH1By = document.getElementById('input').value;
  parseInt('h1Value') + parseInt('changeH1By');
  document.getElementById('h1').innerHTML = h1Value;
}

<h1 id="h1">0</h1>
<input type="number" id="input" value="1">
<button onclick="addFun()">Add</button>

正如您可能看到的，我正在使用 parseInt()，因为否则 h1 是“11”。像 1 + 1 = 11？我使用 parseInt 是错误还是其他错误？

谢谢！

Answer 1

您将字符串传递到 parseInt，删除引号以传递变量。
您没有将 parseInt('h1Value') + parseInt('changeH1By'); 的结果分配给任何变量
不要跟踪 var h1Value，而是使用 document.getElementById('h1').innerHTML 来获取当前值
删除了 newValue，因此我们可以将新值 Instant 设置为 innerHTML

function addFun() {
  var currentvalue = document.getElementById('h1').innerHTML;
  var changeH1By = document.getElementById('input').value;
  
  document.getElementById('h1').innerHTML = parseInt(currentvalue) + parseInt(changeH1By);
}

<h1 id="h1">0</h1>
<input type="number" id="input" value="1">
<button onclick="addFun()">Add</button>

Answer 2

您将字符串 "h1Value" 和 "changeH1By" 传递给 parseInt，它试图将这些文字字符串解析为整数。如果您尝试记录例如的结果parseInt("h1Value") 它的计算结果为 NaN，即“不是数字”，这会提示您哪里出错了。

您的代码的工作版本是

var h1Value = 0;
function addFun() {
  var changeH1By = document.getElementById('input').value;
  h1Value = h1Value + parseInt(changeH1By);
  document.getElementById('h1').innerHTML = h1Value;
}

h1Value 的类型已经是数字了，所以不需要强制为一个，而是调用 parseInt 和文字串 "changeH1By "，您需要将实际的变量作为参数。也行

parseInt('h1Value') + parseInt('changeH1By');

本身不做任何事情，javascript 引擎只会计算值并将其丢弃，因为您没有将其保存到变量等中。

Answer 3

一种干净的编码方式......

<input..> 的 type="number" 元素具有 valueAsNumber 属性
使用 const 避免重复这些解释的结果

const
  h1_element = document.getElementById('h1')
, changeH1By = document.getElementById('input')
  ;
function addFun()
  {
  h1_element.textContent = changeH1By.valueAsNumber
                         + parseInt(h1_element.textContent)
  }

<h1 id="h1">0</h1>
<input type="number" id="input" value="1">
<button onclick="addFun()">Add</button>

我正在尝试使用 parseint 但它不起作用

3 个答案: