如何使用 JavaScript 和 html 正确编程按钮（非常初学者）[关闭]

【问题标题】：How to properly program a button with JavaScript and html (very beginner) [closed]如何使用 JavaScript 和 html 正确编程按钮（非常初学者）[关闭]
【发布时间】：2021-09-02 20:43:14
【问题描述】：

我一直在尝试使用 Javascript 和 HTML 编写一个非常简单的按钮，但即使在尝试遵循教程之后它也无法正常工作。我不确定我的代码中有什么错误以及为什么它不起作用。这是我的代码的一些希望有用的图像 Javascript Image HTML image

【问题讨论】：

问题是，代码图像没有有用。请参阅How to Ask。
但答案是您的属性选择器中有多余的空格。它（大概）在 HTML 中看起来不像，所以它不应该在 JavaScript 中。
您应该在按钮之后加载脚本。你现在在哪里找不到按钮，因为它还没有被解析。
@trincot，脚本上的defer 属性应该可以解决这个问题。
我什至没有看到 button.js 正在加载。

标签： javascript html button

【解决方案1】：

下次请发布您的代码，它会容易得多。

button.js 中querySelector() 的属性中有一些额外的空格。

第 1 行应该是这样的：

let button = document.querySelector('[data-button]');

您还必须在 index.html 中引用您的脚本。在index.html 屏幕截图的第 8 行中，您必须写 button.js 而不是 script.js。

 <script src="button.js" defer></script>

完整的代码应如下所示：

index.html：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="button.js" defer></script>
    <title>Button</title>
</head>

<body>
    <button data-button>button</button>
</body>

</html>

button.js:

let button = document.querySelector('[data-button]');

button.addEventListener('click', function(){
    alert("button clicked");
});

【讨论】：