Assign Class with if statement HTML

Question

im making a good looking login system, so i want to change the color of the text when something is entered inside the Form, but im not able to figure out how, i assigned them a class to make that work but it doesnt seem to work.

HTML:-

    <div class="Login">
                <form name="form1" method="get" action="index.php">
                <input type="text" value="Username" name="Username" onblur="if (this.value === '') {this.value = 'Username'; this.class='Offline';}" onfocus="if (this.value === 'Username') {this.value = ''; this.class='Online';}">
                <input type="text" value="Password" name="Password" onblur="if (this.value === '') {this.value = 'Password';}" onfocus="if (this.value === 'Password') {this.value = '';}">
                <input type= "Submit" Name= "Submit" value= "Login" class="Button">
                </form>
    </div>

and im changing the color in CSS on those classes. but it doest seem to work, can anyone guide me here, i dont have a lot of scripting experience in javascript, so i didnt want to go that side

Answer 1

Use this.className instead this.class

<input type="text" value="Username" name="Username" onblur="if (this.value === '') {this.value = 'Username'; this.className='Offline'}" onfocus="if (this.value === 'Username') {this.value = ''; this.className='Online';}">

Example

Update

You have to change the condition, as the condition wasn't satisfying and class wasn't applied:

<input type="text" value="Username" name="Username" onblur="if (this.value != '') <-- Here {this.value = 'Username'; this.className='Offline'}" onfocus="if (this.value === 'Username') {this.value = ''; this.className='Online';}">

Updated Fiddle

Answer 2

Use this.className instead of this.class

 <input type="text" value="Username" name="Username" onblur="if (this.value === '') {this.value = 'Username'; this.className='Offline';}" onfocus="if (this.value === 'Username') {this.value = ''; this.className='Online';}">

JsFiddle Demo

Answer 3

You should use setAttribute and getAttribute methods instead of class or className properties.

Answer 4

Have you tried with Jquery?

$(this).attr('class','yourclass');

or

$(this).removeClass('Offline');
$(this).addClass('Online');