Question

我是Java语言的初学者。我正在做一些练习，遇到上面列出的“ onclick”错误。

我在此论坛上查看了其他问题，但对我没有帮助。我在html和JS中都检查了语法多次，找不到任何东西！

var item1;
var item2;
var item3;

document.getElementById("changeList").onclick = newList;

function newList() {
  item1 = prompt("Enter a new first thing:");
  item2 = prompt("Enter a new second thing:");
  item3 = prompt("Enter a new third thing:");
  updateList();
}

function updateList() {
  document.getElementById("firstThing").innerHTML = item1;
  document.getElementById("secondThing").innerHTML = item2;
  document.getElementById("thirdThing").innerHTML = item3;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>Javascript Practice</title>
  <script src="main.js"></script>
</head>

<body>
  <h1 id="myName">Angie</h1>
  <hr>
  <p id="aboutMe"><em>I am trying to learn this damn javascript and stick with it.</em></p>
  <h2>Things I like</h2>
  <p>Here are some of the things I like to do:</p>
  <ul>
    <li id=firstThing>Dance</li>
    <li id=secondThing>Write</li>
    <li id=thirdThing>Travel</li>
  </ul>
  <button id="changeList" type="button">Change Your List</button>
</body>

</html>

Answer 1

您可以尝试按照lealceldeiro的建议将脚本标签放置在页面底部，也可以等待DOM完全加载后再为onclick添加事件侦听器，如下所示：

//Replace this line
document.getElementById("changeList").onclick = newList;

//With the following, this fires an event when the DOM has fully loaded
//This will ensure your element has been rendered into the DOM
document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById("changeList").onclick = newList;
});

Answer 2

尝试将您的html行更改为：

<button id="changeList" type="button" onclick = newList();>Change Your List</button>

并从您的JS中删除此行

document.getElementById("changeList").onclick = newList;

获取“无法设置属性'onclick'错误”

2 个答案: