為什么我的JavaScript代碼不起作用？

Question

我創建了new.html和new.js文件。

new.html代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="new.js"></script>
        <title>Untitled Document</title>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            td {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td><span id="first">6</span></td>
                <td>
                    <select id="seconde">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </td>
                <td><span id="third">X</span></td>
            </tr>
        </table>
    </body>
</html>

和new.js代碼：

$(document).keyup(function () {
    $(document).change(function () {
        var first= document.getElementById('first').innerHTML;
        var seconde= document.getElementById('seconde').value;
        var third= parseInt(first) * parseInt(seconde);
        document.getElementById('third').innerHTML = third;
    });
});

當我選擇一個數字時，X不變。

例如，當我在選擇部分中選擇5時，我想用X替換數字30。 但是X不變。 我怎樣才能做到這一點？

Answer 1

您的事件綁定似乎是錯誤的...您需要將select綁定到change事件。

我認為這是您想要的：

  $('#seconde').change(function () { var first= document.getElementById('first').innerHTML; var seconde= document.getElementById('seconde').value; var third= parseInt(first) * parseInt(seconde); document.getElementById('third').innerHTML = third; });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <table> <tr> <td><span id="first">6</span></td> <td> <select id="seconde"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </td> <td><span id="third">X</span></td> </tr> </table>

Answer 2

 $('#seconde').on('change',function () { var first= document.getElementById('first').innerHTML; var seconde= document.getElementById('seconde').value; var third= parseInt(first) * parseInt(seconde); document.getElementById('third').innerHTML = third; });

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="new.js"></script> <title>Untitled Document</title> <style> table { border-collapse: collapse; width: 100%; } td { border: 1px solid black; } </style> </head> <body> <table> <tr> <td><span id="first">6</span></td> <td> <select id="seconde"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </td> <td><span id="third">X</span></td> </tr> </table> </body> </html>

Answer 3

您必須在onDocumentReady上添加更改處理程序，因為在選擇下拉列表中您無需輸入任何內容，因此沒有必要在keyup事件上添加處理程序

 $(document).ready(function () { $(document).change(function () { var first= document.getElementById('first').innerHTML; var seconde= document.getElementById('seconde').value; var third= parseInt(first) * parseInt(seconde); document.getElementById('third').innerHTML = third; }); });

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> <title>Untitled Document</title> <style> table { border-collapse: collapse; width: 100%; } td { border: 1px solid black; } </style> </head> <body> <table> <tr> <td><span id="first">6</span></td> <td> <select id="seconde"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </td> <td><span id="third">X</span></td> </tr> </table> </body> </html>

為什么我的JavaScript代碼不起作用？

問題描述

3 個解決方案

解決方案1
2 2017-02-09 09:04:16

解決方案2
1 2017-02-09 09:05:33

解決方案3
0 已采納 2017-02-09 09:09:28

為什么我的JavaScript代碼不起作用？

問題描述

3 個解決方案

解決方案1 2 2017-02-09 09:04:16

解決方案2 1 2017-02-09 09:05:33

解決方案3 0 已采納 2017-02-09 09:09:28

解決方案1
2 2017-02-09 09:04:16

解決方案2
1 2017-02-09 09:05:33

解決方案3
0 已采納 2017-02-09 09:09:28