Question

我有一个小函数displayMessage，当单击按钮时，应该显示一个div框。

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

但是，弹出框出现在堆栈溢出的代码段中。

chrome发生了什么，为什么代码在此站点上起作用？

这也是chrome开发者工具的控制台中显示的内容：未捕获的TypeError：无法将属性'onclick'设置为null 在script.js：4

其中btn.onclick = displayMessage;是script.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>

Answer 1

<script>标签应位于body容器的底部，否则我们需要在DOMContentLoaded之前监听querying the DOM事件。

<!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;
});

Answer 2

注意侦听器，查找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>

按钮无法响应chrome /苹果浏览器中的onclick，但在堆栈溢出时可用于代码段，为什么？

2 个答案: