Question

我是前端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>");
}
});

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>

按钮单击

2 个答案: