Добавьте второй вход, если заполнено более 2 символов.(JavaScript) (сложный)

Question

У меня есть форма с полем ввода, с javascript она создаст то же поле ввода под первым, когда пользователи вводят более 2 символов.Код для этого:

 <h7> Optie 1: </h7><input type="text" name="input1" onkeyup="if (this.value.length > 1 && treated[this.name] != 1){ addOne(); treated[this.name] = '1'; }"  id="productoptiesadd"> <h7>&euro;</h7> <input type="text" name="price1" id="productoptiesaddprice">

&

        <script>
        treated = new Object(); 
        inputNumber = 1;

        function addOne() {

            //Create an input type dynamically.
            var divElement = document.createElement("div");

            var element = document.createElement("input");
            inputNumber++;
            element.setAttribute("name", "input" +inputNumber);
            element.setAttribute("onkeyup", "if (this.value.length > 1 && treated[this.name] != 1){ addOne(); treated[this.name] = '1'; }");
            element.setAttribute("id", "productoptiesadd");

            var price = document.createElement("input");
            price.setAttribute("name", "price" +inputNumber);
            price.setAttribute("id", "productoptiesaddprice");

            var foo = document.getElementById("japroductopties");

            var htag = document.createElement("h7");
            htag.innerHTML = "Optie " + inputNumber + ":";

            var htags = document.createElement("h7");
            htags.innerHTML = " € ";

            divElement.appendChild(htag);
            divElement.appendChild(element);
            divElement.appendChild(htags);
            divElement.appendChild(price);
            foo.appendChild(divElement);
            }
    </script>

Это работает нормально, но теперь я получаю свой следующий вызов, потому что первые поля ввода должны добавить опцию продукта,и ниже у меня есть другая опция, которая должна давать скидку.

Вот моя главная проблема: «Как я могу получить столько полей ввода скидки, сколько имеется полей опции продукта».

Чтобы дать вам больше информации, вот скриншот того, как я имел в виду макет:

вот HTML-код этой части, но последние поля ввода должны бытьстолько же, сколько есть полей ввода опций.

<div id="productoptiecheat"></div>
                            <div id="japroductopties">
                               <h7> Optie 1: </h7><input type="text" name="input1" onkeyup="if (this.value.length > 1 && treated[this.name] != 1){ addOne(); treated[this.name] = '1'; }"  id="productoptiesadd"> <h7>&euro;</h7> <input type="text" name="price1" id="productoptiesaddprice">
                            </div><!-- Japroductopties -->
                            <div class="clear"></div>
                    <label>Product in aanbieding</label>
                        <select class="select" title="product in aanbieding" name="productinaanbieding" id="productaanbieding" onchange='SwitchHiddenDiv2();'>
                            <option value="jaaanbieding">Ja</option>
                            <option value="neeaanbieding">Nee</option>
                        </select>
                            <div id="productoptiecheat"></div>
                            <div id="jaaanbieding">
                                <select class="select" title="plaats vd aanbieding" name="aanbiedingplaats" id="aanbiedingplaats">
                                    <option value="hompagerubriek">Aanbieding tonen op homepage & rubriek</option>
                                    <option value="rubriek">Aanbieding tonen in rubriek</option>
                                    <option value="homepage">Aanbieding tonen op de homepage</option>
                                    <option value="niet">Aanbieding niet tonen</option>
                                </select><br />
                                <h7>Optie 1: Normaal bedrag: <b>&euro;</b></h7><input type="text" id="productoptiesadd" /> <h7>Aanbieding:</h7> <input type="text" id="productoptiesaddprice" /><br />
                                <h7>Optie 2: Normaal bedrag: <b>&euro;</b></h7><input type="text" id="productoptiesadd" /> <h7>Aanbieding:</h7> <input type="text" id="productoptiesaddprice" /><br />
                                <h7>Optie 3: Normaal bedrag: <b>&euro;</b></h7><input type="text" id="productoptiesadd" /> <h7>Aanbieding:</h7> <input type="text" id="productoptiesaddprice" /><br />
                                <h7>Optie 4: Normaal bedrag: <b>&euro;</b></h7><input type="text" id="productoptiesadd" /> <h7>Aanbieding:</h7> <input type="text" id="productoptiesaddprice" /><br />
                            </div><!-- jaaanbieding -->
                            <div class="clear"></div>

Я надеюсь, что some1 может помочь мне с этим.

Answer 1

Поправьте меня, если я ошибаюсь, но похоже, что вы хотите добавить одну из следующих строк:

<h7>Optie 1: Normaal bedrag: <b>&euro;</b></h7><input type="text" id="productoptiesadd" /> <h7>Aanbieding:</h7> <input type="text" id="productoptiesaddprice" /><br />

... для каждого случая, когда ваша функция выше добавляет опцию продукта / цены.

Я бы сказал, чтобы добавить DIV к вашему HTML ниже тега SELECT name = "aanbiedingplaats".Назовите его id = "discount" и добавьте этот код в вашу функцию:

document.getElementById ("discount"). InnerHTML + = yourOptionHTML;

Я здесь использую innerHTML, но вы можетеразверните это в функцию, аналогичную вашей addOne ().