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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 3

您必须添加更改处理程序onDocumentReady，因为在选择下拉菜单中您没有输入任何内容，没有理由在keyup事件上添加处理程序

＆＃13;

$(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;
    });
});

＆＃13;

<!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>

＆＃13;

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

3 个答案: