Javascript: Когда я добавляю новый элемент, данные предыдущих элементов теряются? - PullRequest
Новая
       30

Javascript: Когда я добавляю новый элемент, данные предыдущих элементов теряются?

0 голосов
/ 07 июня 2019

Значок с идентификатором «add_barcode» добавляет поля ввода одно под другим.Но проблема в том, что когда я добавляю, например, 2 новых ввода и набираю в них текст, а затем добавляю третий ввод - текст, который я набрал раньше, пропал.

- HTML 

                            <div class="left">
                                Bardcode:
                            </div>
                            <div class="center" style="margin-left:10px;">
                                <ons-list-item><ons-input id="tf_barcode" modifier="underbar" placeholder="Barcode" float></ons-input></ons-list-item>
                            </div>
                            <div id="scann" class="right">
                                <ons-icon size="30px" icon="fa-barcode" class="list-item__icon"></ons-icon>
                            </div>
                        </ons-list-item>
                        <ons-list-item style="margin-top:-30px">
                            <div id="tf_color_fuellmenge" class="left">
                                Füllmenge:
                            </div>
                            <div class="center">
                                <ons-list-item><ons-input id="tf_fuellmenge" modifier="underbar" placeholder="Füllmenge" float></ons-input></ons-list-item>
                            </div>
                            <div class="right">
                                <ons-icon size="25px" style="color:#810000" icon="fa-trash" class="list-item__icon"></ons-icon>
                            </div>
                        </ons-list-item>

                    </ons-list>
                    </div>
                    <ons-list-item>
                        <div class="center" style="margin-left: 40%;">
                            <ons-icon id="add_barcode" icon="fa-plus-circle" class="list-item__icon"></ons-icon>
                        </div>


```javascript
    var counter = 0;

    function addBarcode() {



        var str = '<ons-list id="tf_barcode_nr';
        str += (++counter);
        str += '"style= "margin-top:5px"modifier="inset"><ons-list-item><div class="left">Bardcode:</div><div class="center" style="margin-left:10px;"><ons-list-item><ons-input id="tf_barcode" modifier="underbar" placeholder="Barcode" float></ons-input></ons-list-item></div><div id="scann" class="right"><ons-icon size="30px" icon="fa-barcode" class="list-item__icon"></ons-icon></div></ons-list-item><ons-list-item style="margin-top:-30px"><div id="tf_color_fuellmenge" class="left">Füllmenge:</div><div class="center"><ons-list-item><ons-input id="tf_fuellmenge" modifier="underbar" placeholder="Füllmenge" float></ons-input></ons-list-item></div><div class="right"><ons-icon id="tf_barcode_nr';
        str += counter;
        str += '" onClick="deleteBarcode(this.id)" size="25px" style="color:#810000" icon="fa-trash" class="list-item__icon"></ons-icon></ons-icon></div></ons-list-item></ons-list >';





        var d1 = document.getElementById('tf_after');
        d1.innerHTML += str;

    }
...