1

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");
};
S. Mazii
  • 29
  • 3
  • `getElementsByClassName` gets you a list of all elements with that class name, so you can't directly manpulate the element from the list. Also, can you show your HTML code? – Apodemus Apr 17 '23 at 11:46
  • working with `getElementById` is probably easier if you know only one element will need to be manipulated. – Apodemus Apr 17 '23 at 11:48
  • – S. Mazii Apr 17 '23 at 11:53
  • Variable names cannot include `-`, so `nav-bar` is incorrect. The `getElementsByClassName()` method returns a *list*, not a single element; you're better off with `.querySelector()` if there's only one element. Also, you don't need the "." with `.getElementsByClassName("burgerbar")` – Pointy Apr 17 '23 at 11:55
  • your HTML contains errors by the way. And you can edit your question and add the HTML there. – Apodemus Apr 17 '23 at 14:09

2 Answers2

1

[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.

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.classList.contains(`nav-bar`)) {
    return evt.target.classList.toggle(`active`);
  }
}
.nav-bar {
  cursor: pointer;
}

.active {
  color: red;
}
<div class="nav-bar">Burgerbar</div>

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>.

<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>
KooiInc
  • 119,216
  • 31
  • 141
  • 177
  • I have two issues, firstly I know how to write the code in html (but not js) but I do not want to use in line scripting so I needed help with syntax and secondly when the burgerbar element is clicked, the navbar element does not gain the "active" class – S. Mazii Apr 17 '23 at 12:28
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];
Apodemus
  • 579
  • 2
  • 19