这是完整的代码以及脚本。当我打开html文件时,页面看起来像我想要的样子,但当我输入一个值并单击提交按钮时,没有任何反应。脚本中有什么问题,还是我错过了一些简单的错误?
<!DOCTYPE html>
<html>
<head>
<title>Question 10.10</title>
<style type="text/css">
table, table td { padding: 5px }
</style>
<script type="text/javascript>">
// initialize 4 rows 5 columns sales array
var counters = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
// function to collect and process sales slips
function submitSales()
{
var salary = 0; // current calculated salary
// Get values from XHTML form fields
var grossSales = parseInt( document.getElementById( "grossField" ).value );
// Validate user input gross
if ( isNaN( grossSales ) )
{
// Alert user to the error
window.alert( "Invalid gross entered!" );
return;
} // End while
// Calculate salary
salary = 200 + parseInt( ( .09 * grossSales ) );
// Increment the counter for the salary range
if ( salary >= 200 && salary <= 299 )
++counters[ 0 ];
if ( salary >= 300 && salary <= 399 )
++counters[ 1 ];
if ( salary >= 400 && salary <= 499 )
++counters[ 2 ];
if ( salary >= 500 && salary <= 599 )
++counters[ 3 ];
if ( salary >= 600 && salary <= 699 )
++counters[ 4 ];
if ( salary >= 700 && salary <= 799 )
++counters[ 5 ];
if ( salary >= 800 && salary <= 899 )
++counters[ 6 ];
if ( salary >= 900 && salary <= 999 )
++counters[ 7 ];
if ( salary >= 1000 )
++counters[ 8 ];
// output the results
displayResults();
// Reset fields in XHTML form
document.getElementById( "grossField" ).value = "0";
} // end function submitSales
// function to generate and display the weekly report
function displayResults()
{
var printoutTable = "<table border = \"1\">"; // this will hold the table to be output
printoutTable += "<tr><td colspan = \"2\" style = \"text-align: center\"><h1>Weekly Salary Range Report</h1></td></tr>";
printoutTable += "<tr><td>Range</td><td>Number of Employees</td></tr>";
printoutTable += "<tr><td>$200-299</td><td>" + counters[ 0 ] + "</td></tr>";
printoutTable += "<tr><td>$300-399</td><td>" + counters[ 1 ] + "</td></tr>";
printoutTable += "<tr><td>$400-499</td><td>" + counters[ 2 ] + "</td></tr>";
printoutTable += "<tr><td>$500-599</td><td>" + counters[ 3 ] + "</td></tr>";
printoutTable += "<tr><td>$600-699</td><td>" + counters[ 4 ] + "</td></tr>";
printoutTable += "<tr><td>$700-799</td><td>" + counters[ 5 ] + "</td></tr>";
printoutTable += "<tr><td>$800-899</td><td>" + counters[ 6 ] + "</td></tr>";
printoutTable += "<tr><td>$900-999</td><td>" + counters[ 7 ] + "</td></tr>";
printoutTable += "<tr><td>$1000+</td><td>" + counters[ 8 ] + "</td></tr>";
printoutTable += "</table>";
// send the XHTML code to the div to display the table
document.getElementById( "salesPrintout" ).innerHTML = printoutTable;
}
</script>
</head>
<body>
<form action="">
<h1>Employee Sales</h1>
<td>Gross Sales: $</td>
<td>
<input id="grossfeild" type="text"></input>
</td>
<input type="button" onclick="submitSales()" Value="Submit"></input>
<div id="salesPrintout">
<table borders="1">
<h1>Weekly Sales Report</h1>
<tr>
<td>Range</td>
<td>Number of Employees</td>
</tr>
<tr>
<td>$200-299</td>
<td>0</td>
</tr>
<tr>
<td>$300-399</td>
<td>0</td>
</tr>
<tr>
<td>$400-499</td>
<td>0</td>
</tr>
<tr>
<td>$500-599</td>
<td>0</td>
</tr>
<tr>
<td>$600-699</td>
<td>0</td>
</tr>
<tr>
<td>$700-799</td>
<td>0</td>
</tr>
<tr>
<td>$800-899</td>
<td>0</td>
</tr>
<tr>
<td>$900-999</td>
<td>0</td>
</tr>
<tr>
<td>$1000+</td>
<td>0</td>
</tr>
</body>
</html>
答案 0 :(得分:3)
首先,始终在td
内使用table
:
<table>
<tr>
<td>Gross Sales: $</td>
<td><input id="grossfield" type="text"></input></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick="submitSales()" Value="Submit"></input></td>
</tr>
</table>
第二次,您在脚本标记中输入了错字:
<script type="text/javascript>">
应为<script type="text/javascript">
(顺便说一下,javascript是官方的标准脚本语言,所以<script>...</script>
就足够了。
第三,在提及总字段时会出现拼写错误:<input id="grossfeild" type="text"></input>
应为<input id="grossfield" type="text"></input>
。
Fyi,javascript中的类和id不区分大小写,所以可以使用document.getElementById( "grossField" )
引用你的。
第四,需要关闭HTML代码。
这是一个正在运行的例子:
// initialize 4 rows 5 columns sales array
var counters = [0, 0, 0, 0, 0, 0, 0, 0, 0];
// function to collect and process sales slips
function submitSales()
{
var salary = 0; // current calculated salary
// Get values from XHTML form fields
var grossSales = parseInt(document.getElementById("grossfield").value);
// Validate user input gross
if (isNaN(grossSales))
{
// Alert user to the error
window.alert("Invalid gross entered!");
return;
} // End while
// Calculate salary
salary = 200 + parseInt((.09 * grossSales));
// Increment the counter for the salary range
if (salary >= 200 && salary <= 299)
++counters[ 0 ];
if (salary >= 300 && salary <= 399)
++counters[ 1 ];
if (salary >= 400 && salary <= 499)
++counters[ 2 ];
if (salary >= 500 && salary <= 599)
++counters[ 3 ];
if (salary >= 600 && salary <= 699)
++counters[ 4 ];
if (salary >= 700 && salary <= 799)
++counters[ 5 ];
if (salary >= 800 && salary <= 899)
++counters[ 6 ];
if (salary >= 900 && salary <= 999)
++counters[ 7 ];
if (salary >= 1000)
++counters[ 8 ];
// output the results
displayResults();
// Reset fields in XHTML form
document.getElementById("grossfield").value = "0";
} // end function submitSales
// function to generate and display the weekly report
function displayResults()
{
var printoutTable = "<table border = \"1\">"; // this will hold the table to be output
printoutTable += "<tr><td colspan = \"2\" style = \"text-align: center\"><h1>Weekly Salary Range Report</h1></td></tr>";
printoutTable += "<tr><td>Range</td><td>Number of Employees</td></tr>";
printoutTable += "<tr><td>$200-299</td><td>" + counters[ 0 ] + "</td></tr>";
printoutTable += "<tr><td>$300-399</td><td>" + counters[ 1 ] + "</td></tr>";
printoutTable += "<tr><td>$400-499</td><td>" + counters[ 2 ] + "</td></tr>";
printoutTable += "<tr><td>$500-599</td><td>" + counters[ 3 ] + "</td></tr>";
printoutTable += "<tr><td>$600-699</td><td>" + counters[ 4 ] + "</td></tr>";
printoutTable += "<tr><td>$700-799</td><td>" + counters[ 5 ] + "</td></tr>";
printoutTable += "<tr><td>$800-899</td><td>" + counters[ 6 ] + "</td></tr>";
printoutTable += "<tr><td>$900-999</td><td>" + counters[ 7 ] + "</td></tr>";
printoutTable += "<tr><td>$1000+</td><td>" + counters[ 8 ] + "</td></tr>";
printoutTable += "</table>";
// send the XHTML code to the div to display the table
document.getElementById("salesPrintout").innerHTML = printoutTable;
}
table, table td { padding: 5px }
<!DOCTYPE html>
<html>
<head>
<title>Question 10.10</title>
</head>
<body>
<form action="">
<h1>Employee Sales</h1>
<table>
<tr>
<td>Gross Sales: $</td>
<td><input id="grossfield" type="text" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick="submitSales()" Value="Submit" /></td>
</tr>
</table>
<div id="salesPrintout">
<table border="1">
<h1>Weekly Sales Report</h1>
<tr>
<td>Range</td>
<td>Number of Employees</td>
</tr>
<tr>
<td>$200-299</td>
<td>0</td>
</tr>
<tr>
<td>$300-399</td>
<td>0</td>
</tr>
<tr>
<td>$400-499</td>
<td>0</td>
</tr>
<tr>
<td>$500-599</td>
<td>0</td>
</tr>
<tr>
<td>$600-699</td>
<td>0</td>
</tr>
<tr>
<td>$700-799</td>
<td>0</td>
</tr>
<tr>
<td>$800-899</td>
<td>0</td>
</tr>
<tr>
<td>$900-999</td>
<td>0</td>
</tr>
<tr>
<td>$1000+</td>
<td>0</td>
</tr>
</table>
</div>
</form>
</body>
</html>