javascript - How to change a function from onblur, to onclick with submit button? -

here piece of code i'm trying make work submit button. works fine onblur, when try use onclick submit button doesn't work. how can that?

here html

name <br> <input size="16" placeholder="first name" id="firstname" name="firstname" type="text"> <br> <br>last name <br> <input placeholder="last name" name="lastname" id="lastname" type="text"> <br> <br> <button type="submit" id="submitbtn" name="submit">submit</button> 

here pure javascript

window.onload = function () {       document.getelementbyid("firstname").onblur = mandatoryfield;     document.getelementbyid("lastname").onblur = mandatoryfield;  }; // clear potential alert function clearalert() {      var redalert = document.getelementbyid("redalert");     if (redalert) {         document.body.removechild(redalert);     } } //reset white background function resetwhitebackground(elem) {     elem.parentnode.setattribute("style", "background-color: #ffffff");  }    function textalert(txt) {      // create alert node     var textnode = document.createtextnode(txt);     redalert = document.createelement("div");     redalert.setattribute("id", "redalert");     redalert.setattribute("class", "alert");     redalert.setattribute("style", "color: red");       // append node div , document     redalert.appendchild(textnode);     document.body.appendchild(redalert); }  function mandatoryfield() {       clearalert();      // check missing field   if (firstname.value.length == "" ) {         if (lastname.value.length == "") {       textalert("you must enter either first name or last name before submiting");         }     } else {  resetwhitebackground();      } } 

here live jsfiddle: http://jsfiddle.net/kyay5/

window.onload = function () {      document.getelementbyid("firstname").onblur = mandatoryfield;     document.getelementbyid("lastname").onblur = mandatoryfield;     document.getelementbyid("submitbtn").onclick = mandatoryfield;  }; 

http://jsfiddle.net/kyay5/1/