document.querySelectorAll(variable class)

Question

I just find that document.getElementsByClassName() is not available for IE8. For this reason I want use document.querySelectorAll(), but my real problem is that class name come in a varible, and can't get the result of the function. Like this:

var linea = document.querySelectorAll(revisados[i].value);

My function is triggered by an checkbox by an onchange(value), and when the execution check the parameter value of querySelectorAll fail. I tried:

<input type="checkbox" value="1" onchange="javascript:name(this)" />

The value is a class for many other elements. And the JS:

function name(param){
var className=param.value;
var class2 = "."+class;
var linea = document.querySelectorAll("."+param); //doesn't work
var linea = document.querySelectorAll("."+className); //doesn't work
var linea = document.querySelectorAll("."+className.value); //doesn'twork
var linea = document.querySelectorAll(class2); //doesn'twork
var linea = document.querySelectorAll(String(class)); //doesn't work
}

Please any suggestion. Thanks a lot.

I don't know if it is intentional but you have typed onchage instead of onchange. Also, you can not use class as a javascript variable name because it will produce Uncaught SyntaxError: Unexpected reserved word. — kidA
– kidA, Commented Feb 24, 2015 at 19:17
FYI, the javascript: part in your inline event handler is completely unnecessary. I recommend to remove it to not spread the false impression that it is required. — Felix Kling
– Felix Kling, Commented Feb 24, 2015 at 19:24
it is a not intentional mistake. I know that "class" is a reserved word, just try to express my problem clearly. It is not the code of my real function, is an example only. — h3g0r_
– h3g0r_, Commented Feb 24, 2015 at 19:27
@h3g0r_: How should we be able to distinguish between problems in your actual code and problems in the example? An example should only replicate your actual problems, not introduce new problems. — Felix Kling
– Felix Kling, Commented Feb 24, 2015 at 19:30
Why did you even try to use document.querySelectorAll("."+param);? What do you expect from concatenating a DOM Element with a string? Similar for document.querySelectorAll("."+className.value);. Strings don't have a value property. I feel you would benefit from refreshing some JS basics. I mean, trying things out is good, but it seems like you blindly tried every possible combination. Maybe take a step back and read some documentation: developer.mozilla.org/en-US/docs/Web/API/Document/… — Felix Kling
– Felix Kling, Commented Feb 24, 2015 at 19:31

void · Accepted Answer · 2015-02-24 20:36:48Z

1

Use querySelector

function name(param){
var classValue=param.value;
linea = document.querySelector("."+classValue); 
console.log(linea.length)
}

Also IE8 does not allow CSS class to begin with a digit.

edited Feb 24, 2015 at 20:36

answered Feb 24, 2015 at 19:09

void

36.8k10 gold badges72 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

h3g0r_ Over a year ago

I got a SyntaxError too. :(

void Over a year ago

Do you have any element in your HTML with class name 1?

h3g0r_ Over a year ago

Yes, of course. If with getElementsByClassName() works on IE9+. The problem is when I tried get de element with document.querySelectorAll(variable) :(

Felix Kling Over a year ago

querySelect returns a single DOM element, so linea.length will return undefined in the best case and throw a runtime error in the worst case.

Felix Kling Over a year ago

@h3g0r_: IE8 may not allow CSS class names to start with digits.

|

Collectives™ on Stack Overflow

document.querySelectorAll(variable class)

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related