2010-12-03 83 views
0

我試圖用相互替換這兩個文本節點。它假設像是一個校正驗證。它應該做的是在關注另一個輸入之後查看輸入是否正確。替換文本節點

這是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 one = document.createTextNode("Correct"); 
      var one_container = document.getElementById("one"); 

     } else { 
      var two = document.createTextNode("Incorrect."); 
      var two_container = document.getElementById("two"); 
      two_container.appendChild(two); 
     } 
    } 

這是css文件:

.one { 
    color:#000; 
    position:absolute; 
    top:400px; 
} 


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

所以,如果你能幫助我,這將是巨大的。請不要jQuery。謝謝

+0

fieldset和兩個div都需要結束標記,甚至在您開始執行腳本之前。 – kennebec 2010-12-03 04:19:10

回答

0

我不太清楚你想用功能內功能來完成什麼。以下是做什麼,不知道它是否是你想要的:


<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 one = document.createTextNode("Correct"); 
      var one_container = document.getElementById("one"); 
      one_container.appendChild(one); 
     } else { 
      var two = document.createTextNode("Incorrect."); 
      var two_container = document.getElementById("two"); 
      two_container.appendChild(two); 
     } 
    } 
</script> 
</body> 
</html>