Question 42603 in Html Question posted in
Some basic documentation can be found here.

DOM Manipulation in JavaScript – Html

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");
};
Tags:

2

Answers


  1. 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];
    Login or Signup to reply.
  2. 0

    [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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search