2010-12-03 2 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

Для набора полей и обоих разделов нужны концевые теги, прежде чем вы начнете с скрипта. – 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> 
Смежные вопросы