Как дождаться нажатия кнопки?

125
20 февраля 2018, 08:07

Когда то давно написал приложение, которое играет с пользователем в очко. При этом активно использовались конструкции типа

if (confirm(`Не желаете ли кон в 21?`)) {
  alert( `Атлична!` );
  playGame();
}

или

bet = prompt(`Назначьте Вашу ставку.`, '');

Сейчас решил отрефакторить это дело и избавиться от модальных операторов. Ну для алерта создал функцию sendMessage(message), которая помещает необходимый текст в соответствующее окошко. А вот с остальными операторами сложнее. Сделал такой кусок разметки:

<form>
        <label>
          Ваш ответ:
          <input type="text" name="myForm">
        </label>
        <br>
        <div class="buttons">
          <input class="myButton sendButton" value="Отправить" type="button">
          <input class="myButton yesButton" value="Да" type="button">
          <input class="myButton noButton" value="Нет" type="button">
        </div>
      </form>

Сделал такой обработчик:

let buttonsBlock = document.body.querySelector(`.buttons`);
let input = document.body.querySelector(`input[type="text"]`);
buttonsBlock.addEventListener('click', buttonsBlockHandler);
function buttonsBlockHandler() {
  if (event.target.classList.contains(`yesButton`)) {
    return true;
      }
  if (event.target.classList.contains(`noButton`)) {
    return false;
      }
  if (event.target.classList.contains(`sendButton`)) {
    let answer = input.value;
    input.value = ``;
    return answer;
      }
}

Но потом понял, что если я перепишу первый фрагмент так:

sendMessage(`Не желаете ли кон в 21?`);
if (buttonsBlockHandler()) {}

то buttonsBlockHandler просто выполнится без нажатия кнопки, причем target будет не определен. Еще была мысль в каждом блоке кода переопределять обработчик. Типа того:

...
buttonsBlockHandler = function() {
if (event.target.classList.contains(`yesButton`)) {
    playGame();
...
sendMessage(`Не желаете ли кон в 21?`);
...
buttonsBlockHandler = function() {
if (event.target.classList.contains(`yesButton`)) {
    takeTheCard();
...
sendMessage(`Еще карту?`);
...

Но это, блин, извращение какое-то. Подскажите пожалуйста, как дождаться нажатия кнопки?

Answer 1

Попробуйте JQuery, там есть метод .submit Тогда ваш код будет выглядеть примерно так

$(".yesButton").submit(playGame())

Исправил

READ ALSO
Передача данных с одной страницы на другую javascript

Передача данных с одной страницы на другую javascript

Как передать 3начение points и3 одной страницы на другую страницу и вывести ?

126
html5+javascript+css+svg -&gt; android live walpaper , есть ли способ?

html5+javascript+css+svg -> android live walpaper , есть ли способ?

ЗдравствуйтеЕсть страничка html5+javascript+css+svg без внешних библиотек

138
помогите с добавлением элементов в localstorage

помогите с добавлением элементов в localstorage

Все добавляется но после перезагрузки сайта в localstorage добавляется пустой масивКак написать этот код, чтобы все добавлялось даже после перезагрузки

127