html 每次给出'0'答案变量相乘

mi7gmzs6  于 2022-11-20  发布在  其他
关注(0)|答案(2)|浏览(133)

我正在使用这段代码,当我每次点击按钮时,它都会给出0的答案。

<input type="text" id="first">
<input type="text" id="second">
<input type="text" id="ans">
<button id="btn">Count</button>
<script>
  var f = document.getElementById('first').value;
  var s = document.getElementById('second').value;
  var ans = document.getElementById('ans');
  var b = document.getElementById('btn');
  b.onclick = function() {
    ans.value = f * s;
  }
</script>
uemypmqf

uemypmqf1#

原因是当你在你的原始代码中点击按钮时,它会以0值执行,因为你没有要求它们在每次点击按钮后被初始化。所以你试图做的只是第一和第二个文本字段在初始页面加载时都得到它们的值,这意味着那些值是空的。所以当你点击按钮时,它会得到当前值(0)和倍数。所以它总是0。
在下面的例子中,@Jacob首先通过var b = document.getElementById('btn');获取目标按钮,然后将变量 Package 在click函数中。因此,每次单击按钮时,函数都会被调用,每个变量都获得当前值。
最后他做的是,当你点击按钮的时候,他要求每个按钮的当前值,所以它也从元素中得到当前值。
只需将onclick像上移,这样当用户单击时,它就会得到新的值。

<input type="text" id="first">
<input type="text" id="second">
<input type="text" id="ans">
<button id="btn">Count</button>
<script>
  var b = document.getElementById('btn');
  b.onclick = function() {
    var f = document.getElementById('first').value;
    var s = document.getElementById('second').value;
    var ans = document.getElementById('ans');
    ans.value = f * s;
  }
</script>

或者只获取元素一次。

<input type="text" id="first">
<input type="text" id="second">
<input type="text" id="ans">
<button id="btn">Count</button>
<script>
  var b = document.getElementById('btn');
  var f = document.getElementById('first');
  var s = document.getElementById('second');
  var ans = document.getElementById('ans');
  b.onclick = function() {
    ans.value = f.value * s.value;
  }
</script>
cwdobuhd

cwdobuhd2#

这是因为当你把文本放在一个输入中时,它会返回一个字符串。字符串就是文本。为了把文本变成一个数字,把它放在一个parseFloat()函数中。另外,把onclick放在HTML中。另外,你需要在函数中得到值,因为当页面加载时,输入是空的,但是当你点击按钮时,用户已经输入了数字。另外,如果该值为空,则返回NaN。2您需要检查该值是否不等于无法转换为数字的字符串。
试试看:

<input type="text" id="first">
<input type="text" id="second">
<input type="text" id="ans">
<button id="btn" onclick="clickBtn()">Count</button>
<script>
  function clickBtn() {
    var f = document.getElementById('first').value;
    var s = document.getElementById('second').value;
    if (typeof f === "string") return
    if (typeof s === "string") return
    var ans = document.getElementById('ans');
    var b = document.getElementById('btn');
    ans.value = parseFloat(f) * parseFloat(s);
  }
</script>

相关问题