关于`.querySelector()`

Question

如果你点击按钮，它应该显示，但它没有。

这里有什么不对吗？

我以这种方式编写了许多JavaScript文件，并尝试了很多方法，例如在任何地方更改JavaScript代码的位置。但我写的所有文件都不起作用

提前致谢！

一个实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Debug</title>
</head>
<style>
    .debug {
         display : none;
    }
</style>
<body>
<div class = "debug">
    <p>Welcome!</p>
</div>
<button class = "show" onclick = "JavaScript : show();">Show</button>
<script type = "text/JavaScript">
    function show() {
        document.querySelector("debug").style.display = "flex";
    }
</script>
</body>
</html>

感谢大家！

Answer 1

关于`.querySelector()`

Document方法querySelector（）返回文档中与指定选择器匹配的第一个Element。 [...] 选择器是一个CSS选择器字符串。

- MDN web docs

因此，您应该输入您的代码：

document.querySelector(".debug")

您还可以按标签选择HTML元素，例如，您要选择第一个div：
```
document.querySelector("div")
```
＆＃13;
＆＃13;
```
document.querySelector("div").style.color = "lightgreen"
```
＆＃13;
```
<div>Hello World</div>
```
＆＃13;
＆＃13;
＆＃13;
想象一下，您有自己的HTML标记：<hello>，然后您可以选择所有hello元素：
```
document.querySelector("hello")
```
＆＃13;
＆＃13;
```
document.querySelector("hello").style.color = "lightblue"

  
```
＆＃13;
```
<hello>Hello World</hello>

  
```
＆＃13;
＆＃13;
＆＃13;

关于内联eventListeners的附注

在内联事件监听器的HTML中，而不是：

<button class = "show" onclick = "JavaScript : show();">Show</button>

你可以简单地写一下：

<button class = "show" onclick = "show();">Show</button>

建议使用JavaScript来启动这些eventListeners，而不是让它们内嵌在HTML标记中。使用.addEventListener()方法：

document.querySelector(".show").addEventListener('click', show)
                                                    ↑      ↑
                                                  event  function
                                                  type

返回您的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Debug</title>
</head>
<style>
    .debug {
        display : none;
    }
</style>
<body>
<div class = "debug">
    <p>Welcome!</p>
</div>
<button class ="show">Show</button>
<script type = "text/JavaScript">
    document.querySelector(".show").addEventListener("click", show)
    function show() {
        document.querySelector(".debug").style.display = "flex";
    }
</script>
</body>
</html>

最后一件事

将HTML，JavaScript和CSS全部保存在单独的文件中也更好，例如：

- index.html
- style.css
- script.js

使用link（最好在<head>内）和script（位于<body>底部）标记调用HTML文件中的CSS和JavaScript文件：< / p>

<link rel="stylesheet" type="text/css" href="style.css">

和

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

Answer 2

对于班级选择器，您需要添加点（。），例如.debug

此外，在HTML中，您只需点击onclick="show();"

即可

＆＃13;

function show() {
  document.querySelector(".debug").style.display = "flex";
}

＆＃13;

.debug {
  display: none;
}

＆＃13;

<div class="debug">
  <p>Welcome!</p>
</div>
<button class="show" onclick="show();">Show</button>

＆＃13;

Answer 3

对于类和ID选择器，

queryselectors需要.和#：

querySelector(".debug")

Answer 4

您没有将类传递给querySelector。设置".debug"而不是"debug"。

以下是工作代码：

＆＃13;

function show() {
  document.querySelector(".debug").style.display = "flex";
}

＆＃13;

.debug {
  display: none;
}

＆＃13;

<div class="debug">
  <p>Welcome!</p>
</div>
<button class="show" onclick="JavaScript : show();">Show</button>

＆＃13;

为什么JavaScript功能不起作用？

4 个答案:

关于`.querySelector()`

关于内联eventListeners的附注

返回您的代码：

最后一件事

为什么JavaScript功能不起作用？

4 个答案:

关于.querySelector()

关于内联eventListeners的附注

返回您的代码：

最后一件事

关于`.querySelector()`