javascript - Can't get text to change with a button click -

i'm trying change line of text, inside form; more specifically, want text change under conditions. conditions check when user clicks button. in case want text change when user leave input field blank. code includes entire form i'm working , script. problem i'm having text seem change when button clicked second or long alert message up. afterwards, goes original text. line in script accessing 5th line of code.

<div id="userregistration"> <!--  registration form shell -->              <form name="registration">             <div id="leftsideform"> <!--  left side of registration form -->                  <span style="color:red">*</span>                 enter username: <input type="text" name="username" /> <br />                  <b id="yy">test </b> <br />                  <span style="color:red">*</span>                 enter password: <input type="password" name="userpassword" /><br />                  <span style="color:red">*</span>                 confirm password: <input type="password" name="cuserpassword" /><br /> <br /> <br />                  <span style="color:red">*</span>                 first name: <input type="text" name="firstname" /><br />                  middle initial: <input type="text" name="middlename" /><br />                  <span style="color:red">*</span>                 last name: <input type="text" name="lastname" /><br /> <br />              </div> <!-- end of left sideform -->              <div id="rightsideform">                  <span style="color:red">*</span>                 email address: <input type="text" name="useremail" /><br />                  <span style="color:red">*</span>                 confirm email: <input type="text" name="confirmuseremail" /><br /> <br /> <br /> <br />                  <button type="submit" onclick="validateusername()" >register</button>             </div> <!-- end of right sideform -->              </form>  </div> <!-- end of registration -->   <script type="text/javascript"> function validateusername() { var x=document.forms["registration"]["username"].value; if (x == null || x== "") { document.getelementbyid("yy").innerhtml = "why won't work grrrr"; alert("first name must filled out"); } } </script> 

the problem not stopping form submission event. in case can done via return validateusername() in onclick , return false in validateusername function on failure:

http://jsfiddle.net/rqudt/

however better use standard event registration (via addeventlistener , use event object's preventdefault method stop default click behavior.

http://jsfiddle.net/rqudt/1/