Question

我正在尝试编写一个带有两个值的小脚本。一个是名称，另一个是密码。这是代码：

＆＃13;

<textarea id="addName">Add a name</textarea>
<textarea id="addPass">Add a hashed password</textarea>
<button id="submit">
  Submit user
</button>
<ul>
  <li>Name: Nicolas
    <br>Password (hashed): aslkdjf1231lk1jlkj5l4k5j64
  </li>
</ul>
<script>
  document.getElementById("submit").onclick = function addUser() {
    var NAME = document.getElementById("addName");
    var PASS = document.getElementById("addPass");

    var unOrd = document.getElementById("ul");
    var newLi = document.createElement("li");
    unOrd.appendChild("newLi");

    var newText = document.createTextNode("Name: " + NAME.value + " Password (hashed): " + PASS.value);
    newLi.appendChild("newText");
  };
</script>

＆＃13;

我认为，通过将JS放在HTML的末尾，它将在页面加载后执行并且它将解决问题，但它仍然会返回：＆＃34;无法读取属性＆＃ 39;使用appendChild＆＃39; of null＆＃34;。

Answer 1

ul不是id，而是列表元素的标记名称。你可以这样得到它：

var unOrd = document.getElementsByTagName("ul")[0];

Answer 2

您为appendChild添加了一个字符串而不是实际元素，并且您没有id为ul的元素尝试：

<textarea id="addName">Add a name</textarea>
<textarea id="addPass">Add a hashed password</textarea>
<button id="submit">
  Submit user
</button>
<ul id="someId">
  <li>Name: Nicolas
    <br>Password (hashed): aslkdjf1231lk1jlkj5l4k5j64
  </li>
</ul>
<script>
  document.getElementById("submit").onclick = function addUser() {
    var NAME = document.getElementById("addName");
    var PASS = document.getElementById("addPass");

    var unOrd = document.getElementById("someId");
    var newLi = document.createElement("li");
    unOrd.appendChild(newLi);

    var newText = document.createTextNode("Name: " + NAME.value + " Password (hashed): " + PASS.value);
    newLi.appendChild(newText);
  };
</script>

＆＃39;无法阅读appendChild的财产＆＃39;尝试将元素添加到列表

2 个答案: