所以我想首先说这是我第一次与JS打交道，我正在为我的班级做一个项目。
我必须创建一个带有三个按钮的表单，一个用于存储表单数据，一个用于显示表单数据，另一个用于清除表单。我一直在研究各方面，试图弄清楚我做错了什么。这是一个在线课程，所以除了这里的书之外没有太多的信息，这里是你的任务。
这是我到目前为止所有的想法，为什么我的商店和显示按钮不起作用，还有一种方法我可以检查商店按钮是否正确地将数据存储在数组中，它只是显示按钮不工作？！
我正在撕开我的头发，对不起是可怕的。
<DOCTYPE HTML!>
<html>
<head>
<style>
form {border-style: inset;
border-color: blue;
height: 360px;
width: 775px;
margin: auto;
}
</style>
<script>
var fullNames = new Array(100);
var dates = new Array(100);
var opinions = new Array(100);
var numOfRatings = 0;
function validateData()
{
var fullNameStr = document.getElementById("FullName").value;
var dateStr = document.getElementById("Date").value;
var opinionStr = document.getElementById("opinion").value;
{
var dateVal = dateStr;
var dateParts = dateVal.split("/");
if (parseInt(dateParts[2]) < "2014")
{
alert("Invalid date!");
}
else
{
fullNames[numOfRatings] = fullNameStr;
dates[numOfRatings] = dateStr;
opinions[numOfRatings] = opinionStr;
numOfRatings++;
document.getElementById("FullName").value = "";
document.getElementById("Date").value = "";
document.getElementById("opinion").value = "";
}
}
}
function displayData()
{
var col;
var pos;
document.getElementById("list").value = "FULL NAME DATE RATING\n";
for (pos = 0; pos < numOfRatings; pos++)
{
document.getElementById("list").value += fullNames[pos];
for (col = fullNames[pos].length; col <= 25; col++)
document.getElementById("list").value += " ";
document.getElementById("list").value += dates[pos];
for (col = dates[pos].length; col <= 15; col++)
document.getElementById("list").value += " ";
document.getElementById("list").value += opinions[pos]"\n";
}
}
//Clear data function
function clearData()
{
var pos;
for (pos = 0; pos < numOfRatings; pos++)
{
fullNames[pos] = "";
dates[pos] = "";
opinions[pos] = "";
}
numOfRatings = 0;
}
</script>
</head>
<body>
<center>
<font size="10px"><h1>Internet Technologies Membership</font>
</center>
<b><hr></hr></b>
</h1>
<form name ="ratingForm">
<table cellpadding="10">
<td>
<tr>
<td>Full Name:</td>
<td><input type="text" id="FullName" name="FullName"></td>
<td>Date:</td>
<td><input type="date" id="Date" name="Date"></td>
<td>Opinion:</td>
<td><select name="opinion" id="opinion">
<option value="excellent">Excellent</option>
<option value="verygood">Very Good</option>
<option value="good">Good</option>
<option value="fair">Fair</option>
<option value="poor">Poor</option>
<option value="verybad">Very Bad</option>
</select></td>
</table>
<br>
<center>
<td><textarea name="list" id="list" rows="10" cols="100">
</textarea>
<br>
<br>
<input type="button" value="RATE" onClick="validateData();">
<input type="button" value="DISPLAY" onClick="displayData();">
<input type="reset" value="CLEAR" onClick="clearData();">
<br>
</center>
</form>
</body>
</html>
答案 0 :(得分：1)
此行的语法不正确
document.getElementById("list").value += opinions[pos]"\n";
你忘记了+号
document.getElementById("list").value += opinions[pos]+"\n";
要查看JS错误，请右键单击您的页面，如果您正在使用chrome，请单击Inspect Element-＆gt; Console。它会告诉您页面正在抛出的错误。
答案 1 :(得分：0)
你有很多错误：
您的文档类型无效。您的HTML在H1标签周围被破坏了。表格标签未关闭。
您需要在费率函数中进行验证。
你在显示功能中缺少一个+。
以下是完整的工作代码，其中包含有关修复程序的注释以及如何在将来进行自我调试。
form {
border-style: inset;
border-color: blue;
height: 360px;
width: 775px;
margin: auto;
}<!--
broken html.
Use a tool to validate your html and make it "pretty" or "tidy" for you.
-->
<h1 style="text-align:center; border-bottom:1px solid #999999">Internet Technologies Membership</h1>
<!--
An HTML validator would have told you <font> and <center> are depcrecated. Replaced with css.
-->
<form name="ratingForm">
<table cellpadding="10">
<td>
<tr>
<td>Full Name:</td>
<td>
<input type="text" id="FullName" name="FullName">
</td>
<td>Date:</td>
<td>
<input type="date" id="Date" name="Date">
</td>
<td>Opinion:</td>
<td>
<select name="opinion" id="opinion">
<option value="excellent">Excellent</option>
<option value="verygood">Very Good</option>
<option value="good">Good</option>
<option value="fair">Fair</option>
<option value="poor">Poor</option>
<option value="verybad">Very Bad</option>
</select>
</td>
</tr>
</table>
<br>
<center>
<td>
<textarea name="list" id="list" rows="10" cols="100">
</textarea>
<br>
<br>
<input type="button" value="RATE" onclick="validateData();">
<input type="button" value="DISPLAY" onclick="displayData();">
<input type="reset" value="CLEAR" onclick="clearData();">
<br>
</center>
<!-- add missing end form tag -->
</form>
<!-- when javascript isn't working, put different blocks inside of seperate script tags.
If there is an error in one everything inside the script tag wont work.
Using seperate script tags you find out which block of code isn't working.
Also, look in web developer console for errors in the console tab.
-->
<script>
var fullNames = new Array(100);
var dates = new Array(100);
var opinions = new Array(100);
var numOfRatings = 0;
</script>
<!-- put validateData() in its own script tag to isolate it because it wasn't working. -->
<script>
function validateData() {
//console.log('validating data'); // use console.log to see what code is executing
var fullNameStr = document.getElementById("FullName").value;
var dateStr = document.getElementById("Date").value;
var opinionStr = document.getElementById("opinion").value;
//console.log('validating data 1'); // making sure the getters didn't break anything.
// add validation for name and opinion.
//If they are null then display won't work because a string + null==null;
if(!fullNameStr||!opinionStr|| !dateStr) {
alert("Please complete all fields.");
return;
}
var dateVal = dateStr;
var dateParts = dateVal.split("/");
// need to validate the dataParts array has at least two items.
// also SHOULD be making sure it is a validate date.
if (dateParts.length<3 || parseInt(dateParts[2]) < "2014") {
alert("Invalid date!");
} else {
fullNames[numOfRatings] = fullNameStr;
dates[numOfRatings] = dateStr;
opinions[numOfRatings] = opinionStr;
numOfRatings++;
document.getElementById("FullName").value = "";
document.getElementById("Date").value = "";
document.getElementById("opinion").value = "";
}
}
</script>
<!-- put displayData() in its own script tag to isolate it because it wasn't working. -->
<script>
function displayData() {
var col;
var pos;
document.getElementById("list").value = "FULL NAME DATE RATING\n";
for (pos = 0; pos < numOfRatings; pos++) {
document.getElementById("list").value += fullNames[pos];
for (col = fullNames[pos].length; col <= 25; col++)
document.getElementById("list").value += " ";
document.getElementById("list").value += dates[pos];
for (col = dates[pos].length; col <= 15; col++)
document.getElementById("list").value += " ";
//broken code, add + after opinions[pos]
document.getElementById("list").value += opinions[pos] + "\n";
}
}
</script>
<!-- put clearData() in its own script tag to isolate it because it wasn't working. -->
<script>
//Clear data function
function clearData() {
var pos;
for (pos = 0; pos < numOfRatings; pos++) {
fullNames[pos] = "";
dates[pos] = "";
opinions[pos] = "";
}
numOfRatings = 0;
}
</script>
答案 2 :(得分：-1)
我认为您可以将displayData()修改为：
function displayData() {
var col;
var pos;
var listElement = document.getElementById("list");
listElement.value = "FULL NAME DATE RATING\n";
for (pos = 0; pos < numOfRatings; pos++) {
listElement.value += fullNames[pos] + " ".repeat(24 - fullNames[pos].length);
listElement.value += dates[pos] + " ".repeat(16 - dates[pos].length);
listElement.value += opinions[pos] + "\n";
}
}
repeat()功能。