Change class of an HTML element with Javascript

Question

I need to change on the fly the class of an HTML element depending on the choice made by an user with a radio button but the problem is that I get the message

"Erreur : missing ) after argument list Fichier Source : website Ligne : 1, Colonne : 71 Code Source : document.getElementById('jj_conjoint').setAttribute('class','validate['required']');".

my code :

<label>Husband/Wife :</label>
    <input type="radio" name="not_single" value="yes" onclick="document.getElementById('birthdate_partner').setAttribute('class','validate['required']');">yes
    <input type="radio" name="not_single" value="no" checked="checked">no


<select name="birthdate_partner" id="birthdate_partner">
   <option value="" selected="selected">-</option>
   <option value="1987" >1987</option>
   <option value="1986" >1986</option>
   <option value="1985" >1985</option>
   <option value="1984" >1984</option>
</select>

As you can maybe see from the syntax highlighting, it is indeed wrong what you do: you have a string('validate['), followed by a variable (required), followed by another string (']'). Can we see the entire code somewhere? I think it could help understand the problem. — Daan Wilmer
– Daan Wilmer, Commented Aug 17, 2011 at 8:46

karim79 · Accepted Answer · 2011-08-17 08:27:58Z

3

You have not quoted the ID string, so document.getElementById returns a null because the unquoted string is seen as an uninitialised variable, which will evaluate to undefined.

document.getElementById('birthdate_partner').setAttribute('class',validate['required']);

answered Aug 17, 2011 at 8:27

karim79

343k67 gold badges420 silver badges409 bronze badges

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

3 Comments

Bruno Over a year ago

This way (with the " ") doesn't work : I get "Erreur : syntax error Fichier Source : website Ligne : 1, Colonne : 24 Code Source : document.getElementById("

karim79 Over a year ago

@Bruno - sorry, I just changed 'em to single quotes.

jfriend00 Over a year ago

Use single quotes inside the double quoted string. "document.getElementById('birthdate_partner')...". You can't put double quotes inside a double quoted string unless you escape them. But you can put single quotes inside a double quoted string.

pimvdb · Accepted Answer · 2011-08-17 08:28:29Z

1

document.getElementById(birthdate_partner)

is referring to a variable called birthdate_partner. Instead, you should pass the ID as a string:

document.getElementById('birthdate_partner')

The variable birthdate_partner is never assigned to some value, so it is undefined, resulting in this being called:

document.getElementById(undefined)

which does not work.

answered Aug 17, 2011 at 8:28

pimvdb

155k80 gold badges313 silver badges358 bronze badges

2 Comments

Daan Wilmer Over a year ago

This can work, since undefined is just a variable the way you use it. Suppose you would say var undefined = 'birthdate_partner', this would work just fine. It only works because you never defined undefined.

pimvdb Over a year ago

@Daan Wilmer: You're compeltely correct. However I assumed the OP did not set the undefined variable. It isn't a good practice anyway. To make really sure you have undefined you can always put this in a closure or define another variable with no value.

Steve · Accepted Answer · 2011-08-17 08:29:17Z

0

You could use jQuery to do this:

$("[name=birthdate_partner]").removeClass(className);
$("[name=birthdate_partner]").addClass(className);

answered Aug 17, 2011 at 8:29

Steve

50.6k4 gold badges34 silver badges42 bronze badges

1 Comment

pimvdb Over a year ago

Although this is easier I wouldn't advise using jQuery before knowing what's the difference between a string and a variable.

Collectives™ on Stack Overflow

Change class of an HTML element with Javascript

3 Answers 3

3 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Related