英文:
DOM Manipulation in JavaScript
问题
Here's the corrected JavaScript code:
let burgerbar = document.querySelector(".burgerbar");
burgerbar.onclick = function() {
let navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
};
I've removed the HTML escape codes (e.g., ") and fixed the code to properly select the elements and toggle the "active" class when the "burgerbar" element is clicked.
英文:
I am trying to make a html object named "burgerbar" affect another html object named "nav-bar" in JavaScript and affect it using JS.
My problem is I have the code in html but as I am unfamiliar with DOM manipulation in JavaScript I do not know how to write the following line of code in JavaScript and need help in writing it in JavaScript.
This is the html code.
burgerbar = document.querySelector(".burgerbar");
burgerbar.onclick = function()
{
nav-bar = document.querySelector(".nav-bar");
nav-bar.classList.toggle("active");
}
I tried writing the following in my JavaScript document however nothing happens when I click the "burgerbar" element. I know the code in html but I am trying to learn how to write it in JavaScript to not crowd my html code with JS.
let burgerbar = document.getElementsByClassName(".burgerbar");
burgerbar.onclick = function ()
{
navbar = document.querySelector(".nav-bar");
navbar.classList.toggle("active");
};
答案1
得分: 1
[element].onclick 不是添加点击处理程序的最佳方法。使用 addEventListener 可以为一个元素添加多个处理程序。
添加处理程序的最佳（动态）方式是使用 事件委托。您将一个处理函数添加到 document。在该函数中，您确定事件的来源，然后（如果需要）对其进行操作。这里有一个小的 最小可重现示例。
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.classList.contains(`nav-bar`)) {
return evt.target.classList.toggle(`active`);
}
}
现在您的问题似乎是：如何向我的HTML添加脚本？这是一个 内联 添加脚本的示例。您还可以创建一个脚本文件（例如 somescript.js），然后使用 <script src="somescript.js"></script> 来添加它。
<head>
<style type="text/css">
.nav-bar {
cursor: pointer;
}
.active {
color: red;
}
</style>
</head>
<body>
<div class="nav-bar">Burgerbar</div>
<script>
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.classList.contains(`nav-bar`)) {
return evt.target.classList.toggle(`active`);
}
}
</script>
</body>
英文:
[element].onclick is not the best method to add a click handler. Using addEventListener you will be able to add multiple handlers to one element.
The best (dynamic) way to add handlers is to use event delegation. You add a handler function to the document. In that function you determine where the event came from and (if necessary) act on it. Here is a small minimal reproducable example for that.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.classList.contains(`nav-bar`)) {
return evt.target.classList.toggle(`active`);
}
}
<!-- language: lang-css -->
.nav-bar {
cursor: pointer;
}
.active {
color: red;
}
<!-- language: lang-html -->
<div class="nav-bar">Burgerbar</div>
<!-- end snippet -->
Now your question seems to be: how do I add scripting to my HTML? Here's an example of adding a script inline. You can also create a script file (e.g. somescript.js) and add that using <script src="somescript.js"></script>.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<head>
<style type="text/css">
.nav-bar {
cursor: pointer;
}
.active {
color: red;
}
</style>
<body>
<div class="nav-bar">Burgerbar</div>
<script>
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.classList.contains(`nav-bar`)) {
return evt.target.classList.toggle(`active`);
}
}
</script>
</body>
<!-- end snippet -->
答案2
得分: 0
Assuming there is only one burger bar and one nav bar, you could resolve this by using getElementById instead of getElementsByClassName.
getElementsByClassName gives you a list of elements, which means you need to first get the element from the list before manipulating the element.
Here is a getElementById example:
let burgerbar = document.getElementById("burgerbar");
burgerbar.onclick = function ()
{
let navbar = document.getElementById("navbar");
navbar.classList.toggle("active");
};
If you want to use getElementsByClassName, you can use square brackets to select an index, just like with arrays. Or you could iterate over them, if there are multiple elements with the class name and you want to do something for more of them.
document.getElementsByClassName("burgerbar")[0];
英文:
Assuming there is only one burger bar and one nav bar, you could resolve this by using getElementById instead of getElementsByClassName.
getElementsByClassName gives you a list of elements, which means you need to first get the element from the list before manipulating the element.
Here is a getElementById example:
let burgerbar = document.getElementById("burgerbar");
burgerbar.onclick = function ()
{
let navbar = document.getElementById("navbar");
navbar.classList.toggle("active");
};
if you want to use getElementsByClassName, you can use square brackets to select an index, just like with arrays. Or you could iterate over them, if there are multiple elements with the class name and you want to do something for more of them.
document.getElementsByClassName("burgerbar")[0];
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论