按钮在chrome/safari中没有响应onclick，但在堆栈溢出的代码片段上工作，为什么

我有一个小函数displayMessage，当点击按钮时，应该会出现一个div框。

我在chrome和safari上都试过了，除非我在displayMessage后面加括号，否则框不会出现，这应该是不必要的。

然而，弹出框出现在这个堆栈溢出的代码片段中。

chrome中发生了什么，为什么代码在这个网站上运行？？？

此外，这也是chrome开发工具控制台中出现的内容：Uncaught TypeError:无法设置null的属性"onclick"在script.js:4

其中btn.onclick=displayMessage；js:4

//js
var btn = document.querySelector('button');
btn.onclick = displayMessage;
function displayMessage() {
var html = document.querySelector('html');
var panel = document.createElement('div');
panel.setAttribute('class', 'msgBox');
html.appendChild(panel);
var msg = document.createElement('p');
msg.textContent = 'This is a message box';
panel.appendChild(msg);
var closeBtn = document.createElement('button');
closeBtn.textContent = 'x';
panel.appendChild(closeBtn);
closeBtn.onclick = function() {
panel.parentNode.removeChild(panel);
}
}

.msgBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
background: #eee;
}
.msgBox p {
line-height: 1.5;
padding: 10px 20px;
color: #333;
}
.msgBox button {
background: none;
border: none;
position: absolute;
top: 0;
right: 0;
font-size: 1.1rem;
color: #aaa;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Message Box</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button>Display message box</button>
</body>
</html>

<script>标记应该位于body容器的底部，或者我们需要在querying the DOM之前侦听DOMContentLoaded事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Message Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button>Display message box</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

或

document.addEventListener("DOMContentLoaded", function(event) {
var btn = document.querySelector('button');
btn.onclick = displayMessage;
});

注意侦听器，查找DOM Ready事件。

//js
document.addEventListener("DOMContentLoaded", () => {
var btn = document.querySelector('button');
btn.onclick = displayMessage;
});
function displayMessage() {
var html = document.querySelector('html');
var panel = document.createElement('div');
panel.setAttribute('class', 'msgBox');
html.appendChild(panel);
var msg = document.createElement('p');
msg.textContent = 'This is a message box';
panel.appendChild(msg);
var closeBtn = document.createElement('button');
closeBtn.textContent = 'x';
panel.appendChild(closeBtn);
closeBtn.onclick = function() {
panel.parentNode.removeChild(panel);
}
}

.msgBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
background: #eee;
}
.msgBox p {
line-height: 1.5;
padding: 10px 20px;
color: #333;
}
.msgBox button {
background: none;
border: none;
position: absolute;
top: 0;
right: 0;
font-size: 1.1rem;
color: #aaa;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Message Box</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button>Display message box</button>
</body>
</html>

相关内容

最新更新

热门标签：