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

Question

目前，我正在尝试编写一个网站，当您输入两个变量时，它们会自行添加在一起。这是我的代码:

    function master_wood() {
        var Stone = document.getElementById("Stone").value;
        var Wood = document.getElementById("Wood").value;
        alert('This much wood: ' +  Wood);
        var Resources = +Stone.value + +Wood.value;
    }
    function master_stone() {
        var Stone = document.getElementById("Stone").value;
        var Wood = document.getElementById("Wood").value;
        alert('This much stone: ' + Stone);
        var Resources = +Stone.value + +Wood.value;
        alert(Resources);
    
    }

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

有什么想法吗？

Answer 1

您将 var Stone 指定为输入值，然后您尝试添加未定义的 stone.value，因为您直接指定了 stone 输入的值。

接下来，您需要将文本值解析为整数，因为如果您尝试将它们按原样添加在一起，您将得到一个串联的值字符串，例如“3020”而不是 50(如果您有 20 个木头，30 个木头)石头)。

您的脚本应如下所示:

<tr>
     <td><input type="text" name="stone" id="Stone"></td>
     <td><button onclick="master_stone()">Set stone in world</button></td>
     </tr>
     <br>
     <tr>
     <td><input type="text" name="wood" id="Wood"></td>
      <td><button onclick="master_wood()">Set Wood in world</button></td>
</tr>
     
<script>
 function master_wood() {
    var Stone = document.getElementById("Stone");
    var Wood = document.getElementById("Wood");
    alert('This much wood: ' +  Wood.value);
    var Resources = (parseInt(Stone.value) || 0) + (parseInt(Wood.value) || 0);
    alert('Total resources:' + Resources);
}
function master_stone() {
    var Stone = document.getElementById("Stone");
    var Wood = document.getElementById("Wood");
    alert('This much stone: ' + Stone.value);
    var Resources = (parseInt(Stone.value) || 0) + (parseInt(Wood.value) || 0);
    alert('Total resources:' + Resources);

}
</script>

(parseInt(Stone.value) || 0) 部分确保您尝试添加的值存在，以避免添加未定义的 + 值，从而导致 NaN。这样，如果不存在，则添加 0，从而消除不需要的结果。