JQuery 单击按钮时设置值

Question

我是前端 Web 开发的新手。我正在尝试设计一个简单的游戏，其中我有一组 3 张图像（轴承问题）。每张图片下方都有 2 个按钮，分别标记为 'Yes' 和 'No'。用户需要点击每张图片下方的正确按钮来回答问题。

图 1 的正确答案是 'No'，图 2 的正确答案是 'No'，图 3 的正确答案是 'Yes'。

下面是我的相关HTML:

<div class="buttoncontainer">
  <button id="submit-btn1" onclick="subtractone()">Yes!</button>
  <button id="submit-btn2" onclick="addone()">No!</button>
</div>
<div class="buttoncontainer">
<button id="submit-btn3" onclick="subtractone()">Yes!</button>
<button id="submit-btn4" onclick="addone()">No!</button>
</div>
<div class="buttoncontainer">
<button id="submit-btn5" onclick="subtractone()">Yes!</button>
<button id="submit-btn6" onclick="addone()">No!</button>
</div>
<div class="scoresheet">
<p id="resultMessage"></p>
</div>

想法是在记分表中显示分数并根据分数显示文本。

下面是 JQuery 目前为止我所管理的。如果有任何帮助，我将不胜感激。

$(document).ready(function() {
var finalScore = 0;
console.log(finalScore);
$("#resultMessage").html("<p>" + finalScore + "</p>");

function subtractone(finalScore) {
finalScore = finalScore - 1;
$("#resultMessage").html("<p>" + finalScore + "</p>");
}
function addone(finalScore) {
finalScore = finalScore + 1;
$("#resultMessage").html("<p>" + finalScore + "</p>");
}
});

Answer 1

基本问题是内联 onclick 事件找不到正在调用的函数。如果你打开浏览器控制台（F12），当你点击一个按钮时，你会看到它找不到该功能。

一般来说，最好将所有脚本都放在 HTML 之外，处理这个问题的更好方法是分配 "addone" 和 "subtractone" 类到按钮，然后将点击处理程序绑定到那些类:

HTML

<div class="buttoncontainer">
  <button id="submit-btn1" class="subtractone">Yes!</button>
  <button id="submit-btn2" class="addone">No!</button>
</div>
<div class="buttoncontainer">
  <button id="submit-btn3" class="subtractone">Yes!</button>
  <button id="submit-btn4" class="addone">No!</button>
</div>
<div class="buttoncontainer">
  <button id="submit-btn5" class="addone">Yes!</button>
  <button id="submit-btn6" class="subtractone">No!</button>
</div>
<div class="scoresheet">
  <p id="resultMessage"></p>
</div>

脚本

$(document).ready(function() {
  var finalScore = 0;
  console.log(finalScore);
  $("#resultMessage").html("<p>" + finalScore + "</p>");

  $(".subtractone").on("click", function() {
    finalScore = finalScore - 1;
    $("#resultMessage").html("<p>" + finalScore + "</p>");
  });

  $(".addone").on("click", function() {
    finalScore = finalScore + 1;
    $("#resultMessage").html("<p>" + finalScore + "</p>");
  });
});

Answer 2

    <script type="text/javascript">
        var finalScore = 0;
        $(document).ready(function ()
        {

            $('form').submit(function () { return false; });
            $("#resultMessage").html("<p>" + finalScore + "</p>");
        });
        function subtractone()
        {
            finalScore = finalScore - 1;
            $("#resultMessage").html("<p>" + finalScore + "</p>");
        }
        function addone()
        {
            finalScore = finalScore + 1;
            $("#resultMessage").html("<p>" + finalScore + "</p>");
        }
    </script>

<body>
    <form id="form1">
    <div>
        <div class="buttoncontainer">
            <button id="submit-btn1" onclick="subtractone()">
                Yes!</button>
            <button id="submit-btn2" onclick="addone()">
                No!</button>
        </div>
        <div class="buttoncontainer">
            <button id="submit-btn3" onclick="subtractone()">
                Yes!</button>
            <button id="submit-btn4" onclick="addone()">
                No!</button>
        </div>
        <div class="buttoncontainer">
            <button id="submit-btn5" onclick="addone()">
                Yes!</button>
            <button id="submit-btn6" onclick="subtractone()">
                No!</button>
        </div>
        <div class="scoresheet">
            <p id="resultMessage">
            </p>
        </div>
    </div>
    </form>
</body>

JQuery 单击按钮时设置值

JQuery Set value on button click

jquery

counter

button