使用Javascript'；s getElementsByName并使用getElementById输出结果

我很难使用输入名称抓取多个输入，并向它们添加乘法，如下所示。是否有其他方法可以不使用getElementById执行此操作

<input type="number" name="test1" id="RoundInput1">
<input type="number" name="test2" id="RoundInput2">

<button onclick="GetTheResults()">Try it</button>

<p id="demo">Click the button to change the text in this paragraph.</p>

<script>
x = document.getElementsByName("test1").value;
z = document.getElementsByName("test2").value;
var Savings = x + z;
function GetTheResults() {
document.getElementById("demo").innerHTML = Savings;
}
</script>

试试看
单击按钮更改此段落中的文本
函数GetTheResults（）{
x=document.getElementsByName（“test1”）[0]。值；
//x=document.getElementById（“RoundInput1”）.value；
z=document.getElementsByName（“test2”）[0]。值；
//z=document.getElementById（“RoundInput2”）.value；
var储蓄=parseInt（x）+parseInt（z）；
document.getElementById（“demo”）.innerHTML=Savings；
}

试试看
单击按钮更改此段落中的文本
函数GetTheResults（）{
x=document.getElementsByName（“test1”）[0]。值；
//x=document.getElementById（“RoundInput1”）.value；
z=document.getElementsByName（“test2”）[0]。值；
//z=document.getElementById（“RoundInput2”）.value；
var储蓄=parseInt（x）+parseInt（z）；
document.getElementById（“demo”）.innerHTML=Savings；
}

您需要将

document.getElementsByName（）调用移动到函数中。您还需要使用
parseInt（）
将输入转换为整数值。正如名称
getElementsByName
所暗示的，返回值是所有找到的元素的数组；在本例中，您需要访问返回数组的第一个元素进行添加

代码


函数GetTheResults（）{
x=parseInt（document.getElementsByName（“test1”）[0].value）；
z=parseInt（document.getElementsByName（“test2”）[0].value）；
var储蓄=x+z；
document.getElementById（“demo”）.innerHTML=Savings；
}

试试看
单击按钮更改此段落中的文本。

您需要将

文档.getElementsByName（）

调用移动到函数中。您还需要使用

parseInt（）

将输入转换为整数值。正如名称

getElementsByName

所暗示的，返回值是所有找到的元素的数组；在本例中，您需要访问返回数组的第一个元素进行添加

代码

函数GetTheResults（）{ x=parseInt（document.getElementsByName（“test1”）[0].value）； z=parseInt（document.getElementsByName（“test2”）[0].value）； var储蓄=x+z； document.getElementById（“demo”）.innerHTML=Savings； }

试试看
单击按钮更改本段中的文本。

注意，只需加载一次test1和test2的值。通过将变量x、z和Savings放入函数GetTheResults中，它将起作用。您只是声明了函数

GetTheResults

，而不是实际调用它。要调用它，只需在

标记之前添加

GetTheResults（）

，实际上，它会被onclick eventNote调用，即只加载test1和test2的值一次。通过将变量x、z和Savings放入函数GetTheResults中，它将起作用。您只是声明了函数

GetTheResults

，而不是实际调用它。要调用它，只需在

标记之前添加

GetTheResults（）

，实际上，它会被onclick事件调用谢谢！这似乎奏效了。也谢谢你的解释。这只是我用于StackOverFlow的一个示例，但看起来我有大约50个调用要从您所说的转移到我的函数中。所以我可能会回来。哈哈。@Dayley不客气，谢谢你的接受！当然，请随时再次提问：-）你好，萨沙姆，您是否有任何方法与您联系，以便我可以运行您编写的包含上述内容的大部分代码？由于这是一页代码，我怀疑我在这里会收到很多人的回复。@Dayley好的。加入。：）谢谢这似乎奏效了。也谢谢你的解释。这只是我用于StackOverFlow的一个示例，但看起来我有大约50个调用要从您所说的转移到我的函数中。所以我可能会回来。哈哈。@Dayley不客气，谢谢你的接受！当然，请随时再次提问：-）你好，萨沙姆，您是否有任何方法与您联系，以便我可以运行您编写的包含上述内容的大部分代码？由于这是一页代码，我怀疑我在这里会收到很多人的回复。@Dayley好的。加入。：）

x = document.getElementsByName("test1")[0].value;
z = document.getElementsByName("test2")[0].value;

<input type="number" name="test1" id="RoundInput1">
<input type="number" name="test2" id="RoundInput2">

<button onclick="GetTheResults()">Try it</button>

<p id="demo">Click the button to change the text in this paragraph.</p>

<script>
    function GetTheResults() {
        x = document.getElementsByName("test1")[0].value;
        // x = document.getElementById("RoundInput1").value;

        z = document.getElementsByName("test2")[0].value;
        // z = document.getElementById("RoundInput2").value;

        var Savings = parseInt(x) + parseInt(z);
        document.getElementById("demo").innerHTML = Savings;
    }
</script>