Я знаю, что будет глупая ошибка. Но сможете ли вы найти его? Я только начинаю. Итак, спасибо, если вы мне поможете!
Дайте мне знать, что вызывает ошибку в этом коде. Я просто хочу скрыть/показать некоторые элементы при нажатии с помощью javacript, а не как <button onclick=....
<!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">
<title>Document</title>
</head>
<body>
<a href = "#"><h1 class = "et_pb_tab_0">Tab 1</h1></body></a>
<a href = "#"><h1 class = "et_pb_tab_1">Tab 2</h1></a>
<div class = "month">month</div>
<div class = "year">year</div>
<script>
const active = document.getElementsByClassName("et_pb_tab_0");
const deactive = document.getElementsByClassName("et_pb_tab_1");
const year = document.getElementsByClassName("year");
const month = document.getElementsByClassName("month");
active.onClick = () => {
month.style.display = "block";
year.style.display = "none";
};
deactive.onClick = ()=> {
year.style.display = "block";
month.style.display = "none";
};
</script>
<style>
.month{
display: block;
}
.year{
display: none;
}
</style>
</body>
</html>
Вторая проблема - FAQ: stackoverflow.com/questions/10693845/…
Третья проблема — еще одна опечатка: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… (JavaScript чувствителен к регистру), но вам, вероятно, все равно следует использовать developer.mozilla.org/en-US/docs/Web/API/EventTarget/….
есть </body> после первого </h1>
Как это связано с reactjs
? Пожалуйста, пометьте соответствующим образом. (Тег удален.)
getElementsByClassName возвращает NodeList, своего рода массив, не являющийся массивом.
Что вы можете сделать, так это использовать документ.querySelector, чтобы получить нужный класс. Вам нужно будет использовать селектор css в качестве аргумента для него.
Также для прослушивания событий используйте addEventListener.
<!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">
<title>Document</title>
</head>
<body>
<a href = "#"><h1 class = "et_pb_tab_0">Tab 1</h1></body></a>
<a href = "#"><h1 class = "et_pb_tab_1">Tab 2</h1></a>
<div class = "month">month</div>
<div class = "year">year</div>
<script>
const active = document.querySelector(".et_pb_tab_0");
const deactive = document.querySelector(".et_pb_tab_1");
const year = document.querySelector(".year");
const month = document.querySelector(".month");
active.addEventListener('click',() => {
month.style.display = "block";
year.style.display = "none";
});
deactive.addEventListener('click',()=> {
year.style.display = "block";
month.style.display = "none";
});
</script>
<style>
.month{
display: block;
}
.year{
display: none;
}
</style>
</body>
</html>
в первую очередь вам нужно использовать свои переменные (активные, деактивированные, год, месяц) и не повторять лишний document.getElementsByClassName. во-вторых, вы пропустили «s» в getElementsByClassName, и ваш щелчок имеет верблюжий корпус. и, кстати, результатом getElementsByClassName является массив, потому что это класс, и вы должны получить доступ к первой ячейке, используя ее следующим образом: document.getElementsByClassName("active")[0].
Откройте инструменты разработчика браузера. Прочтите сообщение об ошибке. Первая проблема — опечатка.