javascript - Replace text nodes -


i'm trying replace these 2 text nodes each other. suppose correction verification. suppose see if input correct after focus on input.

this html

<body> <form action="" method="post" name="myform">         <fieldset>             <legend>lab group form</legend>                 <label for="first_name">first name:</label>                 <br/>             <input id="first_name" type="text" name="first_name_text" value="" onblur="validatefirst()" />                     <br/><br/>           </fieldset> </form>    <div class="one" id="one"/>  <div class="two" id="two"/> </body>        function validatefirst() {         if (document.myform.first_name.value.length > 0) {             var 1 = document.createtextnode("correct");             var one_container = document.getelementbyid("one");          } else {             var 2 = document.createtextnode("incorrect.");             var two_container = document.getelementbyid("two");             two_container.appendchild(two);         }     } 

this css file:

.one {      color:#000;      position:absolute;      top:400px; }   .two{      color:#000;      font-family:arial, helvetica, sans-serif;      font-size:14px;      position: absolute;      top:400px;  }  

so if can me out great. please no jquery. thank

i'm not sure quite you're trying accomplish function-within-a-function. following something, not sure if it's want or not:

 <html> <head> <style> .one {      color:#000;      position:absolute;      top:200px; }   .two{      color:#000;      font-family:arial, helvetica, sans-serif;      font-size:14px;      position: absolute;      top:200px;  }  </style> </head> <body> <form action="" method="post" name="myform">         <fieldset>             <legend>lab group form</legend>                 <label for="first_name">first name:</label>                 <br/>             <input id="first_name" type="text" name="first_name_text" onchange="validatefirst()" />                     <br/><br/>           </fieldset> </form>    <div class="one" id="one"/>  <div class="two" id="two"/> </body> <script>     function validatefirst() {         if (document.getelementbyid("first_name").value.length > 0) {             var 1 = document.createtextnode("correct");             var one_container = document.getelementbyid("one");             one_container.appendchild(one);         } else {             var 2 = document.createtextnode("incorrect.");             var two_container = document.getelementbyid("two");             two_container.appendchild(two);         }     } </script> </body> </html> 

Comments