Javascript 将两个独立函数的和相加

（埃塔：我正在为一个班级做这件事，老师希望每件事都“只输入”…是的，这很烦人：p）

我正在研究一种形式，其中每个函数都包含一个数字，并给我一个输入的“小计”。我想从这两个函数中取两个“小计”答案，并将它们相加成一个“总数”。我觉得这应该很简单，但我试过的都不管用

下面是我在javascript中获得的内容，它为我提供了两个小计：

function myCalculator() {
    var qty1 = document.getElementById('qty1').value;
    document.getElementById('subTotalOne').innerHTML = '$ ' + qty1 * 19.99;
}

function myCalculatorTwo() {
    var qty2 = document.getElementById('qty2').value;
    document.getElementById('subTotalTwo').innerHTML = '$ ' + qty2 * 37.99;
}

以下是html的重要部分：

                    <div class="qty">
                        <label for="qty">Qty</label><br>
                        <input type="number" id="qty1" placeholder="0" oninput="myCalculator()"/><br>
                        <input type="number" id="qty2" placeholder="0" oninput="myCalculatorTwo()"/><br>
                    </div>
                 
                    <div class="price">
                        <label for="price">Price</label>
                        <p>$19.99</p>
                        <p>$37.99</p>
                    </div>
                
                    <div class="subtotal">
                        <label for="subTotal">Total</label><br>
                        <span class="subTotalOne" id="subTotalOne">$</span><br>
                        <span class="subTotalTwo" id="subTotalTwo">$</span><br>
                    </div>
                 
                 
                    <div class="total">
                        <label for="total">Order Total</label><br>
                        <span class="orderTotal" id="orderTotal" oninput="orderTotal()">$</span><br>
                    </div>

数量





价格
19.99美元

37.99美元

总计

$

$

订单总数

$

我正在尝试添加小计一和小计二，并在orderTotal中输出它们，本质上是：）

谢谢

以下是您的操作方法：

function orderTotal() {
    const qty1  = document.getElementById('qty1').value;
    const qty2  = document.getElementById('qty2').value;
    const total = parseInt(qty1) + parseInt(qty2);

    document.getElementById('orderTotal').innerHTML = '$ ' + total;
}

删除

span

元素中的

oninput=“orderTotal（）”

，并使用按钮点击触发上述功能，例如当两个输入值中的任何一个发生变化时，

计算总计。也可以考虑使用<代码> const  >代码> > <代码> >而不是<代码> var >代码> < /p>
 
而不是在瑞的回答中查询DOM——因为DOM查询通常都是因为它们比较慢而避免的，所以您也可以考虑在两个函数之间使用共享变量。
此外，考虑使用其他代替NeNelHTML的方法，主要是因为效率。

//全局变量（排序ID是唯一的）
设小计一、小计二、qty1、qty2、orderTotal；
常量设置=（）=>{
小计=document.getElementById（'subTotalOne'）；
小计二=document.getElementById（'subTotalTwo'）；
qty1=document.getElementById（'qty1'）；
qty2=document.getElementById（'qty2'）；
orderTotal=document.getElementById（'orderTotal'）；
我的计算器（）；
myCalculatorTwo（）；
};
const updateTotal=（目标，值）=>{
if（target==null | | value==null | | Number.isNaN（value））返回；
target.textContent=`$${value.toFixed（2）}`；
target.setAttribute（'data-value'，value.toFixed（2））；
}
常量getTotal=（）=>{
if（subTotalOne==null | | subTotalTwo==null）返回0；
常数[value1，value2]=[
Number.parseFloat（（小计.dataset？.value±0），10），
Number.parseFloat（（小计2.dataset？.value±0），10）
];
if（Number.isNaN（value1）| Number.isNaN（value2））返回；
否则返回值1+2；
};
const updateOrderTotal=（）=>updateTotal（orderTotal，getTotal（））；
常量myCalculator=（）=>{
常量值=Number.parseFloat（qty1.value | | 0,10）*19.99；
更新总计（小计，值）；
updateOrderTotal（）；
}
常量myCalculatorTwo=（）=>{
常量值=Number.parseFloat（qty2.value | | 0,10）*37.99；
更新总计（小计二，数值）；
updateOrderTotal（）；
}
window.addEventListener（“加载”，设置）

数量





价格
19.99美元
37.99美元
总计

$

$

订单总数

$

欢迎使用堆栈溢出！为了改进您的代码，通常最好避免使用内联JS，这样代码更易于阅读和维护（所有内容都在一个位置）。[我为什么要避免内联脚本？]（）嗨，谢谢！我正在为一个类做这个工作，老师特别希望所有内容都是“oninput”：\如果是这样，那么您必须在myCalculator（）和myCalculatorTwo（）函数的末尾调用orderTotal（）函数。因此，每次输入值发生变化时，都会计算总数。将oninput放在span元素中没有意义，因为它不是您可以键入的内容。嗨，谢谢！这应该在输入端起作用吗？（我正在为一个班级做这件事，老师想把所有的东西都输入（对不起，我忘了提一下））这完全是有道理的，但当我尝试它时，它却毫无用处：(
var total1;
var total2;

function myCalculator() {
    var qty1 = document.getElementById('qty1').value;
    total1 = qty1 * 19.99
    document.getElementById('subTotalOne').textContent = '$ ' + total1;
}

function myCalculatorTwo() {
    var qty2 = document.getElementById('qty2').value;
    total2 = qty2 * 37.99;
    document.getElementById('subTotalTwo').textContent = '$ ' + total2;
}

function orderTotal() {
    document.getElementById('orderTotal').innerHTML = '$ ' + (total1 + total2); 
    //parentheses because '$' isn't a number so the numbers total1 and total2 will be treated like strings and joined together 
}