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

Question

    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。

Answer 1

var elms = document.forms["form_name"].getElementsByTagName("input");
for (let index = 0; index < elms.length; index++) {
    const element = elms[index];
    console.log(element.value);
 }

您还需要为表单指定“名称”属性（在我的示例中，我将其命名为“form_name”）

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

Obtaining all outputs from the inputs using HTML and JS

html

javascript

forms

user-input