替换文本节点

时间:2010-12-03 03:26:08

标签: javascript css forms dom

我正在尝试将这两个文本节点相互替换。它假设像校正验证。它的假设是在关注另一个输入后查看输入是否正确。

这是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。谢谢

1 个答案:

答案 0 :(得分: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>