Ванильный счетчик JavaScript в викторине

Question

Я пытаюсь написать свою первую программу JavaScript, которая будет базовой математической викториной с использованием случайных чисел, направленных на маленьких детей. У меня есть случайные числа, которые появляются на странице HTML одним нажатием кнопки, но когда я ввожу ответ и пытаюсь использовать оператор if/else, чтобы сравнить ответ пользователя с правильным ответом, он не реагирует. Затем я попытался использовать цикл for, поскольку это то, что я видел много в Интернете, но безрезультатно.

Вот код, который я написал до сих пор:

document.getElementById("button1").addEventListener("click", question); 

var plusMinus = document.getElementById("plusMinus"); 

function question(){ 
    var startButton = document.getElementById("button1"); 
    var number1 = document.getElementById("number1"); 
    var number2 = document.getElementById("number2"); 
    var decider = Math.random(); 

    button1.textContent = "Again"; 
    number1.textContent = Math.floor(Math.random()*11); 
    number2.textContent = Math.floor(Math.random()*11); 

    if(decider<0.5){ 
    plusMinus.textContent = "+" 
    } 
    else{plusMinus.textContent = "-"}; 
    }; 

document.getElementById("button2").addEventListener("click", answer); 

function answer(){ 
    var num1 = parseInt(document.getElementById("number1").textContent, 10); 
    var num2 = parseInt(document.getElementById("number2").textContent, 10); 
    var answer = parseInt(document.getElementById("userAnswer").value, 10); 
    var feedBack = document.getElementById("feedBack"); 
    var scoreReport = document.getElementById("score"); 
    var totalScore = 0; 

    if (plusMinus.textContent == "+"){ 
    if(answer == num1 + num2) { 
     feedBack.textContent = "Well Done!"; 
    } else { 
     feedBack.textContent = "Try again!"; 
    } 
    } 
    else { 
    if(answer == num1 - num2){ 
     feedBack.textContent = "Well Done!"; 
    } else {feedBack.textContent = "Try again!"}; 
    } 

    for(count=0; count <=10; count++){ 
    if(plusMinus == "+" && answer == num1+num2){ 
     totalScore +1; 
    } 
    else if(plusMinus == "-" && answer == num1-num2){ 
     totalScore -1; 
    } 
    } 

    scoreReport.textContent = totalScore; 
}; 

Я сделал Jfiddle: http://jsfiddle.net/way81/r9vdLkzp/1/

Я признателен за любые советы, данные и спасибо за ваше время в чтении моего вопроса.

Answer 1

Есть несколько проблем, которые я вижу с тем, как вы создали свой счетчик. Во-первых, вы устанавливаете totalScore равным 0 внутри вашей функции ответа. Вы должны быть за пределами своей функции ответа, чтобы программа «запомнила» ее с момента последнего ответа ответа.

Другая основная проблема заключается в том, что внутри цикла for вы просматриваете только плюсMinus, а не плюсMinus.textContent. На самом деле вам не нужен цикл для этого. Если вы хотите увеличить его, скажем, на 10, вы можете просто увеличивать счет в то время как вы показываете обратную связь как так:

if (plusMinus.textContent == "+"){ 
    if(answer == num1 + num2) { 
    feedBack.textContent = "Well Done!"; 
    totalScore = totalScore + 10; 
} 

, но в каждом месте.Я проверил это на скрипке, и он работал, как ожидалось.

Answer 2

Я сделал одно небольшое изменение, и он начал работать для меня.

Ваши кнопки,

<button id = "button1">Start!</button> 

и

<button id = "button2">Answer</button> 

не включают в себя тип. Тип кнопки по умолчанию - submit. Я изменил ваше но

<button type='button' id = "button1">Start!</button> 

и

<button type='button' id = "button2">Answer</button> 

и он начал работать для меня

Answer 3

Это, кажется, работает, однако я заметил, что счет не увеличивается. Это было бы из-за этих линий:

totalScore +1 

и

totalScore -1 

Я предполагаю, что они фактически должны быть оба:

totalScore++; 

увеличить счет игрока на один на успешный ответ.

Кроме этого все работает нормально. Однако я хотел бы упомянуть, что вычитания, приводящие к отрицательным числам, как правило, не идеальны для «маленьких детей», поэтому подумайте над добавлением чего-то, чтобы гарантировать, что большее число всегда является первым операндом.