Метод Document querySelector () возвращает первый элемент в документе, который соответствует указанному селектору.[...] Селектором является строка селектора CSS .
- MDN Web Docs
Поэтому вы должны поставитьв вашем коде:
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 для запуска этих 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
и вызывать файлы CSS и JavaScript в вашем HTML-файле с помощью link (желательно внутри <head>) и script (внизу <body>) тегов:
<link rel="stylesheet" type="text/css" href="style.css">
И
<script src="script.js"></script>