Fiddle

Question

我是javascript的初学者，但我需要一个计算器的代码，当我点击按钮并显示总数时，它会添加数字。

示例： 如果我点击按钮20，它应显示数字20但在此之后，如果我点击按钮5，它应显示总数为25和等...... ..

目前这就是我所能做的一切：

<form name="Calc">
<input type="text" name="Numbers" size="16"><BR>
<input type="button" value="  5  " onClick="document.Calc.Numbers.value += '5'">
<input type="button" value="  10  " onClick="document.Calc.Numbers.value += '10'">
<input type="button" value="  20  " onClick="document.Calc.Numbers.value += '20'">
<input type="button" value="  30  " onClick="document.Calc.Numbers.value += '30'">
<input type="button" value="  50  " onClick="document.Calc.Numbers.value += '50'">
</form>

Answer 1

到目前为止，你有两个主要问题：

您已使用引号（onClick而不是'5'）将数字放在5处理程序中。这意味着您最终会执行字符串连接（将字符串添加到另一个字符串的末尾）而不是添加。
表单元素的value属性始终是一个字符串，这意味着即使您修复上面的＃1，仍然执行字符串连接（因为JavaScript会在字符串连接时进行串联连接你给一个字符串添加一个数字）。因此，您必须先解析Numbers中的值，然后再添加它。对于您当前的简单项目，您可以通过在它们前面放置一个+来实现这一点，这会将它们强制转换为数字：
```
document.Calc.Numbers.value = +document.Calc.Numbers.value + theNumberToAdd
```

以下是这两个更改的示例：

<form name="Calc">
<input type="text" name="Numbers" size="16"><BR>
<input type="button" value="  5  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 5;">
<input type="button" value="  10  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 10;">
<input type="button" value="  20  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 20;">
<input type="button" value="  30  " onClick="document.Calc.Numbers.value = +document.Calc.Numbers.value + 30;">
<input type="button" value="  50  " onClick="document.Calc.Numbers.value = document.Calc.Numbers.value 50;">
</form>

那说：这不是我推荐的方式。相反，我会：

将我的JavaScript代码放在JavaScript文件中（如果您希望将其全部放在一个文件中，则只需script块）
拥有一个包含当前值的JavaScript变量
在表单上附加一个单击处理程序，利用从后代元素点击“冒泡”到其祖先的事实。

像这样：

// A scoping function so we don't create global variables
(function() {
  // Our current value
  var value = 0;
  
  // Get our form
  var form = document.querySelector("form[name=Calc]");

  // Set the initial display of our value
  form.Numbers.value = value;
  
  // Add the click handler
  form.addEventListener(
    "click",
    clickHandler,
    false
  );

  // Handle clicks
  function clickHandler(event) {
    var amount;
    
    // Is the click on one of our inputs?
    if (event.target && event.target.tagName.toUpperCase() === "INPUT") {
      // Yes, get the input's value as a number
      amount = +event.target.value;
      
      // Add it to our amount
      value += amount;
      
      // Show the result
      form.Numbers.value = value;
    }
  }
})();

<form name="Calc">
<input type="text" name="Numbers" size="16"><BR>
<input type="button" value="  5  ">
<input type="button" value="  10  ">
<input type="button" value="  20  ">
<input type="button" value="  30  ">
<input type="button" value="  50  ">
</form>

看起来很宽松，但这主要是因为所有的解释性评论。

Answer 2

这是一个粗略的例子。你没有提供任何JavaScript，所以我添加了自己的：

window.Calc = {
  Numbers: {
    value: 0
  }
};

document.onclick = function () {
  document.getElementById('display').value = Calc.Numbers.value;
}

<form name="Calc">
  <input id="display" type="text" name="Numbers" size="16">
  <BR>
  <input type="button" value="5"  onclick="window.Calc.Numbers.value  += 5"/>
  <input type="button" value="10" onclick="window.Calc.Numbers.value += 10"/>
  <input type="button" value="20" onclick="window.Calc.Numbers.value += 20"/>
  <input type="button" value="30" onclick="window.Calc.Numbers.value += 30"/>
  <input type="button" value="50" onclick="window.Calc.Numbers.value += 50"/>
</form>

为什么

JavaScript包含字符串和数字。字符串无法添加。因此，当您取出引号时，它应该可以正常工作。

替代

我不建议使用内联JavaScript，查看演示，这样可以轻松添加新号码。

一个Javascript计算器代码

2 个答案:

为什么

替代

Fiddle