JavaScript-有没有办法（不使用html事件属性）获得3个不同的输入值以形成一个总和？_Javascript_Html_Arrays_User Interface

JavaScript-有没有办法（不使用html事件属性）获得3个不同的输入值以形成一个总和？

javascript html arrays user-interface

JavaScript-有没有办法（不使用html事件属性）获得3个不同的输入值以形成一个总和？,javascript,html,arrays,user-interface,Javascript,Html,Arrays,User Interface,我正在完成Brian p.Hogan编写的57个编程练习本在这些练习中，我尝试开发一个GUI 在下面的练习中，我想计算几年内本金价值的单利。简言之： var yearlyInterest = Principal * (Percentage(whole number) /= 100) (yearlyInterest * numberOfYears) + Principal // outputs total amount at the end of investment over a peri

我正在完成Brian p.Hogan编写的57个编程练习本

在这些练习中，我尝试开发一个GUI

在下面的练习中，我想计算几年内本金价值的单利。简言之：

var yearlyInterest = Principal * (Percentage(whole number) /= 100)

(yearlyInterest * numberOfYears) + Principal

// outputs total amount at the end of investment over a period of however many years

正如您在上面的示例中所看到的，有三个核心输入-本金、百分比和时间

在创建图形用户界面时，我很难同时获得所有这些核心输入来计算结果

下面的代码只在我输入时间输入的数字后计算结果。（请原谅我糟糕的编码技能，即全局变量，我只能完成练习12！）

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <label for="principal">Principal</label>
    <input type="number" class="principal" style="border-color: black;">

    <label for="percentage">Percentage</label>
    <input type="number" class="percentage" style="border-color: black;">

    <label for="time">Time</label>
    <input type="number" class="time" style="border-color: black;">

    <div id="result"></div>
</body>
<script src="simpleInterest.js"></script>
</html>

有人能告诉我一种有效的方法，可以基于每个输入事件同时计算一些东西，并使用.innerHTML方法输出它吗

谢谢

创建用于计算的函数，并调用此函数，而不是只执行一些代码。诸如此类：

var principal=document.getElementsByClassName（“主体”）
var percentage=document.getElementsByClassName（“百分比”）
var time=document.getElementsByClassName（“时间”）
var输出=document.querySelector（“结果”）
var结果
var newResult
最终输出值
var计算=（）=>{
var newPrincipal=principal[0]。值；
结果=newPrincipal
var newPercentage=百分比[0]。值
新结果=结果*（新百分比/100）
var newTime=时间[0]。值
最终输出=（新结果*新时间）+数字（结果）
}
document.addEventListener（'input'，函数（事件）{
if（event.target.classList.contains（'principal'））{
计算（）；
}
if（event.target.classList.contains（'percentage'））{
计算（）；
}
if（event.target.classList.contains（'time'））{
计算（）；
}
output.innerHTML=`${finalOutput？finalOutput:“”`
}，假）您需要获取所有输入的值，而不仅仅是用户当前输入的值。定义一个函数来执行此操作，并将其添加为所有3个输入的事件侦听器

var-principal=document.querySelector（“.principal”）；
变量百分比=document.querySelector（“.percentage”）；
变量时间=document.querySelector（“.time”）；
var输出=document.querySelector（“结果”）；
函数CANCINTEREST（）{
var newPrincipal=parseFloat（principal.value）；
var newPercentage=parseFloat（percentage.value）；
var newTime=parseFloat（time.value）；
如果（！isNaN（newPrincipal）&&！isNaN（newPercentage）&&！isNaN（newTime））{
var结果=newPrincipal+newTime*newPrincipal*newPercentage/100；
output.textContent=结果；
}
}
委托人。附录列表（“输入”，利益相关者）；
百分比。addEventListener（“输入”，calcInterest）；
时间。addEventListener（“输入”，calcInterest）
主体


百分比


时间

结果:
请养成在每条语句末尾加分号的习惯。ASI很容易产生意想不到的结果。你可以删除该书的亚马逊链接，因为它可能被视为垃圾邮件。另外，我认为提到这个名字和作者对于真正有兴趣购买它的人来说是足够的信息！很抱歉，如果您将这些输入类更改为IDs，您的生活将变得更加轻松。更容易选择，也更正确（因为您只会出现一次“principal”等），虽然不是在所有浏览器中都完全实现，但HTML5有一个元素输出，非常适合您的用例。而不仅仅是一个div。
var principal = document.getElementsByClassName("principal");
var percentage = document.getElementsByClassName("percentage");
var time = document.getElementsByClassName("time");
var output = document.querySelector("#result");
var result;
var newResult;
var finalOutput;

document.addEventListener('input', function (event) {

    if ( event.target.classList.contains( 'principal' ) ) {
        var newPrincipal = principal[0].value;
        result = newPrincipal;
    }

    if ( event.target.classList.contains( 'percentage' ) ) {
        var newPercentage = percentage[0].value;
        newResult = result * (newPercentage / 100);
    }

    if ( event.target.classList.contains( 'time' ) ) {
        var newTime = time[0].value;
        finalOutput = (newResult * newTime) + Number(result);
    }

    output.innerHTML = `${finalOutput ? finalOutput : ""}`
}, false);