Javascript stops working on typing multiple class names
I'm just a JavaScript problem. I have this JS code that I am using to highlight rows in a pricing table. The problem is that if I used multiple class names at the same time, it stops working. For example:
<div class="el1 someclass">Hover does not work in this</div>
<div class="el1">Hover does work in this</div>
JS:
var classes = ["el1", "el2", "el3", "el4", "el5", "el6", "el7", "el8", "el9","el10","el11","el12", "el13","el14","el15","el16","el17","el18","el19","el20","el21","el22", "el23", "el24","el25" ]; //list of your classes
var elms = {};
var n = {}, nclasses = classes.length;
function changeColor(classname, color) {
var curN = n[classname];
for(var i = 0; i < curN; i ++) {
elms[classname][i].style.backgroundColor = color;
}
}
for(var k = 0; k < nclasses; k ++) {
var curClass = classes[k];
elms[curClass] = document.getElementsByClassName(curClass);
n[curClass] = elms[curClass].length;
var curN = n[curClass];
for(var i = 0; i < curN; i ++) {
elms[curClass][i].onmouseover = function() {
changeColor(this.className, "#dbdbdb");
};
elms[curClass][i].onmouseout = function() {
changeColor(this.className, "transparent");
};
}
};
Can someone help me please, I am new to JS.
Thank..
The property className
on the dom element returns the fully qualified class name; that is, if some element has several classes (for example, <div class="herp derp"></div>
), then className = "herp derp"
.
If you want to call changeColor
for each of these multiple classes, try something like this:
// first, change the order of the arguments on the changeColor function so we can pre-apply the color argument
function changeColor(color, classname) {
var curN = n[classname];
for(var i = 0; i < curN; i ++) {
elms[classname][i].style.backgroundColor = color;
}
}
Now we can change the way we call changeColor
// now, where you previously called changeColor, do something like this
this.className.split(" ").forEach(changeColor.bind(null, "transparent"));
// we now will call changeColor on all of the classes of this with the appropriate color ("transparent" or "#dbdbdb")
var classes = ["el1", "el2", "el3", "el4", "el5", "el6", "el7", "el8", "el9","el10","el11","el12", "el13","el14","el15","el16","el17","el18","el19","el20","el21","el22", "el23", "el24","el25" ]; //list of your classes
var elms = {};
var n = {}, nclasses = classes.length;
function changeColor(classname, color) {
var curN = n[classname];
for(var i = 0; i < curN; i ++) {
elms[classname][i].style.backgroundColor = color;
}
}
for(var k = 0; k < nclasses; k ++) {
var curClass = classes[k];
elms[curClass] = document.getElementsByClassName(curClass);
n[curClass] = elms[curClass].length;
var curN = n[curClass];
for(var i = 0; i < curN; i ++) {
elms[curClass][i].onmouseover = function() {
changeColor(this.className.split(' ')[0], "#dbdbdb");
};
elms[curClass][i].onmouseout = function() {
changeColor(this.className.split(' ')[0], "transparent");
};
}
};
<div class="el1 someclass">Hover does not work in this</div>
<br><br><br><br><br><br>
<div class="el1">Hover does work in this</div>
The problem was
function changeColor(classname, color) {
var curN = n[classname];
for(var i = 0; i < curN; i ++) {
elms[classname][i].style.backgroundColor = color;
}
}
This is where you assign hover to each element where this link will be
>> changeColor(this, "#dbdbdb");
pass only one item and change color
Take a look at the script I created. The problem is that when you try to change the color you pass the class name again and try to select the element again when you already have a reference to the element where you change the background color. So, pass the element directly and change the background.
http://jsfiddle.net/5eLhsqxv/
`
var n = {}, nclasses = classes.length;
function changeColor(elm, color) {
elm.style.backgroundColor = color;
}
for(var k = 0; k < nclasses; k ++) {
var curClass = classes[k];
elms[curClass] = document.getElementsByClassName(curClass);
console.log(elms[curClass]);
console.log(curClass);
n[curClass] = elms[curClass].length;
var curN = n[curClass];
for(var i = 0; i < curN; i ++) {
console.log(elms[curClass][i]);
elms[curClass][i].onmouseover = function() {
changeColor(this, "#dbdbdb");
};
elms[curClass][i].onmouseout = function() {
changeColor(this, "transparent");
};
}
};
`