按钮不会在 html/javascript 中单击答案

【问题标题】：Button wont click in html/ javascript按钮不会在 html/javascript 中单击
【发布时间】：2016-12-22 05:48:36
【问题描述】：

我试图在 html 中获取这个按钮来创建一个新的字符串，但它没有做任何事情..

<html>
<head>
<title>Random Quote Generator</title>

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="Reffference.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
    <body>
    <div class="container">
        <div class="row text-center">
            <h1>Random Quote Generator</h1>
            <div class="message">Click the button to generate a quote!</div>
        <button id="getMessage" class="btn btn-primary">Click Me!</button>    

        </div>

    </div>
    </body>
</html>

这是文件 Reffference.js 中的 javascript

$(document).ready(function(){
    $("#getMessage").on("click", function(){


    $(".message").html("Here is the new generated text");
    });
});

【问题讨论】：

在您的代码中看起来一切都很好。确保您的 jquery 正确加载到您的网页中。
嘿-您的代码很好，请确保您的js文件已完全加载并清除cookie
由于每个人都同意您的代码可以正常工作，因此如果没有更多信息，我们无法帮助您使其正常工作。您需要自己进行一些调试，尤其是让自己熟悉浏览器的开发人员工具并查找可能遇到的任何错误。
this fiddle 是您的代码，所有外部库都是您加载的内容 - 工作正常 - 检查 Reffference.js 是否已加载（使用开发人员工具验证）跨度>
在你的javascript中撒一些console.log消息，看看哪些输出到控制台，哪些不输出

标签： javascript html

【解决方案1】：

您提供的代码运行良好。如果您的本地有任何问题，请检查控制台并查看是否记录了任何错误。

【讨论】：

这应该是评论，而不是答案。
由于某种原因它对我不起作用？我正在使用括号来编辑我的代码
如果您使用的是括号编辑器，请确认没有代码语法问题，有时括号在美化代码时会违反一些基本的html，javascript语法。

【解决方案2】：

鉴于您的代码在 jsfiddle 等中运行良好，唯一可能的可能是 reference.js 文件。请确保它与 html 位于同一目录中（因为那是您的链接正在寻找它的地方）并检查您的案例，例如在链接和文件名中都调用文件 reference.js 而不是 Reference.js。

还要检查您的拼写，在您的 HTML 中，您将其拼写为 Reffference.js (3 fs)。

$(document).ready(function() {
  $("#getMessage").on("click", function() {
    $(".message").html("Here is the new generated text");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="container">
        <div class="row text-center">
            <h1>Random Quote Generator</h1>
            <div class="message">Click the button to generate a quote!</div>
        <button id="getMessage" class="btn btn-primary">Click Me!</button>    

        </div>

    </div>
    </body>

您可以尝试仅使用此 HTML 并查看它是否有效。注意：我已将 js 包含在底部而不是外部。这将排除未加载的文件：

<html>
<head>
<title>Random Quote Generator</title>

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
     <!-- <script src="Reffference.js"></script> -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
    <body>
    <div class="container">
        <div class="row text-center">
            <h1>Random Quote Generator</h1>
            <div class="message">Click the button to generate a quote!</div>
        <button id="getMessage" class="btn btn-primary">Click Me!</button>    

        </div>

    </div>
    <script>
        $(document).ready(function(){
            $("#getMessage").on("click", function(){
            $(".message").html("Here is the new generated text");
            });
        });
    </script>
    </body>
</html>

如果这有效，那么它确认问题是<script src="Reffference.js"></script>

所以你的链接应该是这样的：

<script src="reference.js"></script>

重要的是它出现在指向 jquery 的链接之后（你有，但只是说:)

您的reference.js 文件的名称必须完全一致，这一点非常重要。没有大写。

reference.js 文件的内容应该是：

    $(document).ready(function(){
        $("#getMessage").on("click", function(){
        $(".message").html("Here is the new generated text");
        });
    });

您的项目目录应如下所示：

MyProject ->
    index.html
    referenece.js

【讨论】：

如果没有问题就不用回答了。
如果没有问题，那也没必要问。我只是让 OP 知道他发布的代码工作正常，不是他的问题。这本身就是一个答案。
您也可以在评论中这样做。 “如果没有问题，那么也没有必要问。” 对，这就是为什么问题应该被关闭，而不是回答。如果确实存在问题，则 OP 需要澄清。发布一个回答说一切都很好对任何人都没有用。
布拉德，如果您的立场是某些未显示的内容肯定存在问题，那么您为什么不在答案中实际说明这一点？它仍然不会真正回答这个问题，但它至少比仅仅说现有代码有效。
“我不明白你的代表怎么看不到这个” 也许你应该把这当作我对这个网站有一些经验并且有一个好主意的迹象什么是正确的答案。但我不想和你争论，我已经说过了。你可以接受或不接受我的建议。