Question

所以我正在关注firefox（https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics）的javascript演示，我几乎复制并粘贴了网站上的最后一个演示。

的index.html：

<html>
<head>

    <h1>Hello there</h1>

</head>
<body>
<button>Change user</button>
<script src = "app.js"></script>

</body>
</html>

和app.js：

var myButton = document.querySelector('button');

var myHeading = document.querySelector('h1');

function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.textContent = 'Mozilla is cool, ' + myName;
}

if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.textContent = 'Mozilla is cool, ' + storedName;
}

myButton.onclick = function() {
setUserName();
}

我点击网页上的按钮，但没有任何反应......有什么建议吗？

Answer 1

我怀疑这是因为你的JavaScript元素选择，因此按钮事件绑定在DOM加载之前正在执行。

您可以使用：

document.addEventListener("DOMContentLoaded", function(event) { 
  // add all the JS here so that the DOM is loaded when you 
  // run your selector.
});

或者如果您打算使用jQuery，可以使用$(document).ready()函数

onClick不会在非内联的JavaScript中工作

1 个答案: