Добавление js элементов

111

29 августа 2019, 00:10

Подскажите пожалуйста, есть код в котором при нажатии на input добавляется div элемент.

var p = document.getElementById("inputi") ; 
var length = 1 ; 
function add_input() { 
 var new_input = document.createElement("input") ; 
 new_input.name = "my_input" ; 
 var div = document.createElement('div') ; 
 div.innerHTML = '<br>div элемент №' + length + '<br>' ; 
 div.appendChild(new_input) ; 
 p.appendChild(div) ; 
 length++ ; 
} ;

<select> 
<option value="1" onclick="add_input();">1</option> 
<option value="2" onclick="add_input();">2</option> 
<option value="3" onclick="add_input();">3</option> 
<option value="4" onclick="add_input();">4</option> 
</select> 
<br> 
<input type="button" onclick="add_input();" value="Добавить элемент"> 
<form> 
<div id="inputi"><input name="my_input"></div> 
</form>

Как сделать что бы при нажатии на option у нас создавался div c input, в котором будет занесен value option?

Answer 1

var p = document.getElementById("inputi"); 
var length = 1; 
 
function add_input_from_select(select) { 
  var new_input = document.createElement("input"); 
  new_input.name = "my_input"; 
  new_input.value = select.value; 
  var div = document.createElement('div'); 
  div.innerHTML = '<br>div элемент №' + length + '<br>'; 
  div.appendChild(new_input); 
  p.appendChild(div); 
  length++; 
} 
 
function add_input_old() { 
  add_input_from_select(document.getElementById("selector")); 
}

<select id="selector" onchange="add_input_from_select(this)"> 
  <option value="1">1</option> 
  <option value="2">2</option> 
  <option value="3">3</option> 
  <option value="4">4</option> 
</select> 
<br> 
<input type="button" onclick="add_input_old()" value="Добавить элемент"> 
<form> 
  <div id="inputi"><input name="my_input"></div> 
</form>