Question

我尝试使用Javascript在我的网页中创建一个可点击按钮，首先我正在编写index.html（html，css，javascript all）然后它工作正常。这是我的第一个代码：

  <!DOCTYPE html>
   <html>
  <head>
    <title>LearnVariable</title>
   <link rel="stylesheet" type="text/css" href="style.css">
  </head>
<body>
    <button>PressMe</button>
    <script>
        var button = document.querySelector('button');
        button.onclick = function(){
            var name = prompt('What is your Name');
        }
    </script>
 </body>
 </html>

然后我尝试用不同的文件名 script.js 编写我的javascript代码，并将此文件与head部分链接，并从body部分剪切我的脚本部分。然后发生错误说 TypeError：按钮为空。这是我的 index.html 代码：

 <!DOCTYPE html>
 <html>
  <head>
    <title>LearnVariable</title>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <button>PressMe</button>
  </body>
 </html>

这是我的 script.js 代码：

var button = document.querySelector('button');
button.onclick = function(){
var name = prompt('What is your Name');
}

我试图自己找到这个bug并搜索互联网，然后他们说使用console.log（按钮）来找出错误，但我还没有找到解决方法。

Answer 1

问题是您在初始化文档之前调用代码。要解决此问题，只需将脚本放在页面底部：

<!DOCTYPE html>
<html>
    <head>
    <title>LearnVariable</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button>PressMe</button>
    <script src="script.js"></script> <!-- the script is here instead -->
</body>
</html>

编辑，如@ Brianbcr666Ray所说，建议在加载文档时加载脚本。例如，以下内容可以是您的script.js：

window.onload = function() {
    console.log("Do stuff here");
}

为什么变量在外部script.js文件中返回NULL值？

1 个答案: