Ожидание нажатия кнопки в цикле в js

Question

Имеется массив. Данные для заполнения массива должны вводиться по одному в тег input и запоминаться после нажатия кнопки. Я написал код такого формата, но столкнулся с проблемой - цикл не ожидает нажатия кнопки и переходит к следующей итерации. Код:

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div style="text-align: center; font-size: 20px;">
    <p>Введите переменную: </p>
    <input type="text" id="data" style="width: 10%">
    <p>
      <button id="starting">Далее</button>
    </p>
  </div>

  <script>
    function inputData() {
        let data = [];
        for (let i = 0; i < 5; i++) {
            document.querySelector('#starting').onclick = function() {
                //Код
            }
            //Код после нажатия кнопки
            document.querySelector("#data").value = "";
        }
        return data;
    }

    function dataHandler() {
        //Код
    }

    function mainScript() {
        let data = inputData();
        document.querySelector('#data').disabled = true;
        document.querySelector('#starting').disabled = true;
        dataHandler();
    }
    mainScript();
</script>
</body>

</html>

Подскажите наиболее эффективный способ решения данной проблемы. Спасибо.

Answer 1

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div style="text-align: center; font-size: 20px;">
    <p>Введите переменную: </p>
    <input type="text" id="data" style="width: 10%">
    <p>
      <button id="starting">Далее</button>
    </p>
  </div>

  <script>
    async function inputData() {
      return new Promise(function(resolve, reject) {
        const data = [];
        document.querySelector('#starting').onclick = function() {
          data.push(document.querySelector("#data").value);
          document.querySelector("#data").value = "";
          document.querySelector("#data").focus();
          if (data.length >= 5) {
            this.onclick = null;
            resolve(data);
          }
        };
      });
    }

    function dataHandler(data) {
      console.log(JSON.stringify(data));
      //Код
    }

    async function mainScript() {
      const data = await inputData();
      document.querySelector('#data').disabled = true;
      document.querySelector('#starting').disabled = true;
      dataHandler(data);
    }
    mainScript();
  </script>
</body>

</html>

БЛОГ НА HUSL

Ожидание нажатия кнопки в цикле в js

Ответы (1 шт):