Как остановить произвольно сгенерированное число от обновления на форме submit?

Question

Я создал игру, которая догадывается о числе. Моя текущая проблема заключается в том, что каждый раз, когда я нажимаю кнопку «Угадать», номер обновляется! Как я могу остановить это? Я занимаюсь этим какое-то время, но мне не повезло, я все еще новичок в javascript. Ответы с объяснением того, что я сделал неправильно, были бы очень благодарны, потому что на данный момент я не понимаю, почему это делается.

<form id='sampleform' method='get' action=''> 

Guess: <input type='text' name='guess' id = 'guess'/> 

<button id ='b1' name='Submit' value='Submit'/> 

</form> 



<script> 

document.getElementById("b1").addEventListener("click", checkForm); 

x = Math.floor(Math.random()*99) 

function randomNumber(){ 
    return x; 
} 


function checkForm(){ 

var number = document.getElementById('guess').value; 
if (number == null || number == "" || isNaN(number) || number < 0 || number > 99){ 

    alert("Invalid input"); 
    return false; 
} 

else if (number == x) 
{ 
    alert("You're correct!"); 
    document.getElementById('b1').disabled = true; 
    return true; 
} 

else{ 

    alert("Wrong! Try again.") 

    } 
} 

randomNumber(); 
console.log(x); //checks value for testing 

</script> 

Answer 1

Предполагая, что вы хотите, чтобы отправить форму на сервер.

Вы можете сгенерировать значение и сохранить его в локальном хранилище браузера и использовать это значение, если оно уже определено.

if (localStorage['random-number']) { 
 
    x = parseInt(localStorage['random-number']); 
 
} else { 
 
    x = Math.floor(Math.random() * 99); 
 
    localStorage['random-number'] = x; 
 
}

Answer 2

Вы могли бы решить эту проблему, останавливая submit событие формы с Event.preventDefault():

document.getElementById("sampleform").addEventListener("submit", function(event){ 
    event.preventDefault(); 
}); 

As mercator точек из, если вы используете пустую строку для action атрибут, он будет использовать адрес документа и, в дальнейшем, перезагрузит ваш скрипт.

Answer 3

Ну, я вижу здесь разные вещи, поэтому я попытаюсь как можно яснее объяснить каждую точку.

Первый:

<button id ='b1' name='Submit' value='Submit'/> 

Вы не указали тип для кнопки («Кнопка» «отправить» или «сброс»). По умолчанию (в зависимости от браузера) тип будет установлен как «отправить», который отправляет текущую форму на URL-адрес, указанный в атрибуте «действие», следовательно, пересчитывает ваш скрытый номер. И, кстати, вам не нужно указывать имя кнопки, если вы выбираете его по id в javascript-коде.

Таким образом, установка типа = "кнопка" дает вам возможность установить поведение кнопки без запуска какого-либо другого события.

Второй:

Хорошо, теперь кнопка не представляет форму и число не обновляется, но ... что если пользователь вводит номер и хиты Enter? Форма отправлена.

У вас есть 2 способа решить эту проблему: вы отключите событие отправки или просто не используете форму, так как вы все делаете через Javascript. Если вы действительно хотите использовать форму, вы должны рассмотреть событие «onsubmit».

Наконец,

Я дам вам 2 способа решения этой:

1) Используя форму и обработки onsubmit событие: http://jsfiddle.net/q620qaun/

2) Не используя форму и используя пустая кнопка: http://jsfiddle.net/019xL737/1/

Надеюсь, что это поможет! удачи!