Change class of element using javascript

Question

I'm having difficulties to change class of element based on selected item in select tag. This is my code:

<table> 
    <tr>
        <select onchange="wow(this.value)">
            <option value="a">a</option>
            <option value="b">b</option>            
        </select>
    </tr>               
    <tr id="x" class="show">
        x
    </tr>
</table>

<script>
function wow(value){
    switch(value){
        case "a": document.getElementById("x").className = "show"; break;       
        case "b": document.getElementById("x").className = "hide"; break;
    }
}
</script>

<style>
.show{
    display:inline-block;
}

.hide{
    display:none;
}
</style>

I don't see any problem here. I also tried setAttribute("class", "show") but doesn't work.

@GlennFerrieLive that's a jQuery example. – Hamish Mar 11 '13 at 03:53 — Hamish, Mar 11 '13 at 03:53
You're missing the `case` part of a switch. – j08691 Mar 11 '13 at 03:54 — j08691, Mar 11 '13 at 03:54

Derek 朕會功夫 · Accepted Answer · 2013-03-11T04:00:46.600

8

You have to wrap X in a <td>:

http://jsfiddle.net/DerekL/CVxP7/

<tr>...<td id="x" class="show">x</td></tr>

Also you have to add case in front of "a":

case "a":
    document.getElementById("x").setAttribute("class", "show");
    break;

PS: There is a more efficient way to achieve what you are trying to do here:

http://jsfiddle.net/DerekL/CVxP7/2/

function wow(value) {
    var index = {
        a: "show",
        b: "hide"
    };
    document.getElementById("x").setAttribute("class", index[value]);
}

Now you don't need to type document.getElementById("x").setAttribute("class"... twice.

edited Mar 11 '13 at 04:00

answered Mar 11 '13 at 03:53

Derek 朕會功夫

92,235
44
185
247

it works, thanks, but why I can't put class in ? – shankshera Mar 11 '13 at 04:03
@shankshera - Technically you can, but it is a good habit to [wrap your content with `` or ``](https://developer.mozilla.org/en-US/docs/HTML/Element/table#Examples). – Derek 朕會功夫 Mar 11 '13 at 04:06

score 0 · Answer 2 · answered Mar 11 '13 at 04:00

0

Try this

switch(value){
    case "a": document.getElementById("x").setAttribute("class", show); break;        
    case "b": document.getElementById("x").setAttribute("class", hide); break;
}

answered Mar 11 '13 at 04:00

Devang Rathod

6,650
2
23
32

`show` is not defined. – Derek 朕會功夫 Mar 11 '13 at 04:01

Change class of element using javascript

2 Answers2