Change Button Class with Javascript of sorts

Question

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

jsfiddle.net/akwZf/4

Dipesh Parmar
– Dipesh Parmar

2013-09-11 04:11:25 +00:00
Commented Sep 11, 2013 at 4:11 — Dipesh Parmar
– Dipesh Parmar, Commented Sep 11, 2013 at 4:11

Dipesh Parmar · Accepted Answer · 2013-09-11 04:11:04Z

3

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

edited Sep 11, 2013 at 4:11

answered Sep 11, 2013 at 4:02

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

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

Comments

Kiran · Accepted Answer · 2013-09-11 04:15:16Z

1

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

edited Sep 11, 2013 at 4:15

answered Sep 11, 2013 at 4:03

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Collectives™ on Stack Overflow

Change Button Class with Javascript of sorts

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related