JQuery按钮点击设置值

我是一个完整的前端Web开发新手。我试图设计一个简单的游戏，我有一组3个图像（带有问题）。每个图像都有2个标记为“是”和“否”的按钮。用户需要点击每个图像下的正确按钮才能回答问题。JQuery按钮点击设置值

图像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>"); 
} 
});

来源

2016-03-04 Harini Iyengar

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

来源

2016-03-04 16:18:19

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

来源

2016-03-04 16:14:00

非常感谢您的建议和帮助，Tony Hinkle和Roshni Bokhade！ Roshni的解决方案为我工作。 –

JQuery按钮点击设置值

回答

相关问题