Javascript 如何添加两个有用户输入的变量？

目前，我正试图编写一个网站，当你输入两个变量时，它们会自动相加。这是我的代码：

功能主控木{ var Stone=document.getElementByIdStone.value； var Wood=document.getElementByIdWood.value； 警惕“这么多木头：”+木头； var Resources=+Stone.value++Wood.value； } 功能主控石{ var Stone=document.getElementByIdStone.value； var Wood=document.getElementByIdWood.value； 警惕“这么多石头：”+石头； var Resources=+Stone.value++Wood.value； 资源； } 立于不败之地 在世界上树立木偶 您将var stone指定为输入值，然后尝试添加未定义的stone.value，因为您直接将输入值指定给stone

接下来，您需要将文本值解析为整数，因为如果您尝试按原样将它们相加，您将得到一个串联的值字符串，例如3020，而不是20个wood，30个stone

您的脚本应该如下所示：

立于不败之地 在世界上树立木偶 功能主控木{ var Stone=document.getElementByIdStone； var Wood=document.getElementByIdWood； 警惕“这么多木头：”+木头值； var Resources=parseIntStone.value | | 0+parseIntWood.value | 0； 警报“总资源：”+资源； } 功能主控石{ var Stone=document.getElementByIdStone； var Wood=document.getElementByIdWood； 警惕“这么多石头：”+stone.value； var Resources=parseIntStone.value | | 0+parseIntWood.value | 0； 警报“总资源：”+资源； } 有几件事。 camelCase往往是JavaScript中的惯例。 这两个函数的作用几乎相同。 如果其中一个函数没有值，则下面的函数将默认值设置为0。 你不需要叫Stone.value。您将值设置为stone，因此不需要调用它的值

function setWoodAndStone() {
    var stone = parseInt(document.getElementById("Stone").value) || 0;
    var wood = parseInt(document.getElementById("Wood").value) || 0;
    var resources =stone+wood;
    alert(resources);
}  

<td><button onclick="setWoodAndStone()">Set Wood in world</button></td>

然后，功能更改为：

function setWoodAndStone() {
    masterVars.stone = parseInt(document.getElementById("Stone").value);
    masterVars.wood = parseInt(document.getElementById("Wood").value);
    masterVars.resources = +masterVars.stone+masterVars.wood;
    alert(resources);
} 

---

这就是您的变量将通过masterVars函数提供给您的原因。这类似于全球VAR，但不会污染全球名称。我建议您这样做：

var resourceList=[石头，木头]； 函数masterResourcestype{ var container={}，resourceTotal=0； 资源列表的forvar项{ 容器[项目]=parseIntdocument.getElementByIditem.value | | 0； } 警报+类型+：+容器[类型]； 容器中的forvar资源{ resourceTotal+=容器[资源]； } 警报“总资源：”+resourceTotal； } 立于不败之地 在世界上树立木偶

---

有几个错误：

首先：Wood.value和Stone.value不存在-您已经选择了文本框的value属性，因此这些变量包含字符串，您不需要再次向下搜索value属性

其次，您的变量是字符串，而不是数字，所以您需要将它们解析为数字，然后才能进行数学相加

第三，有两个函数做几乎相同的工作。您可以轻松地将它们组合成一个：

function calculateResources() {
    var stone = parseInt(document.getElementById("Stone").value) || 0;
    var wood = parseInt(document.getElementById("Wood").value) || 0;
    alert('This much stone: ' +  stone + " and this much wood: " + wood);
    var resources = wood + stone;
    alert('Total resources:' + resources);
}


<table>
  <tr>
     <td><input type="text" name="stone" id="Stone"></td>
     <td><button onclick="calculateResources()">Set stone in world</button></td>
     </tr>
     <br>
     <tr>
     <td><input type="text" name="wood" id="Wood"></td>
      <td><button onclick="calculateResources()">Set Wood in world</button>    </td>
     </tr>
 </table>

---

注意：如果你的数量需要支持分数，你需要使用parseFloat而不是parseInt。

什么不起作用？考虑到两个函数做完全相同的事情，为什么不只用一个函数呢。啊-添加时不需要使用Stone.value，该值已设置为Stone，因此只需使用Stone即可。和Woodwood一样当你说add时，你是指连接吗？寻找这个？：@Craicerjack从我看来他们不完全一样，第二个在末尾有一个警告如果您正在添加数字，那么最好将输入类型更改为数字请使用代码段而不是jsfiddle@julekgwa这不是一个好主意compulsion@Mr.Alien我是这么说的吗？我觉得小提琴更容易理解，因为您可以更轻松地编辑代码并与之交互。@DragoşPaulMarinescu它们也会腐烂。这会使它们在将来变得无用。为什么在JavaScript中首选camelCase。我没有强迫任何事。我是说JavaScript社区中的约定倾向于camelCase。

function calculateResources() {
    var stone = parseInt(document.getElementById("Stone").value) || 0;
    var wood = parseInt(document.getElementById("Wood").value) || 0;
    alert('This much stone: ' +  stone + " and this much wood: " + wood);
    var resources = wood + stone;
    alert('Total resources:' + resources);
}


<table>
  <tr>
     <td><input type="text" name="stone" id="Stone"></td>
     <td><button onclick="calculateResources()">Set stone in world</button></td>
     </tr>
     <br>
     <tr>
     <td><input type="text" name="wood" id="Wood"></td>
      <td><button onclick="calculateResources()">Set Wood in world</button>    </td>
     </tr>
 </table>