带有 HTML DOM 的 Javascript 计算器 [重复]答案

【问题标题】：A Javascript Calculator with HTML DOM [duplicate]带有 HTML DOM 的 Javascript 计算器 [重复]
【发布时间】：2021-02-13 11:05:39
【问题描述】：

我只是想知道我哪里出错了，我尝试了每个堆栈溢出的答案，但找不到一个能回答我的代码问题的答案

var x = document.getElementById("blah").value;
var y = document.getElementById("meow").value;
var z = x + y;

function calculate() {
  document.getElementById("frick").innerHTML = z;
}

button {
  width: 20%;
}

<input id="blah">
<input id="meow">
<button onclick="calculate()"></button>
<p id="frick"></p>

【问题讨论】：

是否绝对有必要将p 标签的id 命名为"frick"？
(1) 检索处理程序内部的值，而不是在页面加载时；在页面加载时，它们是空的（2）在添加之前将它们转换为数字
@Spectric 由于我的挫败感，我认为这很有趣，你是对的，它不需要，但我认为这不是一个脏话，我很抱歉
另外：duplicate of Input value is a string instead of a number。

标签： javascript html

【解决方案1】：

使用parseInt() 解析函数内部的值。一开始，您将x 设置为输入的值，但当时输入为空。以下应该有效：

button {
width: 20%;
}

<html>
<body>
  <input id="blah">
  <input id="meow">
  <button onclick="calculate()">:p
  </button>
  <p id="frick">
    
  </p>
<script>
var x = document.getElementById("blah");
var y = document.getElementById("meow");
function calculate(){
var z = parseInt(x.value)+parseInt(y.value);
document.getElementById("frick").innerHTML = z;
}
</script>
</body>
</html>

【讨论】：

请使用parseInt with the second parameter, 10。考虑改用Number 或parseFloat，或者专门针对<input>s，.valueAsNumber。