Achieving class toggling between elements using event.target

Question

Achieving class toggling between elements using event.target

I'm currently working on a JavaScript app project and I'm looking to add classes to my navigation links using the event.target property. I have two different functions that should toggle the class names between the two navigation links. For example, when the user clicks on the "home" link, I want to give it the .active class, and if they click on "home2", I want to remove the .active class from "home" and apply it to "home2". I am seeking a Vanilla JavaScript solution for this issue. Any ideas?

function goHome(event) {
    event.target.classList.add('active')
}

function goSomeWhere(event) {
    event.target.classList.add('active')
}

.active {
    color: red;
}

<div class="menu">
    <li onclick="goHome(event)" class="primary">home</li>
    <li onclick="goSomeWhere(event)" class="primary2">home2</li>
</div>

javascript html css

Answer 1

Answer №1

To start, you can remove the active class from any element that currently has it, and then add it to the one that the user just clicked on. Here's how you can achieve this:

const menu = document.getElementById('menu');

menu.addEventListener('click', (event) => {
    menu.querySelectorAll('.active')
        .forEach(link => link.classList.remove('active');

    event.target.classList.add('active');
});

If you give your div an id of menu, this code should work smoothly. However, I recommend changing the div to a nav tag since it represents navigation elements more accurately.

By following this method, you can eliminate the need for the onclick attribute in your list items.

Answer 2

To start, you can remove the active class from any element that currently has it, and then add it to the one that the user just clicked on. Here's how you can achieve this:

const menu = document.getElementById('menu');

menu.addEventListener('click', (event) => {
    menu.querySelectorAll('.active')
        .forEach(link => link.classList.remove('active');

    event.target.classList.add('active');
});

If you give your div an id of menu, this code should work smoothly. However, I recommend changing the div to a nav tag since it represents navigation elements more accurately.

By following this method, you can eliminate the need for the onclick attribute in your list items.

Answer 3

Answer №2

Using inline event handlers is generally discouraged, as explained here.

We can implement event delegation to manage the active state efficiently. The handler utilizes Element.closest() method to identify the source of the click.

Note: I have updated the parent element from a div to a ul.

document.addEventListener(`click`, handle);

function handle(evt) {
  const li = evt.target.closest(`li`);
  const menu = evt.target.closest(`.menu`);

  if (li && menu) {
    return menu.querySelectorAll(`.primary`).forEach(el =>
      el === li 
      ? el.classList.add(`active`) 
      : el.classList.remove(`active`) );
  }
}

.active {
  color: red;
}

.primary {
  cursor: pointer;
}

.primary:hover {
  text-decoration: underline;
}

.primary:not(.active):hover {
  color: green;
}

<ul class="menu">
  <li class="primary">home</li>
  <li class="primary">home2</li>
</ul>

Answer 4

Using inline event handlers is generally discouraged, as explained here.

We can implement event delegation to manage the active state efficiently. The handler utilizes Element.closest() method to identify the source of the click.

Note: I have updated the parent element from a div to a ul.

document.addEventListener(`click`, handle);

function handle(evt) {
  const li = evt.target.closest(`li`);
  const menu = evt.target.closest(`.menu`);

  if (li && menu) {
    return menu.querySelectorAll(`.primary`).forEach(el =>
      el === li 
      ? el.classList.add(`active`) 
      : el.classList.remove(`active`) );
  }
}

.active {
  color: red;
}

.primary {
  cursor: pointer;
}

.primary:hover {
  text-decoration: underline;
}

.primary:not(.active):hover {
  color: green;
}

<ul class="menu">
  <li class="primary">home</li>
  <li class="primary">home2</li>
</ul>

Achieving class toggling between elements using event.target

Answer №1

Answer №2

Similar questions

Error Encountered on Android Due to Sec-WebSocket-Key Mismatch

Adjustable scrollbar for varying content heights

Jade not binding correctly with Angular.ErrorMessage: Angular bindings are

Searching for a specific string within an array of structured objects: a step-by-step guide

Determining the positioning of a tablet with a JavaScript algorithm

Unable to collapse the bootstrap navbar on a targeted screen size

css readonly input textbox not changing background color when set

transferring a function from a main component to a nested component using swipeout functionality in react-native

The Ionic framework has a defined variable

Attempting to create a button using JavaScript, however, encountering difficulties with functionality

sending an object between JavaScript and PHP and vice versa

JavaScript function returning code

The MUI Select component requires two clicks to open its menu if another Select component's menu is already open

Struggling with a Failed prop type error in React? Learn how to resolve the issue of an Invalid prop being

Navigating to another division segment within an HTML document using the arrow keys: a guide

The FatSecret Sharp API does not support starting an asynchronous operation at the current moment

javascript - The window.onload event is not firing

An innovative concept of housing two distinct retailers under one app

How come the error message in AngularJS is appearing as blank during error handling?

Achieve equal distribution of divs with a specified size