使用id变量访问JavaScript DOM元素返回undefined如何解决

• 核心错误为jQuery选择器语法使用不当：原代码$("#IDs[1]")会直接将IDs[1]作为静态id字符串匹配页面元素，而非读取IDs数组下标为1的元素值作为id查找，页面不存在id为IDs[1]的输入框，因此返回undefined。

将选择器修改为动态拼接变量的形式即可，修改对应代码行：

// 原错误代码
// document.write($("#IDs[1]").val(), "</br>");
// 替换为以下写法
document.write($("#" + IDs[1]).val(), "</br>");
// ES6+ 环境也可以用模板字符串写法
// document.write($(`#${IDs[1]}`).val(), "</br>");

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<table>
  <script>
    const IDs = ["Cell_1", "Cell_2"];
    document.write("<tr><td><input type='text' value='", IDs[0], "' class='qty' id='", IDs[0], "' name='A' ></td>");
    document.write("<td><input type='text' value='10' id='BB' name='B' ></td>");
    document.write("<td><input type='text' value='10' id='", IDs[1], "' name='B' ></td></tr>");
    document.write("<tr><td>");
    document.write("ID_1: ", IDs[0], "</br>");
    document.write($("#BB").val(), "</br>");
    document.write($("#" + IDs[1]).val(), "</br>");
    document.write("ID_2: ", IDs[1]);
    document.write("</td></tr>");
  </script>
</table>

内容的提问来源于stack exchange，提问作者Peter Kogut