为什么我的JavaScript代码不起作用？

Question

I create new.html and new.js files . 我创建了new.html和new.js文件。

new.html codes : 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>

And new.js codes: 和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;
    });
});

When I select a number, X not changed. 当我选择一个数字时，X不变。

For example I want replace number 30 with X when I select 5 in select section . 例如，当我在选择部分中选择5时，我想用X替换数字30。 But X not change . 但是X不变。 How can I do that ? 我怎样才能做到这一点？

Answer 1

your event bindings seem to be wrong... You need to bind to the change event on the select. 您的事件绑定似乎是错误的...您需要将select绑定到change事件。

I think this is what you want: 我认为这是您想要的：

  $('#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

You have to add the change handler onDocumentReady because in the select drop-down you don't type anything , has no sense to add the handler on keyup event 您必须在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