编辑JQuery文档时出现问题

Issue with editing JQuery document

本文关键字:问题 JQuery 文档 编辑      更新时间:2023-09-26

代码没有按照编写的方式运行。如果按钮点击部分(第一个警报后的3行)被删除,它可以正常工作。似乎对JS/JQ区域所做的任何编辑都会导致问题。这里可能出了什么问题?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Problem #2</title>
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>Problem #2:</h1>
        <form>
            <input type="number" placeholder="Enter your cents" min="0" />
            <input type="button" name="Solve" value="Solve" />
        </form>
        <div id="answerswer">
            <div id="quarters"></div>
            <div id="dimes"></div>
            <div id="nickels"></div>
            <div id="pennies"></div>
        </div>
        <script src="js/jquery-2.0.3.min.js"></script>
        <script>
            $( document ).ready(function() {
                alert("Handler for .ready() called.");
                $('button').click(function{
                    alert("Hello World");
                });
            });
        </script>
    </body>
</html>

这有一个语法错误:

$('button').click(function{
      alert("Hello World");
});

并且需要这样(缺少parens):

$('button').click(function () {
      alert("Hello World");
});

将来,你应该查看调试控制台,它会告诉你语法错误在哪一行,并经常告诉你错误是什么。你也可以通过jsHint运行代码(只需粘贴相关代码),它经常会告诉你哪里有语法错误或可疑的详细信息。


此外,由于HTML中没有任何<button>标记,您的选择器也可能是错误的。如果你的目标是解决按钮,那么你可能应该这样更改你的HTML:

<input id="solve" type="button" name="Solve" value="Solve" />

你的HTML是这样的:

$('#solve').click(function () {
      alert("Hello World");
});

脚本的第三行中function后面缺少括号。

此外,正如@ArtOfCode在评论中所说,您的选择器应该是input[type=button]

它应该是这样的:

$('input[type=button]').click(function () {