Loop for document.getElementById in javascript

Question

I have two tabs in html. In the 1st tab i have some options, such as textarea, option list, checkbox... I want my app to show/transfer whatever i choose (in the 1st tab) to the 2nd tab as text, when i click an "ok" button.

In the js script i put the following function:

function myFunction() {
  var r="";
  var x="";
  var y="";
  var z="";

  var i;
  for (i=0; i++){
    var x = document.getElementById("myTextarea").value;
    var y = document.getElementById("mySelect").value;
    var z = document.getElementById("mySelect2").value;
    var r = x + " " + y +" " + z ;
  }
  document.getElementById("result").innerHTML = r;

}

where the result is shown in the 2nd tab as follows:

<p id="result"></p>

My problem is that it doesn't show every time what I choose in the 1st tab, but every time I click the "ok" button, the 2nd tab shows my last options. In other words I want the 2nd tab to show all of my options every time I click 'ok'. It is obvious that i make a mistake in the loop for. But what is it?

Please help me...

1. for loop not complete - missing the while/until clause; 2. r being calculated over and over if there was an until clause; 3 why loop? You are not using the i anywhere - you can remove var r=""; var x=""; var y=""; var z=""; var i; for (i=0; i++){ and the } after the SECOND var r — mplungjan
– mplungjan, Commented Jun 17, 2017 at 6:37
If you declare once a variable, then you didn't need to declare it again. e.g in your code var r="" declare twice. — Ataur Rahman Munna
– Ataur Rahman Munna, Commented Jun 17, 2017 at 6:40
This will work better: function myFunction() { document.getElementById("result").innerHTML= document.getElementById("myTextarea").value +" "+ document.getElementById("mySelect").value +" "+ document.getElementById("mySelect2").value; } — mplungjan
– mplungjan, Commented Jun 17, 2017 at 6:42
Thank you, but this code shows every time only my new options and replaces my previous options with the new. I want it to show all the options every time. — jsprogrammer
– jsprogrammer, Commented Jun 17, 2017 at 7:05
In other words, i want to take the result every time i click ok in the 1st tab, without remove the previous result. Something like this: result (1st time) result (2nd) result (3rd) ........ (...) — jsprogrammer
– jsprogrammer, Commented Jun 17, 2017 at 7:15

trincot · Accepted Answer · 2017-06-17 07:23:43Z

1

Since you only want to add a string per click, you should not need a loop. Instead add content to the existing content using either innerHTML += ..., or better: use DOM methods to add a text node to the DOM.

Here is how that could look:

function addToResult() {
    var x = document.getElementById("myTextarea").value;
    var y = document.getElementById("mySelect").value;
    var z = document.getElementById("mySelect2").value;
    var r = x + " - " + y + " - " + z;
    var result = document.getElementById("result");
    result.appendChild(document.createTextNode(r));
    result.appendChild(document.createElement("br"));
}
var addButton = document.getElementById("add");
addButton.addEventListener("click", addToResult);

<textarea id="myTextarea"></textarea><br>
<select id="mySelect">
    <option>choice 1</option>
    <option>choice 2</option>
</select>
<select id="mySelect2">
    <option>choice A</option>
    <option>choice B</option>
</select><br>

<button id="add">Add</button>

<p id="result"></p>

answered Jun 17, 2017 at 7:23

trincot

357k38 gold badges282 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jsprogrammer Over a year ago

Thank you very much!!! It works excellent! And something else... if i want to choose some of these registers which are shown in the 2nd tab (for example by ticking them using checkbox), so as to delete them, is it possible? What i need ?

trincot Over a year ago

Yes, it is possible, but then you should really try first, creating the checkboxes with document.createElement('input');, then setting the type attribute to checkbox, with setAttribute, then binding a click handler to it, with addEventListener("click", ...), and finally deleting that element again with elem.removeChild(...). Look up those methods and try first. If you really get stuck, ask a new question with the particular problem.

Yury Tarabanko · Accepted Answer · 2017-06-17 07:40:34Z

You could use insertAdjacentHTML method to add more content.

function $(selector) {
  return document.querySelector(selector)
}

function addToResult() {
    var x = $("#myTextarea").value;
    var y = $("#mySelect").value;
    var z = $("#mySelect2").value;
    var r = x + " - " + y + " - " + z;
    
    $("#result").insertAdjacentHTML('beforeend', r)
}
var addButton = document.getElementById("add");
addButton.addEventListener("click", addToResult);

<textarea id="myTextarea"></textarea><br>
<select id="mySelect">
    <option>choice 1</option>
    <option>choice 2</option>
</select>
<select id="mySelect2">
    <option>choice A</option>
    <option>choice B</option>
</select><br>

<button id="add">Add</button>

<p id="result"></p>

Collectives™ on Stack Overflow

Loop for document.getElementById in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related