Using class and id in a Div not working

Question

I have read that you can have a class and ID in a Div which is what I am trying to do but it doesn't seem to be working. When the page loads it creates a list based on an SQL query. Each of the text boxes should get a unique id and all of them should be hidden and so I have given a general class name to the Div. The HTML returned looks correct but the debugger says:

TypeError: undefined is not an object (evaluating 'document.getElementsByClassName('unknownTextField').style.visibility = 'hidden'')

<script type="text/javascript">
    window.onload = function () {
        document.getElementsByClassName('unknownTextField').style.visibility = 'hidden';
    }
</script>

The Div

The loop $rowNumber loops through the list

<div class='unknownTextField' id='qualTypeUnknown<?php echo $rowNumber ?>'>
<input type='text' name='unknown<?php echo $qualType ?>'>
</div>

Can anyone see what I am doing wrong?

It's because `getElementsByClassName` returns an array-like object of elements. You would need to iterate over them. Try accessing the first one: `document.getElementsByClassName('unknownTextField')[0]`.. See: http://stackoverflow.com/questions/10693845/what-does-getelementsbyclassname-return — Josh Crozier, Dec 04 '15 at 14:38
You tagged question with jQuery so why aren't you using it?! — A. Wolff, Dec 04 '15 at 14:39

score 1 · Answer 1 · answered Dec 04 '15 at 14:39

1

getElementsByClassName() returns an array like object.use [] to access individual elements like :

document.getElementsByClassName('unknownTextField')[0].style.visibility = 'hidden';

answered Dec 04 '15 at 14:39

Ramanlfc

8,283
1
18
24

score 1 · Accepted Answer · answered Dec 04 '15 at 14:40

1

document.getElementsByClassName(); returns an object collection (basically an array). You need to provide an index like this document.getElementsByClassName('className')[0];. To apply code to all the elements with a class name, you will need a loop like the code below.

<script type="text/javascript">
    window.onload = function () {
        var elem = document.getElementsByClassName('unknownTextField');
        for(var i = 0; i < elem.length; i++){
            elem[i].style.visibility = 'hidden';
        }
    }
</script>

answered Dec 04 '15 at 14:40

www139

4,960
3
31
56

Although, and I hate to do this, but now referring to the id I get the same error. I am later trying to make one of them visible and refer to the Div with $("#qualTypeUnknown3").style.visibility = 'visible'; but says it can't find the id. Any idea? – RGriffiths Dec 04 '15 at 15:00
@RichardGriffiths Either there aren't 3 text boxes or there is a mistake in your code. I don't know exactly how your server script functions. Use the web inspector to look at the textbox elements and see what ids they have, then explain what you see in your question or to me :) – www139 Dec 04 '15 at 15:04
Copied from the web inspector
.... so it seems to be there. Very strange! – RGriffiths Dec 04 '15 at 15:16
@RichardGriffiths Where are you getting the element by id? Be sure you put that code inside an onload event listener with the class code. :) – www139 Dec 04 '15 at 15:21

score 0 · Answer 3 · answered Dec 04 '15 at 14:40

0

The function getElementsByClassName() returns an array of Elements. You need to pick one:

document.getElementsByClassName('unknownTextField')[0].style.visibility = 'hidden';

This will give access to the first one.

answered Dec 04 '15 at 14:40

Praveen Kumar Purushothaman

164,888
24
203
252

score 0 · Answer 4 · answered Dec 04 '15 at 14:44

0

Since you tagged with question with jQuery, I'll give you one solution:

$('.unknownTextField').css('visibility','visible');

answered Dec 04 '15 at 14:44

j08691

204,283
31
260
272

Using class and id in a Div not working

4 Answers4