我必須制作一個可以運行一些簡單JavaScript的網頁，但是我認為我的腳本沒有運行

Question

這是完整的代碼，以及腳本。 當我打開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>

Answer 1

首先，請始終在table內部使用td ：

 <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標記中有一個錯字： <script type="text/javascript>">應該是<script type="text/javascript"> 。
（順便說一句，JavaScript是官方的標准腳本語言，因此<script>...</script>完全足夠。
第三，在提及Gross-field時有一個錯字： <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>

我必須制作一個可以運行一些簡單JavaScript的網頁，但是我認為我的腳本沒有運行

問題描述

1 個解決方案

解決方案1
3 2015-11-29 20:08:07

我必須制作一個可以運行一些簡單JavaScript的網頁，但是我認為我的腳本沒有運行

問題描述

1 個解決方案

解決方案1 3 2015-11-29 20:08:07

解決方案1
3 2015-11-29 20:08:07