Attempting to assign a new class to a <div> using JavaScript

Question

Attempting to assign a new class to a <div> using JavaScript

I'm facing an issue where I need to add a class to a div without replacing the existing classes. Despite my code being correct, it doesn't seem to work as expected.

function clickTab(clicked_id) {
  var x = clicked_id
  x.className += " active"
}

.active {
  background-color:red;
}

<div id="communitytab" onClick="clickTab(this.id)">Interesting community content</div>

javascript html css

Answer 1

Answer №1

Passing the element's ID is not enough, you also need to read the element.

Here is a suggestion:

function activateTab(clicked_id) {
    var x = document.getElementById(clicked_id);
    x.className += " active"
}

Answer 2

Passing the element's ID is not enough, you also need to read the element.

Here is a suggestion:

function activateTab(clicked_id) {
    var x = document.getElementById(clicked_id);
    x.className += " active"
}

Answer 3

Answer №2

It turns out that the issue was simply with the targeting, and this solution will successfully function with any element that triggers the specific function.

function selectTab(selected_id) {
    var x = selected_id.id;
    document.getElementById(x).classList.add("active");
}

.active {
  background-color: blue;
}

<div id="communitytab" onClick="clickTab(this)">Fascinating community content</div>

Answer 4

It turns out that the issue was simply with the targeting, and this solution will successfully function with any element that triggers the specific function.

function selectTab(selected_id) {
    var x = selected_id.id;
    document.getElementById(x).classList.add("active");
}

.active {
  background-color: blue;
}

<div id="communitytab" onClick="clickTab(this)">Fascinating community content</div>

Answer 5

Answer №3

To simplify the process, it's best to pass the entire element instead of just the ID to the function. This way, you can directly access the element's ID without needing to query the DOM again:

function clickTab(el) {
  el.className = " active";
  
  // Retrieve the ID
  var id = el.id;
  console.log(id);
}

.active {
  background-color:red;
}

<div id="communitytab" onClick="clickTab(this)">Interesting community content</div>

It's important to avoid using inline JS. Instead, utilize Element.addEventListener which will pass the DOM node as this. Additionally, make use of classList instead of className as it is widely supported (~98% of browser traffic), allowing you to easily manipulate classes with methods like el.classList.add('active'):

function clickTab() {
  var el = this;
  el.classList.add('active');
  
  // Retrieve the ID
  var id = el.id;
  console.log(id);
}

document.getElementById('communitytab').addEventListener('click', clickTab);

.active {
  background-color:red;
}

<div id="communitytab">Interesting community content</div>

Answer 6

To simplify the process, it's best to pass the entire element instead of just the ID to the function. This way, you can directly access the element's ID without needing to query the DOM again:

function clickTab(el) {
  el.className = " active";
  
  // Retrieve the ID
  var id = el.id;
  console.log(id);
}

.active {
  background-color:red;
}

<div id="communitytab" onClick="clickTab(this)">Interesting community content</div>

It's important to avoid using inline JS. Instead, utilize Element.addEventListener which will pass the DOM node as this. Additionally, make use of classList instead of className as it is widely supported (~98% of browser traffic), allowing you to easily manipulate classes with methods like el.classList.add('active'):

function clickTab() {
  var el = this;
  el.classList.add('active');
  
  // Retrieve the ID
  var id = el.id;
  console.log(id);
}

document.getElementById('communitytab').addEventListener('click', clickTab);

.active {
  background-color:red;
}

<div id="communitytab">Interesting community content</div>

Answer 7

Answer №4

Upon further examination, it seems that your code functions properly when executed by a browser engine, but encounters issues in jsfiddle.

Interestingly, there is a related discussion on this topic here: JavaScript not running on jsfiddle.net

Answer 8

Upon further examination, it seems that your code functions properly when executed by a browser engine, but encounters issues in jsfiddle.

Interestingly, there is a related discussion on this topic here: JavaScript not running on jsfiddle.net

Attempting to assign a new class to a <div> using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Obtain an identifier to be used as dynamic data in an ajax request with jQuery

What is the best way to make a line widget that has rounded edges at both the beginning and end?

Troubleshooting issue with jest expect.any() failing to work with a custom class following migration from JavaScript to TypeScript

AngularJS is experiencing an issue where the dynamic partial stored in $templateCache is being removed

Dynamic horizontal scrolling

Creating a user-friendly form in a Nuxt/Vue application that enables dynamic attribute creation

Real-time data updates not working in jQuery data table

Locate an original identifier using Selenium WebDriver

What is the best way to find the average time in Typescript?

Managing Input Type Dropdown Selections Using Jquery

Sequentially transferring data to users and processing in Node.js

Karma jasmine and an angular controller that utilizes the 'Controller as' syntax (where 'this' is used instead of $scope)

Error Message: The function "menu" is not a valid function

What is the reason for the difference in width between Bootstrap-5 row and regular div blocks?

Align watermark content to the far left side

"Exploring the magic of product galleries: A behind-the-scenes look at how websites create images

Incorporate a new JavaScript animation as the background for an established website, replacing the static background image

Tips for creating animations with JavaScript on a webpage

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

What is the best way to transfer a row value from one table to another and then reinsert it back into the original table