JQuery Устанавливает значение при нажатии кнопки

Я полный новичок для разработки веб-интерфейса. Я пытаюсь создать простую игру, где у меня есть набор из трех изображений (с вопросами). Каждое изображение имеет две кнопки под ним с надписью «Да» и «Нет». Пользователь должен щелкнуть по правильной кнопке под каждым изображением, чтобы ответить на вопрос.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

Благодарим вас за советы и помощь, Тони Хинкла и Рошни Бохаде! Решение Рошни работало для меня. –

JQuery Устанавливает значение при нажатии кнопки

ответ

Смежные вопросы