时间戳

首页 > 解决方案 > Javascript 通过 getElementbyId 访问动态创建的元素

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

问题描述

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

我在创建选项 id 时打印了它们（似乎打印没有问题），并通过 appendChild 将它们添加到 DOM。但是，使用我的第二个函数，尽管明确引用了 id，但我无法检索选项的选定值。

我的猜测是它与加载脚本的顺序有关。谁能帮我理解发生了什么？

附件是我的 JSFiddle 文件， http://jsfiddle.net/c8h6gx2d/1/

干杯，

标签： javascripthtmldynamic

解决方案

问题是<option>s 嵌套在<select>s 中，而 * <select>*s 有一个selectedIndex属性。所以，当是一个元素test.options[test.selectedIndex].value时不起作用。尝试使用来获取其中一个，然后访问它（这比检查更麻烦）：test<option>getElementById<select>.valueselectedIndex

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>

另请注意，单个文档中的重复 ID 是无效的 HTML，因此如果您maker多次调用，为了使您的 HTML 有效，您可能有一个单独的计数器，该计数器maker会增加：

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

（或者，如果可能的话，完全避免使用 ID，数字 ID 指示是代码异味 - 改用类）

推荐阅读