本地复制MDN的JavaScript代码无法运行，在线演示正常求问题原因

我帮你排查了下，本地副本不能工作主要有两个关键问题，咱们一个个解决：

1. 函数名大小写不匹配（最核心的错误） #

JavaScript是大小写敏感的语言，你定义的函数是CreateParagraph（首字母大写），但在事件监听里却写了createParagraph（全小写），浏览器找不到这个函数，自然不会执行。

修正后的JavaScript代码：

function createParagraph() { 
  var para = document.createElement('p'); 
  para.textContent = 'You clicked the button!'; 
  document.body.appendChild(para); 
  var buttons = document.querySelectorAll('button'); 
  for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener('click', createParagraph); 
  } 
}
// 别忘了给初始按钮绑定事件
document.querySelector('button').addEventListener('click', createParagraph);

2. 脚本加载时机问题 #

如果你的脚本放在<head>标签里，浏览器会在DOM元素（比如那个<button>）加载前执行代码，这时候querySelectorAll('button')会返回空数组，绑定事件就会失效。

解决方法二选一：

• 把<script>标签放在HTML的<body>末尾，确保DOM元素都加载完成后再执行脚本
• 用DOM加载完成的事件包裹代码，示例：

document.addEventListener('DOMContentLoaded', function() {
  function createParagraph() { 
    var para = document.createElement('p'); 
    para.textContent = 'You clicked the button!'; 
    document.body.appendChild(para); 
    var buttons = document.querySelectorAll('button'); 
    for (var i = 0; i < buttons.length; i++) { 
      buttons[i].addEventListener('click', createParagraph); 
    } 
  }
  document.querySelector('button').addEventListener('click', createParagraph);
});

完整的可运行本地代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Button Click Demo</title>
</head>
<body>
  <button>Click me</button>

  <script>
    function createParagraph() { 
      var para = document.createElement('p'); 
      para.textContent = 'You clicked the button!'; 
      document.body.appendChild(para); 
      var buttons = document.querySelectorAll('button'); 
      for (var i = 0; i < buttons.length; i++) { 
        buttons[i].addEventListener('click', createParagraph); 
      } 
    }
    document.querySelector('button').addEventListener('click', createParagraph);
  </script>
</body>
</html>

把上面的代码保存为.html文件，本地打开就能正常运行啦。

内容的提问来源于stack exchange，提问作者sindhugauri