遇到一个可能有点难以解释的问题，所以我会尽力而为。我一直在尝试创建一个简单的 JavaScript 待办事项应用程序。我在页面上有多个表格，它们都对应一个单独的日期（1 月 1 日、1 月 2 日等）。当然，每个表单都有输入，在这种情况下，每个表单都有 4 个子节点（内容、位置、时间和提交按钮）。
这是HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta description="Gallery, Javascript">
<link rel="stylesheet" href="todo.css" media="screen" />
<title>Creating a simple to-do app</title>
</head>
<body>
<div id="outerWrapper">
<div id="wrapper">
<header id="header">
<h1>A simple to-do app</h1>
</header>
<section id="todo">
<div class="oneDateSection">
<div class="orangeBox">
<h1>January 1st, 2013</h1>
</div>
<div class="oneDateSectionList">
<form method="POST" class="formList" action="">
<div><label for="what">What:</label><input type="text" name="what" class="what" id="what" /></div>
<div><label for="where">Where:</label><input type="text" name="where" class="where" id="where" /></div>
<div><label for="what">When:</label><input type="text" name="when" class="when" id="when"/></div>
<div><input type="submit" value="Add!" name="submit" class="submit" /></div>
</form>
</div>
</div>
<div class="oneDateSection">
<div class="orangeBox">
<h1>January 2nd, 2013</h1>
</div>
<div class="oneDateSectionList">
<form method="POST" class="formList" action="">
<div><label for="what">What:</label><input type="text" name="what" class="what" id="what" /></div>
<div><label for="where">Where:</label><input type="text" name="where" class="where" id="where" /></div>
<div><label for="what">When:</label><input type="text" name="when" class="when" id="when"/></div>
<div><input type="submit" value="Add!" name="submit" class="submit" /></div>
</form>
</div>
</div>
<div class="oneDateSection">
<div class="orangeBox">
<h1>January 3rd, 2013</h1>
</div>
<div class="oneDateSectionList">
<form method="POST" class="formList" action="">
<div><label for="what">What:</label><input type="text" name="what" class="what" id="what" /></div>
<div><label for="where">Where:</label><input type="text" name="where" class="where" id="where" /></div>
<div><label for="what">When:</label><input type="text" name="when" class="when" id="when"/></div>
<div><input type="submit" value="Add!" name="submit" class="submit" /></div>
</form>
</div>
</div>
<div class="oneDateSection">
<div class="orangeBox">
<h1>January 4th, 2013</h1>
</div>
<div class="oneDateSectionList">
<form method="POST" class="formList" action="">
<div><label for="what">What:</label><input type="text" name="what" class="what" id="what" /></div>
<div><label for="where">Where:</label><input type="text" name="where" class="where" id="where" /></div>
<div><label for="what">When:</label><input type="text" name="when" class="when" id="when"/></div>
<div><input type="submit" value="Add!" name="submit" class="submit" /></div>
</form>
</div>
</div>
<div class="oneDateSection">
<div class="orangeBox">
<h1>January 5th, 2013</h1>
</div>
<div class="oneDateSectionList">
<form method="POST" class="formList" action="">
<div><label for="what">What:</label><input type="text" name="what" class="what" id="what" /></div>
<div><label for="where">Where:</label><input type="text" name="where" class="where" id="where" /></div>
<div><label for="what">When:</label><input type="text" name="when" class="when" id="when"/></div>
<div><input type="submit" value="Add!" name="submit" class="submit" /></div>
</form>
</div>
</div>
<div class="oneDateSection">
<div class="orangeBox">
<h1>January 6th, 2013</h1>
</div>
<div class="oneDateSectionList">
<form method="POST" class="formList" action="">
<div><label for="what">What:</label><input type="text" name="what" class="what" id="what" /></div>
<div><label for="where">Where:</label><input type="text" name="where" class="where" id="where" /></div>
<div><label for="what">When:</label><input type="text" name="when" class="when" id="when"/></div>
<div><input type="submit" value="Add!" name="submit" class="submit" /></div>
</form>
</div>
</div>
<div class="oneDateSection">
<div class="orangeBox">
<h1>January 7th, 2013</h1>
</div>
<div class="oneDateSectionList">
<form method="POST" class="formList" action="">
<div><label for="what">What:</label><input type="text" name="what" class="what" id="what" /></div>
<div><label for="where">Where:</label><input type="text" name="where" class="where" id="where" /></div>
<div><label for="what">When:</label><input type="text" name="when" class="when" id="when"/></div>
<div><input type="submit" value="Add!" name="submit" class="submit" /></div>
</form>
</div>
</div>
</section>
</div>
</div>
<script src="todo2.js"></script>
</body>
</html>
这是JavaScript：
var utilities = {
$: function(id) {
return document.getElementById(id);
},
addEvent: function(obj, type, fn) {
if (obj && obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else if (obj && obj.attachEvent) {
obj.attachEvent("on" + type, fn);
}
}
}
function removeErrorMessage(id) {
'use strict';
var span = utilities.$(id + 'Error');
if(span) {
span.parentNode.removeChild(span);
}
}
function addErrorMessage(id, msg) {
'use strict';
var elem = utilities.$(ID);
var newID = id + "Error";
var span = utilities.$(newID);
if(span) {
span.firstChild.value = msg;
} else {
span = document.createElement("span");
span.setAttribute("class", "error");
span.setAttribute("id", newID);
span.appendChild(document.createTextNode(msg));
elem.parentNode.appendChild(span);
}
}
function storeInformation(e) {
'use strict';
if (e == "undefined") {
e = window.event;
}
//Reference what, where and when input elements in form that calls this function
var whatElements = this.getElementsByClassName("what");
var whereElements = this.getElementsByClassName("where");
var whenElements = this.getElementsByClassName("when");
//Create object to store information
var information = {
what: whatElements[0].value,
where: whereElements[0].value,
when: whenElements[0].value,
postedDate: new Date()
}
//Create HTML that will display information from form
var output = "What: " + information.what + "<br />" +
"Where: " + information.where + "<br />" +
"When: " + information.when + "<br />" +
"Posted: " + information.postedDate;
//So you have TWO options. Either you have filled it out, or you haven't.
//First case, and main IF: Some part of the form hasn't been filled out
if ( (information.what == "") || (information.where == "") || (information.when == "") ) {
//If the 'what' form field is empty
if (information.what == "") {
addErrorMessage(this.what, "Please enter what!");
} else {
removeErrorMessage(this.getElementById("what"));
}
//If the 'where' form field is empty
if(information.where == "") {
addErrorMessage(this.where, "Please enter where!");
} else {
removeErrorMessage(this.getElementById("where"));
}
//If the 'when' form field is empty
if(information.when == "") {
addErrorMessage(this.when, "Please enter when!");
} else {
removeErrorMessage(this.getElementById("when"));
}
//OR, all the form fields HAVE BEEN FILLED OUT.
} else {
if (paragraph) {
paragraph.innerHTML = output;
} else {
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "outputDiv");
var paragraph = document.createElement("p");
paragraph.setAttribute("class", "outputParagraph");
newDiv.appendChild(paragraph);
paragraph.innerHTML = output;
//Append everything
whatElements[0].parentNode.parentNode.appendChild(newDiv);
}
}
//Prevent form from submitting
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
return false;
}
window.onload = function() {
'use strict';
var allForms = document.getElementsByClassName("formList");
for (var i = 0, count = allForms.length; i < count; i++) {
utilities.addEvent(allForms[i], "submit", storeInformation);
}
}
现在，我确定可能存在布局问题，并且这里的 JS 不正确（如果您能指出这一点，那将是一个奖励）。但是，我的问题是this关键字。在 JS 中，我使用 this.what、this.where 和 this.when 来引用表单的输入 ID。我使用“this”是因为页面上有多个表单，我提供了一个事件侦听器，因此，在实际使用中，无论最终用户使用什么表单，它都会存储正确的信息。
问题出在我的“addErrorMessage”函数中，据说“elem”为空。在使用 Chrome 的调试器逐步完成该过程后，作为参数传递给 addErrorMessage 的 ID 仍然引用表单，但由于某种原因没有存储在 elem 中。
例如，我在想“this.what”不能转移到另一个函数？即，引用其自身属性的表单不能在另一个函数中使用？我不确定问题是什么。Chrome 会正确告诉我“this.what”引用的值，并传递给“addErrorMessage”，但不会尝试将此信息存储在“elem”中。
任何人都可以帮忙吗？我现在不是一个 JS 人，所以请对我放轻松。为长长的问题道歉！
干杯。