I would like to get the a submit button using getElementsByTagName but I must be doing something wrong.

 <p id=ptag>Want to find out if this works</p>     



 <button>The Button</button>



 <form>

 First name: <input type=text name=firstname><br>

 Last name: <input type=text name=lastname><br>

 <input type=checkbox name=yes value=yes>A checkbox<br> 

 <input type=submit value=Login>

 </form> 

in the above HTML snippet, If I use the below function, getting the button works yet getting the submit button does not.

 window.onload = theFunction;



 function theFunction(){



 document.getElementsByTagName(BUTTON)[0].setAttribute(onclick, theOtherFunction());



 document.getElementsByTagName(INPUT)[3];.setAttribute(onclick, theOtherFunction());



 }

What am I doing wrong?

 function theOtherFunction(){



   document.getElementById(ptag).style.color = blue;



 }

I added theOtherFunction() to my question because all my little experiment is doing is changing that <p> color to blue. With the button, it stays blue. With the submit button, it quickly turns blue and then goes back to black. What is the difference and how can I use the submit button to retain changes?