Javascript доступ к динамически созданному элементу через getElementbyId

Question

Я играю с Javascript в качестве хобби, и у меня возникают проблемы с доступом к элементам, которые я динамически создал с помощью другой функции.

По сути, у меня есть ссылка, которая динамически создает пару выпадающихвыбирает с несколькими вариантами.Затем у меня есть вторая ссылка, по которой я бы попытался распечатать некоторые выбранные параметры на консоли

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);
}

Я напечатал в консоли идентификаторы параметров по мере их создания (кажется, нет проблем с печатью этого)и добавил их в DOM через appendChild.Однако, с моей второй функцией, я не могу получить выбранное значение параметров, несмотря на явную ссылку на идентификатор.

Я предполагаю, что это как-то связано с порядком загрузки скриптов.Может кто-нибудь помочь мне понять, что происходит?

В приложении находится мой файл JSFiddle, http://jsfiddle.net/c8h6gx2d/1/

Приветствия,

Answer 1

Нам нужно различать элементы option и элемент select .Элемент select - это тот, с которым вы хотите взаимодействовать большую часть времени, а элементы option - это просто набор возможных записей для элемента select.

Ваш код в его нынешнем виде генерирует элементы такого типа:

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

Как видите, все параметры получают одинаковый идентификатор - который обычно запрещен в документах HTML.Возможно, вы захотите переместить индикатор ID в элемент select, который также дает вам доступ к значению выбранной опции.

Вот пересмотренный код JS с комментариями перед ревизиями:

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);
  }

Answer 2

Проблема в том, что <option> s вложены в <select> s, а *<select>* s имеют свойство selectedIndex.Таким образом, test.options[test.selectedIndex].value не будет работать, когда test является элементом <option>.Попробуйте использовать getElementById, чтобы получить один из <select> с, а затем просто получить доступ к .value (что менее громоздко, чем проверка 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>

Также обратите внимание, что повторяющиеся идентификаторы в одном документе недопустимый HTML , поэтому, если вы когда-либо позвоните maker более одного раза, длячтобы ваш HTML был действительным, у вас может быть отдельный счетчик за пределами из maker, который увеличивается:

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

(или полностью избегать идентификаторов, если это вообще возможно, числовых идентификаторов)признаки являются запахом кода - используйте классы вместо этого