Javascript通过getElementbyId访问动态创建的元素

Question

I'm playing around with Javascript as a hobby and I've been having trouble accessing elements that I have dynamically created via another function.

Essentially, I have a link that dynamically creates a couple of dropdown selects with a few options. Then I have a second link which I would try to print some of the selected options onto console.

HTML:

<a href="#" id="make" onclick="maker()">create</a>
<a href="#" id="get" onclick="getter()">collect</a>
<div id="box"><br>

Javascript:

function maker() {
    box.appendChild(document.createElement("br"));
    for (i = 0; i < 2; i++) {
      box.appendChild(document.createTextNode("test " + (i + 1) + " "));
      for (k = 0; k < 2; k++) {
        var dropdown = document.createElement("select");
        box.appendChild(dropdown);
        for (j = 0; j < nice.length; j++) {
          var option = document.createElement("option");
          option.value = nice[j];
          option.text = nice[j];
          option.id = 'option' + i + k;
          console.log(option.id)
          dropdown.appendChild(option);
        }
      }
      box.appendChild(document.createElement("br"));
    }
}

function getter() {
  var test = document.getElementById("option01");
  console.log(test.options[test.selectedIndex].value);
}

I've printed to console the option id's as they are created (seems to have no problem printing this), and added them to the DOM via appendChild. However with my second function, I am unable to retrieve the selected value of the options despite explicitly referencing the id.

My guess is that it has something to do with the order the scripts are loaded. Can anyone help me understand what's going on?

Attached is my JSFiddle file, http://jsfiddle.net/c8h6gx2d/1/

Cheers,

Answer 1

The problem is that <option> s are nested inside of <select> s, and it's the * <select> *s which have a selectedIndex property. So, test.options[test.selectedIndex].value won't work when test is an <option> element. Try using getElementById to get one of the <select> s, for one, and then just access its .value (which is less cumbersome than checking selectedIndex ):

 var nice = [2, 3, 5]; function maker() { box.appendChild(document.createElement("br")); for (i = 0; i < 2; i++) { box.appendChild(document.createTextNode("test " + (i + 1) + " ")); for (k = 0; k < 2; k++) { var dropdown = document.createElement("select"); dropdown.id = 'select' + i; box.appendChild(dropdown); for (j = 0; j < nice.length; j++) { var option = document.createElement("option"); option.value = nice[j]; option.text = nice[j]; dropdown.appendChild(option); } } box.appendChild(document.createElement("br")); } } function getter() { var test = document.getElementById("select0"); console.log(test.value); // same as: // console.log(test.options[test.selectedIndex].value); } 

 <a href="#" id="make" onclick="maker()">create</a> <a href="#" id="get" onclick="getter()">collect</a> <div id="box"><br> 

Also note that duplicate IDs in a single document is invalid HTML , so if you ever call maker more than once, for your HTML to be valid, you might have a separate counter outside of maker that gets incremented:

const makeCount = 0;
function maker() {
  // ...
      dropdown.id = 'select' + makeCount + '_' + i;
  // ...
  makeCount++;
}

(or, avoid IDs entirely, if at all possible, numeric ID indicies are a code smell - use classes instead)

Answer 2

We need to discriminate between option elements and the select element. The select element is the one with which you want to interact most of the time, and the option elements are simply a collection of possible entries for the select element.

Your code as it stands now generates these sort of elements:

<select>
    <option value="2" id="option00">2</option>
    <option value="3" id="option00">3</option>
    <option value="5" id="option00">5</option>
</select>

As you see all the options receive the same ID - which is generally forbidden in HTML documents. You might consider moving the ID indicator to the select element, which also gives you access to the value of the selected option.

Here is the revised JS code with comments before revisions:

var nice = [2, 3, 5];

  function maker() {
    box.appendChild(document.createElement("br"));
    for (i = 0; i < 2; i++) {
      box.appendChild(document.createTextNode("test " + (i + 1) + " "));
      for (k = 0; k < 2; k++) {
        var dropdown = document.createElement("select");
        # Giving the select item an ID instead of each option
        dropdown.id = 'select' + i + k;
        box.appendChild(dropdown);
        for (j = 0; j < nice.length; j++) {
          var option = document.createElement("option");
          option.value = nice[j];
          option.text = nice[j];
          option.id = 'option'
          console.log(option.id)
          dropdown.appendChild(option);
        }
      }
      box.appendChild(document.createElement("br"));
    }
  }

  function getter() {
    # Getting the select element instead of the option 
    var selectElement = document.getElementById("select00");

    # The value attribute of the select element is the value of the selected option
    console.log(selectElement.value);
  }