Question

我有我的php类的项目，我必须输入名字，姓氏，电子邮件和电话号码，输出返回确切的值。（但我只会将＆＃39;名字＆＃39;代码用于编辑）。

我有一个html函数，可以从＆＃39; onsubmit＆＃39;在里面

<script>
function validate3(){
alert ("1validate3 called");
var elemFnameSpan = document.createElement("span");
var elemFnameBr = document.getElementById("idFnameBr");
var elemFnameBrParent = elemFnameBr.parentNode;

elemFnameBrParent.insertBefore(elemFnameSpan,elemFnameBr);
elemFnameSpan.id = "idFnameErr";
elemFnameSpan.style.color="red";
elemFnameSpan.innerHTML="";

var elemFname=document.getElementById("idFname");
var elemFnameValue = elemFname.value;

var errorFlag=false;

if (elemFnameValue == null || elemFnameValue ==""){
    elemFnameSpan.innerHTML ="required field";
        return false;
}
else{
    elemFnameSpan.innerHTML="";
}
if(errorFlag==true){
    return false;
}
return true;
}
</script>


<form onsubmit="return validate3()" action = "ContactInfo.php">
First Name<span style="color:red">*</span>
<input type="text" name = "Fname" size = "10" id="idFname" onchange="eraseFnameErr()"/>
<br id="idFnameBr" >
<input type="submit" name="submit" value="Submit" /><br>

该函数创建一个节点＆＃39; elemFnameSpan＆＃39;在id＆＃39; idFnameBr＆＃39;之前。如果名字的textinput为空，则elemFnameSpan.innerHTML输出＆＃34;必填字段＆＃34;，并在＆＃39; onsubmit＆＃39;上输出false。。我的问题是，每次调用提交按钮时输出都不会刷新，因此需要字段＆＃39;输出彼此相邻。

我很难解决这种情况，并且每次调用新函数时都试图删除前一个子节点，但这对我来说还不起作用。

Answer 1

一旦附加了任何DOM节点，除非您明确地删除它，否则它永远不会删除。我可以建议两种方法来实现你的目标。

首先，您可以将节点保存在全局变量中。

var elemFnameSpan;
function validate3(){
    alert ("1validate3 called");
    if (!elemFnameSpan) {
        elemFnameSpan = document.createElement("span");
    }

    var elemFnameBr = document.getElementById("idFnameBr");
    var elemFnameBrParent = elemFnameBr.parentNode;

或者，将ID设置为elemFnameSpan，并在每次提交表单时找到它。

function validate3(){
    alert ("1validate3 called");
    var elemFnameSpan = document.getElementById('whatever_you_want');
    if (!elemFnameSpan) {
        elemFnameSpan = document.createElement("span");
        elemFnameSpan.setAttribute('id', 'whatever_you_want');
    }

    var elemFnameBr = document.getElementById("idFnameBr");
    var elemFnameBrParent = elemFnameBr.parentNode;

Answer 2

如果你已经使用getElementById抓住它，你需要检查你是否已经创建了span元素，如果你还没有创建它。

//This is an "if" shortcut, if getElementById returns null
//the code in right side will execute and the return value
//will be put in eleFnameSpan
var eleFnameSpan = document.getElementById("idFnameErr") || document.createElement("span");
var elemFnameBr = document.getElementById("idFnameBr");

//Check parentNode on elemFnameBr if it is null/undefined then it hasnt
//been added to the dom yet
if(!elemFnameBr.parentNode){
    //No need to store the parentNode (unless needing it else were in code)
    elemFnameBr.parentNode.insertBefore(elemFnameSpan,elemFnameBr);
    elemFnameSpan.id = "idFnameErr";
    elemFnameSpan.style.color="red";
    elemFnameSpan.innerHTML="";
}

其余代码可以保持不变

正在发生的事情是你只是在每次点击时创建一个新的跨度，并且因为在每次点击时你都会添加一个新的跨度并编辑一个新的跨度而不是原始的跨度，你不断将新的消息堆叠在一起。

即使在函数退出后，在子函数中创建的节点是否仍然有效？

2 个答案: