如果单击该按钮，它应该已经显示，但是没有显示。
这里有什么问题吗？
我已经以此方式编写了许多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>
感谢大家！
.querySelector()Document方法querySelector（）返回文档中与指定选择器匹配的第一个Element。[...]选择器是CSS选择器字符串。
因此，您应该输入以下代码：
document.querySelector(".debug")
您还可以通过其标签选择HTML元素，例如，要选择第一个元素div：
document.querySelector("div")
document.querySelector("div").style.color = "lightgreen"<div>Hello World</div>假设您有自己的HTML标签：<hello>，那么您可以使用以下命令选择所有hello元素：
document.querySelector("hello")
document.querySelector("hello").style.color = "lightblue"
<hello>Hello World</hello>
同样在HTML中用于内联事件侦听器，而不是：
<button class = "show" onclick = "JavaScript : show();">Show</button>
您可以简单地写：
<button class = "show" onclick = "show();">Show</button>
建议使用JavaScript来初始化这些eventListener，而不是将其内联在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文件：
<link rel="stylesheet" type="text/css" href="style.css">
和
<script src="script.js"></script>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句