Question

目前我正在尝试对网站进行编程，当您输入两个变量时，他们将自己添加到一起。这是我的代码：

＆＃13;

    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);
    
    }

＆＃13;

 <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>

＆＃13;

有什么想法吗？

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，消除不需要的结果。

Answer 2

有几件事 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>

如果希望变量可以在函数外部访问，可以在对象上设置它们。

var masterVars = {
    wood: 0,
    stone: 0,
    resources: 0
}

然后功能变为：

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函数可以使用的变量。这与Global vars类似，但不会污染全局名称

Answer 3

我建议做这样的事情：

var resourceList = ["stone", "wood"];

function masterResources(type) {
	var container = { }, resourceTotal= 0;
	for(var item of resourceList) {
		container[item] = parseInt(document.getElementById(item).value) || 0;
	}
	alert("This much" + type + ": " + container[type]);
	for(var resource in container) {
		resourceTotal+= container[resource];
	}
	alert('Total resources:' + resourceTotal);
}

    <table>
        <tr>
            <td><input type="number" name="stone" id="stone"></td>
            <td><button onclick="masterResources('stone')">Set stone in world</button></td>
        </tr>
        <br>
        <tr>
            <td><input type="number" name="wood" id="wood"></td>
            <td><button onclick="masterResources('wood')">Set Wood in world</button> </td>
        </tr>
    </table>

解释＆amp;评论

<强> 1。骆驼案

JavaScript主要使用驼峰大小写，这意味着变量或函数的第一个字母应以小写字母开头，并通过使每个单词的首字母大写（第一个除外）来分隔单词。例如：thisIsAnExample。

<强> 2。功能

我也看到你使用的功能非常相似，所以最好尝试使用on而不是接受不同的输入。例如，改变这样的东西

function sayHello(){
    console.log("hello");
}

function sayWorld(){
    console.log("world");
}

到

function saySomething(text) {
    console.log(text);
}

并致电saySomething("hello");和saySomething("world");

第3。关于数字

如果您只打算使用数字，那么您应该将用户限制为仅键入数字，因此请将输入类型更改为数字。这意味着<input type="text">应该变成这个<input type="number">。有两种简单的方法可以将字符串转换为数字，第一种是函数parseInt，另一种是强制JavaScript通过使用只能对数字执行的操作来转换它，例如添加{{1在数字之后，认为这通常被认为是不好的技术，应该只用于快速测试。这两种方式都会返回有效数字或- 0，因此最好在转换后添加NaN，以便所有无效（|| 0，NaN， 0，null）号码将转为undefined。因此，将文本转换为int的好方法是0

<强> 4。关于阅读资源

将所有资源类型存储在列表中是个好主意，因此parseInt(text) || 0。现在，如果您想要添加另一个输入，您只需将字符串添加到var resourceList = ["stone", "wood"];即可。所以现在调用函数时，所有输入的值都存储在一个对象中，现在使用一个关联数组，因此您可以使用resourceList获得所需的值，即object["propety name"] 。然后添加循环遍历container["wood"]的所有属性的所有元素（因此，您希望使用container object而不是in，in用于循环访问对象的属性，而对于循环遍历一个iteratable（如列表）项目）并将属性的值添加到总数中。

Answer 4

有几个错误：

首先：Wood.value和Stone.value不存在 - 您已经选择了＆＃34;值＆＃34;文本框的属性，因此这些变量包含字符串，您不需要向下钻取＆＃34;值＆＃34;财产再次。

其次，您的变量是字符串，而不是数字，因此您需要将它们解析为数字，然后才能以数学方式添加它们。

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

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>

N.B。如果您的数量需要支持分数，则需要使用parseFloat（）而不是parseInt（）。

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

4 个答案:

解释＆amp;评论