Question

这是index.html

<html>
  <head>
  <script language="javascript" type="text/javascript" src="add.js"></script>
  <script language="javascript" type="text/javascript" src="get.js"></script>
  </head>
  <body>
    <div id="list">
      <form id="programs" name="programs">
      </form>
      <input type="button" value="add" onClick="add();" />
      <input type="button" value="delete" onClick="get();" />
    </div>
  </body>
</html>

这是add.js

var program_number = 0;

function add()
{
  var program_name = "program_sample";

  var formID = document.getElementById("programs");
  var labelTag = document.createElement("label");
  var inputTag = document.createElement("input");

  var txtNode = document.createTextNode("program " + program_number);
  var brTag = document.createElement("br");

  // set input attribute
  inputTag.setAttribute("type", "checkbox");
  inputTag.setAttribute("name", program_name);
  inputTag.setAttribute("value", "program" + program_number);

  // set label attribute
  labelTag.setAttribute("id", "program_label" + program_number);

  labelTag.appendChild(inputTag);
  labelTag.appendChild(txtNode);
  labelTag.appendChild(brTag);

  formID.appendChild(labelTag);

  program_number++;
}

这是get.js

function get()
{
  var programs = document.programs;

  for(var i = 0; i < programs.length; i++)
    console.log(programs[i].id);
}

您好，我想动态获取标签的ID。 add.js代码使它成为现实。（下同）

<label id="program_label0>
    <input type="checkbox" name="program_sample" value="program0" />
    program 0<\br>
</label>

如果那些正常运行，结果可能是“program_label1”，“program_label2”，“program_label3”......

但是get.js的结果只是一个空白。我应该怎么做才能获得标签的ID？或者我的代码错了..？

Answer 1

在你的＆＃39; get.js＆＃39;你可以试试

var programs = document.getElementById("programs");

或

var programs = document.forms["programs"];

或

var programs = document.forms[0];

只有当您引用的表单仅在DOM树中首先显示时，最后一个才有效。

Answer 2

我看到一些问题：

开头html中的输入位于表单之外...（请参阅w3schools form basics）
您应该使用 inputTage.type =＆＃34;而不是 inputTag.setAttribute（＆＃34; type＆＃34;，＆＃34; checkbox＆＃34;）; 。复选框＆＃34;

没有 documents.programs 这样的东西。要访问您的程序DOM元素，请执行add.js和 document.getElementById（＆＃34; program＆＃34;）;

你似乎并不清楚基础是如何运作的。 - var formID = document.getElementById（＆＃34; programs＆＃34;）; 不会返回一个formID ...将返回一个DOM元素。请阅读更多基础教程。从 - w3schools
开始

Answer 3

首先：为什么使用setAttribute而不是设置属性？

第二

var programs = document.getElementById("programs");

您很可能意味着访问代码中的window.programs，只有在您加载页面时该元素才能在文档中使用。

当您创建元素并将其添加到DOM时，它不会使用新的属性名称更新全局对象（此处称为window）。

Answer 4

您应该使用`document.programs.elements [i]访问表单元素。所以你错过了“元素”，它是表单元素的集合。

如何获得标签的ID？

4 个答案: