0

I'm trying to add (not replace) a class to a div. From my understanding, all my code is correct... but it doesn't seem to be working.

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>
Soviut
  • 88,194
  • 49
  • 192
  • 260
NillBye
  • 25
  • 11

4 Answers4

2

You are just passing the ID of the element but not reading the element.

Do this:

function clickTab(clicked_id) {
    var x = document.getElementById(clicked_id);
    x.className += " active"
}
Nawed Khan
  • 4,393
  • 1
  • 10
  • 22
  • That'll work, but only for that exact element. He may have a variety of elements that all call the same function onClick, so rather than setting which id to target, using this keyword and .id would work with any element that calls it. – Jared Bledsoe Oct 11 '17 at 18:45
1

You just had the targeting wrong, this will work with any element that happens to call the function.

function clickTab(clicked_id) {
    var x = clicked_id.id;
    document.getElementById(x).classList.add("active");
}
.active {
  background-color:red;
}
<div id="communitytab" onClick="clickTab(this)">Interesting community content</div>
Jared Bledsoe
  • 559
  • 5
  • 15
  • Do you know why this doesn't work on fiddle? It seems to work here.. The only reason I ask, is I am not actually applying this to a website just yet. I'm just using scratchpads to test stuff out. – NillBye Oct 11 '17 at 18:53
  • https://stackoverflow.com/questions/14499783/jsfiddle-no-connection-between-html-and-js-cant-call-simple-function-from-but – Jared Bledsoe Oct 11 '17 at 18:54
  • 1
    Ah! Thank you very much, that works perfectly (and it's easy to understand!) – NillBye Oct 11 '17 at 18:56
0

The simplest solution is simply not to pass the ID, but the entire element itself into the function. You can then retrieve the DOM node's ID within the function itself, so that you don't have to query the DOM again:

function clickTab(el) {
  el.className = " active";
  
  // Get the ID
  var id = el.id;
  console.log(id);
}
.active {
  background-color:red;
}
<div id="communitytab" onClick="clickTab(this)">Interesting community content</div>

However, you should really avoid using inline JS. Instead, use Element.addEventListener instead, which will pass the DOM node as the contextual this. Also, you can use classList instead of className (it is actually very widely supported now, ~98% of all browser traffic), because the API allows you to add/remove classes easily using built-in prototypes, e.g. el.classList.add('active'):

function clickTab() {
  var el = this;
  el.classList.add('active');
  
  // Get 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>
Terry
  • 63,248
  • 15
  • 96
  • 118
0

It occurs to me that your code is fine when exeuted by a browser engine but not in jsfiddle.

This topic seems to be about the same issue: JavaScript not running on jsfiddle.net

Harry
  • 1,233
  • 10
  • 24