Function createelement

Question

Looking at the code below I have 3 buttons with the function "content()" right? This function creates a div in which you will receive the value of the text field next to the button. When I click on any of the buttons it always displays the value of "txt_1". How do I make each button print its given text field that is next to it?

function conteudo() {
  //Cria a div
  var div_c = document.createElement("DIV");
  div_c.style.width = "30%";
  div_c.style.height = "35px";
  div_c.style.margin = "30px 10px";
  div_c.style.background = "#ffe0e0";
  div_c.innerHTML = "Item: <input name='txt_result' id='txt_result' type='text' value='' />";
  document.getElementById("main").appendChild(div_c);

  //Pega os conteúdos e exibe
  var num1 = document.getElementById('txt_1').value;
  var num2 = document.getElementById('txt_2').value;
  var num3 = document.getElementById('txt_3').value;
  document.getElementById('txt_result').value = num1;
}

<input name="txt_1" id="txt_1" type="text" value="Item1" /><input name="btn1" id="btn1" type="button" value="Botao 1" onclick="conteudo()" /><br />
<input name="txt_2" id="txt_2" type="text" value="Item2" /><input name="btn2" id="btn2" type="button" value="Botao 2" onclick="conteudo()" /><br />
<input name="txt_3" id="txt_3" type="text" value="Item3" /><input name="btn3" id="btn3" type="button" value="Botao 3" onclick="conteudo()" />

<div id="main"></div>

Answer 1

You have explicitly .value = num1;, so the value is always the same. To fix it you must use the . previousElementSibling that will give you the previous element. But you also need to know the element clicked, and that you can pass the this to the function.

In steps:

• uses onclick="conteudo(this)" to give the function access to the clicked element
• uses var num = btn.previousElementSibling.value; to fetch the value you seek
• uses div_c.querySelector('[name="txt_result"]').value = num; to fetch the input inside div_c and set the value you received from the previous point

So you can do whatever you want this way:

function conteudo(btn) {
  //Cria a div
  var div_c = document.createElement("DIV");
  div_c.style.width = "30%";
  div_c.style.height = "35px";
  div_c.style.margin = "30px 10px";
  div_c.style.background = "#ffe0e0";
  div_c.innerHTML = "Item: <input name='txt_result'  type='text' value='' />";
  document.getElementById("main").appendChild(div_c);

  //Pega os conteúdos e exibe
  var num = btn.previousElementSibling.value;
  div_c.querySelector('[name="txt_result"]').value = num;
}

<input name="txt_1" id="txt_1" type="text" value="Item1" /><input name="btn1" id="btn1" type="button" value="Botao 1" onclick="conteudo(this)" /><br />
<input name="txt_2" id="txt_2" type="text" value="Item2" /><input name="btn2" id="btn2" type="button" value="Botao 2" onclick="conteudo(this)" /><br />
<input name="txt_3" id="txt_3" type="text" value="Item3" /><input name="btn3" id="btn3" type="button" value="Botao 3" onclick="conteudo(this)" />

<div id="main"></div>

Notice what I use div_c.querySelector('[name="txt_result"]') and so I am not dependent on id of the newly created input.