Question

我无法弄清楚为什么appendChild返回未定义。

我也试过t.previousSibling.appendChild(document.createElement('span'));，返回“previousSibling undefined”。

我需要在span中添加一个带有“error”类的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>

Answer 1

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;您不希望落入后续案例：

{{1}}

Answer 2

不是您的问题的答案，而是建议。在线：

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

永远不要使用ID或NAME进行任何表单控制＆＃34;提交＆＃34;，它会掩盖表单的提交方法，因此您无法调用它。给提交按钮命名的唯一原因是，如果表单中有多个，并且您想知道哪个用于提交表单。

另外，在行中：

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

最好将监听器附加到表单的onsubmit属性，而不是提交按钮的onclick属性。你应该分配一个函数引用，而不是结果，所以：

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

无法弄清楚为什么appendChild返回undefined

2 个答案: