Генератор полей формы на JS. Как улучшить?

250

12 декабря 2016, 10:04

Хочу сделать простой генератор формы, где можно добавлять только input type="text" и textarea.

Сделал две кнопки, при нажатии на которые добавляются поля:

<input type="button" id="input" value="TextField" onclick="dynamic_field('text',1)" />
                <input type="button" id="textarea" value="TextArea" onclick="dynamic_field('textarea',2)" />

И такой JS код:

function dynamic_field(type,div_no){
            if(type == 'text'){
                document.getElementById('dynamic_field_'+div_no).innerHTML='TextField Name : <input type = "text" name="txt_field"> -> your text field has been generated just define name';    
            }else if (type == 'textarea'){
                document.getElementById('dynamic_field_'+div_no).innerHTML='TextArea Name : <input type = "text" name="text_area"> -> your text area has been generated just define name';  
            }else if (type == 'table_name'){
                document.getElementById('dynamic_field_'+div_no).innerHTML='Table Name : <input type = "text" name="table_name"> -> your table has been generated just define name';    
            }
        }

Как мне нужно изменить код, чтобы я при нажатии на кнопку 5 раз получил 5 полей формы? Сейчас каждая кнопка реагирует только на первое нажатие клавиши мышки.

Answer 1

Во-первых, не юзай onClick (за последнее время уже счёт потерял сколько я это говорю) - вредно это.
Во-вторых, ты устанавливаешь содержимое, а не добавляешь.
См. ниже:

var el; // Сферический элемент в вакууме 
 
el.innerHTML = '1'; 
el.innerHTML = '2'; 
// Содержимое el: 2 
 
el.innerHTML = '1'; 
el.innerHTML += '2'; 
// Содержимое el: 12