javascript - 我必须制作一个可以运行一些简单 JavaScript 的网页，但我认为我的脚本没有运行

标签 javascript html css

这是完整的代码以及脚本。当我打开 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>

最佳答案

  • 首先，始终使用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> 就足够了。

  • 第三，在提到gross-field时有一个错字:<input id="grossfeild" type="text"></input>应该是 <input id="grossfield" type="text"></input> .
    仅供引用，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 - 我必须制作一个可以运行一些简单 JavaScript 的网页，但我认为我的脚本没有运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33985517/

上一篇：html - 如何使导航栏中均匀分布的元素不触及页面边缘？

下一篇：javascript - 更改 css 属性

相关文章：

javascript - 如何使用javascript获取另一个输入字段的值

javascript - Nodejs - 循环 JSON 以查找并替换字符串

html - 当元素位于其上方时，垂直导航栏会变长？

html - 使用数据 URI 下载多个文件

javascript - "You require appropriate loaders"，使用 react native 和 expo。应用程序无法在 web 上编译，但在 android 上运行

javascript - 获取列表中的第一个 DOM 元素

css - 如何在单个 DIV 中将 2 个图像居中

css - 复合缩放和旋转变换会扭曲内容

css - Internet Explorer 11 中的文本输入填充无法按预期工作

css - 跨度向 sibling 添加意外高度

©2024 IT工具网  联系我们