Javascript js根据输入数字计算总价并显示

我有三种类型的票。儿童-花费8美元，退休人员-花费10美元，成人-花费12美元，我有3个输入数字，我想当这三个输入中的某个人改变时，计算并打印html总价

这是我的html

children<input type="number" id="children" name="children" min="0" max="20" value="0" onchange="myScript">
adults<input type="number" id="adults" name="adults" min="0" max="20" value="0" onchange="myScript">
retirees<input type="number" id="retirees" name="retirees" min="0" max="20" value="0" >

我想看起来像那样

---

在

下面给定一个div，格式为

您可以这样设置价格：

let price_div = document.querySelector("#price")
// Apply whatever formatting to the price you want.
price_div.innerHTML = total

---

由于这些是输入字段，因此您只需使用它们的值

function totalPrice(){
   var total = 0 
   var children = document.getElementsByName('children');
   var adults = document.getElementsByName('adults');
   var retirees = document.getElementsByName('retirees');
   total = (parseInt(children.value) * 8) + (parseInt(adults.value) * 12) + (parseInt(retirees.value) * 10);

函数totalPrice（）{
var总计=0
var children=document.getElementsByName（'children'）[0]。值；
var maintals=document.getElementsByName（'maintals'）[0]。值；
var retireers=document.getElementsByName（'retireers'）[0]。值；
总数=（儿童*8）+（成人*12）+（退休人员*10）；
控制台日志（总计）；
document.getElementById（'totalPrice'）。textContent=total；
}

儿童
成人
退休人员

一种可能的方法是放置一个

div

，用于在html中显示总计

<div id="total"></div>

然后使用以下命令更新html中的值：

totalDiv.innerHTML = `<h3>Total: ${total}$</h3>`;

totalDiv.innerHTML=`Total:${Total}$`；

---

工作是你想要的，不确定这是否是一个输入错误，但是你有三个变量名为

children

getElementsByName->get value在这里你正在存储完整的元素，请参阅我的解决方案，但是如何不使用按钮来实现它更新没有按钮的代码。我试图让它像你的一样，但对我来说不起作用。您知道在共享jsp页面时使用jsp而不是HTML会有问题吗？这是我的JSP将这一行

从顶部移动到

行之前。最后3行将再次显示

document.querySelectorAll("input").forEach(el => {
  el.addEventListener("change", () => {
    totalPrice();
  });
});

totalDiv.innerHTML = `<h3>Total: ${total}$</h3>`;