Я пытаюсь заставить слушателя JavaScript работать, но ничего не меняется.
Вот полный код:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
<script type="text/javascript">
document.addEventListener("click", () => {
document.getElementById("trigger"), () => {
document.getElementById("box").innerHTML = "New Box Text";
}
});
</script>
</body>
</html>
Я знаю, что могу сделать это с помощью jQuery, но я хочу сделать это с помощью чистого, ванильного JavaScript.
Когда я нажимаю #trigger
, текст #box
не меняется. Что я делаю неправильно?
Чтобы выполнить только ваш код, когда DOM полностью загружен и проанализирован, добавьте приемник DOMContentLoaded
событие DOMContentLoaded
, затем используйте querySelector для выбора элемента с идентификатором #trigger
, затем добавьте к нему прослушиватель событий click
и снова используйте querySelector
для выбора элемента с #box
id и изменения его .innerHTML
соответственно:
document.addEventListener('DOMContentLoaded', () => {
document.querySelector("#trigger").addEventListener('click', () => {
document.querySelector("#box").innerHTML = "New Box Text";
});
});
Самое замечательное в использовании querySelector, а также querySelectorAll заключается в том, что они обеспечивают аналогичную функциональность по сравнению с jQuery при выборе элементов.
Пример:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
document.querySelector("#trigger").addEventListener('click', () => {
document.querySelector("#box").innerHTML = "New Box Text";
});
});
</script>
</body>
</html>
Добавьте слушателя в элемент box, а не всю страницу:
document.getElementById("trigger").addEventListener("click", () =>
document.getElementById("box").innerHTML = "New Box Text"
);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border:1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border:1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
</body>
</html>
document.querySelector('#trigger').onclick
, но я хочуdocument.querySelector('#trigger').onclick
, что вы должны указать целевой элемент.addEventListener
- это лучшая практика, чемonclick