I try to learn javascript and ajax, so I write any script where I want to change style of given element in form. I've trying to do this since 2 days but without any effect - I still have error "Uncaught TypeError: Cannot read property 'style' of undefined". I include my html and js code below. Please tell me what I'm doing wrong:

html:

<div id="registerNewUser" class="tabContent">
                  <h1>Registration form</h1>
                  <form action='#' name='registerForm' id='registerForm'> 
                    <table style='width: 25%;'>
                        <tr>
                            <td>Name:</td><td><input type="text" style="border: 1px solid #000;" id='name' name='name' size ="10" onClick='changeStyle(this.id);' onBlur='checkFieldName();'></td>
                            <td><div id='divName'></div></td>
                        </tr>
                        <tr>
                            <td>Second Name:</td><td><input type="text" style="border: 1px solid #000;" id='secondName' name='secondName' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldSecondName();'></td>
                            <td><div id='divSecondName'></div></td>
                        </tr>
                        <tr>
                            <td>Password:<sup style='cursor: help' title="Password must have at least 6 characters">*</sup></td><td><input type="password" style="border: 1px solid #000;" id='password' name='password' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldPassword();'></td>
                            <td><div id='divPassword'></div></td>
                        </tr>
                        <tr>
                            <td>Retype Password:<sup style=' cursor: help' title="Password must have at least 6 characters">*</sup></td><td><input type="password" style="border: 1px solid #000;" name="retypePassword" id='retypePassword' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldRetypePassword();'></td>
                            <td><div id='divRetypePassword'></div></td>
                        </tr>
                        <tr>
                            <td>Email:</td><td><input type="text" style="border: 1px solid #000;" id='email' name='email' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldEmail();'></td>
                            <td><div id='divEmail'></div></td>
                        </tr>
                    </table>
                  </form>
              </div>

javascript:

var registerForm=document.getElementById('registerForm'); // register form

function changeStyle(element)
{
    registerForm.element.style.border='1px solid #fff';
}

Thanks in advance.

I try to learn javascript and ajax, so I write any script where I want to change style of given element in form. I've trying to do this since 2 days but without any effect - I still have error "Uncaught TypeError: Cannot read property 'style' of undefined". I include my html and js code below. Please tell me what I'm doing wrong:

html:

<div id="registerNewUser" class="tabContent">
                  <h1>Registration form</h1>
                  <form action='#' name='registerForm' id='registerForm'> 
                    <table style='width: 25%;'>
                        <tr>
                            <td>Name:</td><td><input type="text" style="border: 1px solid #000;" id='name' name='name' size ="10" onClick='changeStyle(this.id);' onBlur='checkFieldName();'></td>
                            <td><div id='divName'></div></td>
                        </tr>
                        <tr>
                            <td>Second Name:</td><td><input type="text" style="border: 1px solid #000;" id='secondName' name='secondName' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldSecondName();'></td>
                            <td><div id='divSecondName'></div></td>
                        </tr>
                        <tr>
                            <td>Password:<sup style='cursor: help' title="Password must have at least 6 characters">*</sup></td><td><input type="password" style="border: 1px solid #000;" id='password' name='password' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldPassword();'></td>
                            <td><div id='divPassword'></div></td>
                        </tr>
                        <tr>
                            <td>Retype Password:<sup style=' cursor: help' title="Password must have at least 6 characters">*</sup></td><td><input type="password" style="border: 1px solid #000;" name="retypePassword" id='retypePassword' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldRetypePassword();'></td>
                            <td><div id='divRetypePassword'></div></td>
                        </tr>
                        <tr>
                            <td>Email:</td><td><input type="text" style="border: 1px solid #000;" id='email' name='email' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldEmail();'></td>
                            <td><div id='divEmail'></div></td>
                        </tr>
                    </table>
                  </form>
              </div>

javascript:

var registerForm=document.getElementById('registerForm'); // register form

function changeStyle(element)
{
    registerForm.element.style.border='1px solid #fff';
}

Thanks in advance.

• javascript
• ajax
• html

2 Answers 2

You need to get the element by ID:

document.getElementById(element).style.border = '1px solid #fff';

To use the passed selector (assuming that you're passing the id as a string):

document.getElementById(element).style.border = '1px solid #fff';

JS Fiddle demo (in the Fiddle, I'm using a red border to make it more obvious, but the principle is exactly the same).

If you're passing the node itself in the function, however:

element.style.border = '1px solid #fff';

JS Fiddle demo (again, a red border for visual clarity).