javascript appear a thing with specific id using appendChild

Question

I don't know how to explain it, I don't want it to be unclear, so first thing first, I want to show this HTML code :

<body>
  <form class="" action="index.html" method="post">
    <input type="num" onkeyup="addOptions()" name="member" id="member">
    <div id="selects">

    </div>
  </form>
</body>

And this is the javascript code :

<script type="text/javascript">

function addOptions() {
  document.getElementById('selects').innerHTML = "";
  var inputValue = document.getElementById('member').value;
  for (var i = 0; i < inputValue; i++) {
    var select = document.createElement('select');
    var option = document.createElement('option');
    option.innerText = "Example";

    select.appendChild(option);
    document.getElementById('selects').appendChild(select);
  }
}
</script>

So, groove of this code will be if I type num in input num, the select will be appear as many as I type the num. But, it just will run the select option. So, my question is can I appear that the option is in HTML code? So when I type the num in the textfield, I will appear something like this for example :

<option value="example" id="example">example</option>

So the option code will be running as many as the num, like when I type 3 in the textfield, I will get 3 code like in above.

Mamun · Accepted Answer · 2018-05-17T14:38:29.930

If I got it right, there are some issues in your code. I believe you are trying to achieve a drop down using select.

Inside for loop you creating select in each iteration which I think you don't want. To make value, id avilable to the newly created option you have to set those properties to the option.

Try the following:

function addOptions() {
  document.getElementById('selects').innerHTML = "";
  var select = document.createElement('select');
  var inputValue = Number(document.getElementById('member').value);
  for (var i = 0; i < inputValue; i++) {
    var option = document.createElement('option');
    option.innerText = "Example" + i;
    option.value = "example" + i;
    option.id = "example" + i;
    select.append(option);
  }
  if(select.innerHTML) // if at least one option then append select
    document.getElementById('selects').appendChild(select);
}

<input type="num" oninput="addOptions()" name="member" id="member"><br><br>
<div id="selects">

</div>

I thought this was what they were asking for but couldn't be sure lol — Scath, May 17 '18 at 13:53
@Scath, even at first I was not sure. Then looking at OP's code, I thought he might be after this finally......thanks.. — Mamun, May 17 '18 at 13:55

seethrough · Answer 2 · 2018-05-17T14:14:56.147

0

Just move some lines out of your for loop, as following:

function addOptions() {
  document.getElementById('selects').innerHTML = "";
  var inputValue = document.getElementById('member').value;
  var select = document.createElement('select');
  for (var i = 0; i < inputValue; i++) {
    var option = document.createElement('option');
    option.innerText = "Example "+i;
    select.appendChild(option);
  }
  document.getElementById('selects').appendChild(select);
}

<form class="" action="index.html" method="post">
  <input type="num" onkeyup="addOptions()" name="member" id="member">
  <div id="selects">

  </div>
</form>

edited May 17 '18 at 14:14

answered May 17 '18 at 13:58

seethrough

712
4
15

Hmm... Maybe I said it with unclear. I don't want to loop the value of an option, but I want to add as many as the num. Like there are 2 options element in the web, so the user can select 2 times – Louise Kaithlyn May 17 '18 at 14:04
@LouiseKaithlyn what is the difference between my answer and the one you have chosen? A bit funny though, because I could not really understand you anyway. – seethrough May 17 '18 at 14:09

javascript appear a thing with specific id using appendChild

2 Answers2