想不通爲什麼appendChild返回undefined

我想不通爲什麼appendChild返回undefined。想不通爲什麼appendChild返回undefined

我也試過t.previousSibling.appendChild(document.createElement('span'));，它返回「previousSibling undefined」。

我需要添加一個span類型的「錯誤」類型的元素到span中，並使用標籤的textnode。因此，我遍歷所有輸入並查找一個空的，如果它是空的，它應該在輸入標籤旁邊添加「* required」消息。我有很多想法，但不清楚問題出在哪裏。謝謝你的幫助！

var obj = { 

inputs: document.getElementsByTagName("input"), 
btn: document.getElementById('submit'), 

init : function() { 

    obj.btn.onclick = obj.submitForm(); 

    }, 

submitForm : function() { 


    for (var i=0; i<obj.inputs.length; i++) { 

     if (obj.inputs[i].value==="") { 

     switch(obj.inputs[i].name) { 

      case "fname" : match=true; obj.error("fname"); 
      case "lname" : match=true; obj.error("lname"); 

      } 
     } 
    } 
}, 


error : function(t) { 

     var err = "*required"; 
     var j = t.previousSibling.appendChild(document.createElement('span')); 
     j.className = "error"; 
     j.appendChild(document.createTextNode(err)); 

    } 
} 


Here is HTML: 

<head> 
<title>Homework 9 JavaScript form</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
<form method="post" action=""> 
<div> 
<ul> 
<li><label>First Name</label><input type="text" id="fname" name="fname" size="30" /></li> 
<li><label>Last Name</label><input type="text" name="lname" size="30" /></li> 
<li><label>Phone</label><input type="text" name="phone" size="30" /></li> 
<li><label>Email</label><input type="text" name="email" size="30" /></li> 
<li><input type="submit" name="submit" id="submit" value="Submit" /> 
</ul> 
</div> 
</form> 
<script type="text/javascript" src="hw9.js"></script> 
<script type="text/javascript">obj.init();</script> 
</body> 
</html>

來源

2012-04-01 Scott Floyd

的error方法似乎期待DOM對象作爲參數，但你傳遞給它的字符串。至少，這些字符串可能沒有previousSibling屬性，該屬性將具有appendChild方法。

您可以沿着您已覈對對象傳遞：

switch(obj.inputs[i].name) { 
    case "fname" : // fall-through 
    case "lname" : match=true; obj.error(obj.inputs[i]); break; 
}

或者，你可以改變error期待的字符串。無論是一個id - 如果你給一個<input name="lname">id="lname"：

error : function(id) { 
    var t = document.getElementById(id); 

    // ... 
}

或者由name：

error : function(name) { 
    var t = document.getElementsByName(name)[0]; 

    // ... 
}

此外，一定要break每個case你不想落空成後續案例：

case "fname" : match=true; obj.error("fname"); break; 
case "lname" : match=true; obj.error("lname"); break;

來源

2012-04-01 21:46:48

非常感謝你，這是有道理的。希望有一天，當我知道我在做什麼時，我也可以幫助其他人;）乾杯。 – 2012-04-01 22:19:09

更新：我克服了這個駝峯，現在我應該能夠從這裏運作。在這堂課還活着一週... – 2012-04-02 00:08:36

不是你的問題的答案，而是一個建議。在行：

> btn: document.getElementById('submit'),

切勿使用的ID或名稱的「提交」任何形式的控制，它會掩蓋表單提交方法，所以你不能把它。給一個提交按鈕一個名字的唯一原因是如果表單中有多個，並且您想知道用於提交表單的是哪個。

而且，在該行：

>  obj.btn.onclick = obj.submitForm();

你是好得多的監聽器附加到表單的onSubmit屬性設置，而不是提交按鈕的onclick屬性。你應該分配一個函數參考，而不是結果，所以：

obj.btn.form.onsubmit = obj.submitForm;

來源

2012-04-01 22:48:55 RobG

很酷，謝謝，這也有幫助！ – 2012-04-01 22:57:24

想不通爲什麼appendChild返回undefined

回答

相關問題