So, I am trying to change the class for a input box using javascript and can't seem to get it right.

I have 2 CSS classes.

The normal class is .butz and the one I want the button to change to when its clicked is .butzz

So, I have this for my html:

<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="" />

and this is my js

document.getElementById("butval1").className += "butzz";

What I really want to do, is change the class from butz to butzz or... if possible, change the background color of my button with getElementByClassName

I have 9 buttons that are all in the same class, and I want the one clicked, to change to green or #24f000

thank you all

So, I am trying to change the class for a input box using javascript and can't seem to get it right.

I have 2 CSS classes.

The normal class is .butz and the one I want the button to change to when its clicked is .butzz

So, I have this for my html:

<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="" />

and this is my js

document.getElementById("butval1").className += "butzz";

What I really want to do, is change the class from butz to butzz or... if possible, change the background color of my button with getElementByClassName

I have 9 buttons that are all in the same class, and I want the one clicked, to change to green or #24f000

thank you all

• javascript
• button

Share Improve this question Follow asked Sep 11, 2013 at 3:59 user2759977user2759977 2711 gold badge22 silver badges88 bronze badges 1

• jsfiddle/akwZf/4 – Dipesh Parmar Commented Sep 11, 2013 at 4:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

using javascript you can change the class name using

document.getElementById('butval1').className = 'butzz'

if you want to add a new class by javascript use

document.getElementById('butval1').className += ' butzz'

for change clicked DOM class you need to create function and pass that clicked DOM into function as argument and using that passed args you can do this.

Example

<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
<input id="butval2" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
<input id="butval3" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />

function changeID(args)
{
    args.className = 'butzz'
}

Live Demo

Try:

<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
<input id="butval2" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
<input id="butval3" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />

function changeID(elm){
    var NAME = elm;
    var currentClass = NAME.className;
    if (currentClass == "butz") { 
        NAME.className = "butzz";   
    } else {
        NAME.className = "butz";  
    }
}

DEMO FIDDLE