javascript - 替换文本节点

标签 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。谢谢

最佳答案

我不太确定您尝试使用函数内函数来完成什么。下面做了一些事情,不确定它是否是你想要的:


<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>

关于javascript - 替换文本节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4342183/

相关文章:

javascript - jQuery change() 不适用于第一个 onclick 事件,但适用于下一次连续点击

javascript - Chart.js 不显示在 Bootstrap 选项卡面板中

javascript - 使用 javascript 调整 Cycle2 的大小让事情变得紧张

forms - 从PDF创建可填充的PDF

javascript - 在 JavaScript 中将 %20 替换为空格

javascript - jQuery 返回的 DOM 元素的父级

javascript - 通过 JavaScript 动态触发命名空间方法

javascript - JS在页面中进行字符串替换

jquery - 尝试在动态表单上设置焦点输入标签的样式

ruby-on-rails - Rails 4 形式 : checkbox not saving value to database