I'm trying to add an event listener to my WordPress site, but somehow it doesn't work and I have no idea why... I am a new developer with just a little self education, so a simple explanation on what's not working there would be appreciated!

Here is my code and what I'm trying to do: I got 6 equal column with 16.66% width, and I want to change their width when clicking on them, so the clicked column bee 50% and the rest 10%:

document.addEventListener("DOMContentLoaded", callIt);
function callIt() {     
    var x = document.getElementsByClassName('col-1-6');
    for (var j=0; j < x.lenght; j++) {
        x[j].addEventListener = ("click", function(){miniPage(this.Id);});
    }
}
var activeTab;
function miniPage(activeTab) {
    var i, arz;
    arz = document.getElementsByClassName('col-1-6');
    for (i = 0; i < arz.length; i++) {
        arz[i].style.width = "10%";
    }
document.getElementById(activeTab).style.width = "50%";

}

I'm trying to add an event listener to my WordPress site, but somehow it doesn't work and I have no idea why... I am a new developer with just a little self education, so a simple explanation on what's not working there would be appreciated!

Here is my code and what I'm trying to do: I got 6 equal column with 16.66% width, and I want to change their width when clicking on them, so the clicked column bee 50% and the rest 10%:

document.addEventListener("DOMContentLoaded", callIt);
function callIt() {     
    var x = document.getElementsByClassName('col-1-6');
    for (var j=0; j < x.lenght; j++) {
        x[j].addEventListener = ("click", function(){miniPage(this.Id);});
    }
}
var activeTab;
function miniPage(activeTab) {
    var i, arz;
    arz = document.getElementsByClassName('col-1-6');
    for (i = 0; i < arz.length; i++) {
        arz[i].style.width = "10%";
    }
document.getElementById(activeTab).style.width = "50%";

}

• javascript
• wordpress

• We can't see where the variable activeTab is assigned. Note, it should be the id as String, not element node – Asons Commented Apr 15, 2018 at 8:28

1 Answer 1

First of all, you have some typos.

• On line 4, you need to change lenght to length.

• On line 5, the = shouldn't be there. You need to instead call addEventListener as a "method" of the x[j], like so:
  x[j].addEventListener("click", /* here goes your handler */)

• On line 5, you need to change this.Id to this.id if you want to access id attribute of the corresponding DOM element.

Also, you don't need to declare the activeTab variable on line 8, since it's used as a function argument on the next line. Basically (omitting the explanation about arguments Array), when you declare a function, the value of the arguments you write in the parentheses () will be taken from the place you call the function. For example, in your case the value of the activeTab will be assigned on line 5, when you call miniPage function as a click handler.

I don't see the HTML in your question, so let's assume it has a table with thead and th, for simplicity. This also, of course, can be done with other HTML DOM elements like div, but with additional styles.

Please note that in order to make your JS work, you'll need some id attributes assigned to the DOM elements in your HTML. I've done it in the example below.

You can see working example down below. In your JS, I changed only the things I mentioned above.

document.addEventListener("DOMContentLoaded", callIt);
function callIt() {
    var x = document.getElementsByClassName('col-1-6');
    for (var j=0; j < x.length; j++) {
        x[j].addEventListener("click", function(){miniPage(this.id);});
    }
}

function miniPage(activeTab) {
    var i, arz;
    arz = document.getElementsByClassName('col-1-6');
    for (i = 0; i < arz.length; i++) {
        arz[i].style.width = "10%";
    }
    document.getElementById(activeTab).style.width = "50%";
}

.col-1-6 {
  background-color: grey;
  cursor: pointer;
  width: 16.66%;
  height: 36px;
}

<table>
<thead>
  <th class="col-1-6" id="first-column">
    1st column
  </th>
  <th class="col-1-6" id="second-column">
    2nd column
  </th>
  <th class="col-1-6" id="third-column">
    3rd column
  </th>
  <th class="col-1-6" id="fourth-column">
    4th column
  </th>
  <th class="col-1-6" id="fifth-column">
    5th column
  </th>
  <th class="col-1-6" id="sixth-column">
    6th column
  </th>
</thead>
</table>