使用HTML和JS从输入中获取所有输出

var br = document.createElement("br");
function productCheck() {
var form = document.createElement("form");
var price = document.createElement("input");
price.setAttribute("type", "number");
price.setAttribute("id", "number1");
price.setAttribute("placeholder", "Product Price");
price.onchange = handleChange;
var qty = document.createElement("input");
qty.setAttribute("type", "number");
qty.setAttribute("id", "number2");
qty.setAttribute("placeholder", "quantity");
qty.onchange = handleChange;
var discount = document.createElement("input");
discount.setAttribute("type", "number");
discount.setAttribute("id", "number3");
discount.setAttribute("placeholder", "discount");
discount.onchange = handleChange;
var div = document.createElement("div");
div.setAttribute("id", "total");
form.appendChild(br.cloneNode());
div.onchange = handleChange;
form.appendChild(price);
// Inserting a line break
form.appendChild(br.cloneNode());
...
form.appendChild(qty);
...
form.appendChild(discount);
...
form.appendChild(div);
...
document.getElementsByTagName("body")[0]
.appendChild(form);
}
function handleChange() {
var p = document.getElementById("number1").value;
var q = document.getElementById("number2").value;
var d = document.getElementById("number3").value;
var total = parseFloat(p) * parseInt(q);
var discount_applied = parseFloat(total * d / 100);
var eff_price = parseFloat(total) - parseFloat(discount_applied);
if (!isNaN(eff_price))
return " ";
if (p > 0 && q > 0){
var eff = document.querySelector("#total");
eff.innerHTML = eff_price.toFixed(2);
}
}

创建了一个具有多个输入的表单。问题在于输出。我只得到1个输出。在添加了多个输入之后，我只在第一次出现时得到输出。如何解决每次出现的问题？我只想要使用JS和HTML的解决方案。此中不允许使用jquery。