Uncaught TypeError: Unable to read the 'style' property from undefined while you are trying to change the style of this element

I am trying to learn javascript and ajax, so I write any script where I want to change the style of this element in the form. I try to do this from 2 days, but without any effect. I still have a mistake. "Uncaught TypeError: Unable to read the" style property "undefined". I include the html and js code below. Please tell me what I am 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.

+5
source share
2 answers

You need to get the element by ID:

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

(, id ):

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

JS Fiddle demo ( Fiddle , , ).

node :

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

JS Fiddle demo ( , ).

+3

All Articles