我目前正在通过添加三个输入元素的值来尝试简单的添加

Question

我目前正在通过添加三个输入元素的值来尝试简单的添加。

我有三个输入元素和一个带有onclick监听器的按钮元素来调用我的函数。该功能是简单地返回用户在h2元素中输入的那些值之和的输出，即全部。这是HTML和JS：

<div class="inputFields">
    <input class="lado" type="text" />
    <input class="lado" type="text" />
    <input class="lado" type="text" />
</div>
<button type="button" onclick="getArea()">click</button>
<h2 id="areaResult"></h2>

var s1 = document.getElementsByClassName('lado')[0].value;
var s2 = document.getElementsByClassName('lado')[1].value;
var s3 = document.getElementsByClassName('lado')[2].value;

/*to my understanding, the .value property (like .innerHTML) renders a 
string value. Do please correct me if I'm wrong.*/

function getArea() {
    document.getElementById('areaResult').innerHTML =  
    Number(s1) + Number(s2) + Number(s3);  
    /*Utilized Number() method to convert the string values rendered by
    the .value properties to number values so as to perform addition 
    arithmetic operation rather than concatenation.*/ 
}

然而，对我来说一些神秘理由的输出总是0，无论我输入什么数字，或者即使我输入非数字字符。

我究竟做错了什么？

Answer 1

声明函数内的所有变量。

你不需要每次都写document.getElementsByClassName。只需使用变量存储所有类元素，然后使用index从该变量中获取值，如下所示：

function getArea() {
    var lado = document.getElementsByClassName('lado');
    var s1 = lado[0].value;
    var s2 = lado[1].value;
    var s3 = lado[2].value;

    document.getElementById('areaResult').innerHTML =  
    Number(s1) + Number(s2) + Number(s3);
}

<div class="inputFields">
    <input class="lado" type="text" />
    <input class="lado" type="text" />
    <input class="lado" type="text" />
</div>
<button type="button" onclick="getArea()">click</button>
<h2 id="areaResult"></h2>