JQuery在按钮单击时设置值答案

【问题标题】：JQuery Set value on button clickJQuery在按钮单击时设置值
【发布时间】：2016-03-04 15:57:43
【问题描述】：

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

图片 1 的正确答案是“否”，图片 2 的正确答案是“否”，图片 3 的正确答案是“是”。

以下是我的相关 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>");
}
});

【问题讨论】：

标签： jquery button counter

【解决方案1】：

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

【讨论】：

【解决方案2】：

基本问题是内联 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>");
  });
});

【讨论】：

非常感谢 Tony Hinkle 和 Roshni Bokhade 的建议和帮助！ Roshni 的解决方案对我有用。