Блог

Главная - Вопросы по программированию - Как исправить access DOM в цикле с помощью prompt

Как исправить access DOM в цикле с помощью prompt

#javascript

#javascript

Вопрос:

В сообщении с запросом я запрашиваю номер, я хочу обновить элемент DOM (input), но работает только тогда, когда заканчивается do — while, я хочу обновлять DOM после каждого сообщения с запросом.

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

<head>
    <meta charset="UTF-8">
    <title>Odds and Evens Game</title>


</head>

<body>
    <form>
        Number: <input type="text" id="number">
        <input type="button" onclick="showIt()" value="ShowIt"> 
    </form>


<script>
       function showIt(){
 var inputval ;

        do {
        inputval = prompt('Enter a number between 1 and 5 , 999 to exit');
        number = parseInt(inputval);

        document.getElementById('number').value= number;

        }while(number !== 999); 
}
    </script>
</body>

</html>

пример, который выполняется:
https://jsfiddle.net/neossoftware/73ag8whd/4

Ответ №1:

prompt окно prevents the user from accessing the rest of the program's interface until the dialog box is closed . Ваш цикл while снова и снова вызывает prompt, блокируя доступ к пользовательскому интерфейсу.

Используйте await, чтобы нарисовать окно перед вызовом второго запроса.

 let num = 0;
let ele = document.querySelector('#num');

(async () => {
    do {
        await getInput()
        ele.value = num;
        await sleep(0);
    } while(num !== 999);
})();

function sleep(ms) {
    return new Promise(resolve => {
        setTimeout(resolve, ms);
    })
}

function getInput() {
    return new Promise(resolve => {
        num = Number(prompt("Enter num"));
        resolve(num);
    });
}  
 Number: <input type="text" id="num">

Ответ №2:

Возможно, я не совсем понимаю вопрос, поскольку ваш код работает без ошибок, за исключением последнего 999 бита exit (в Firefox, Linux), поскольку этот код затем обновляет ваш ввод до 999 . Почему у вас это есть 999 to exit в любом случае?

Некоторые незначительные изменения и опции ниже:

 function showIt(){
  var inputval, num;
  do {
    inputval = prompt('Enter a number between 1 and 5 (inclusive), 999 to exit');
    num = parseInt(inputval);
    if ((num != NaN) amp;amp; (num >= 1) amp;amp; (num <= 5) amp;amp; (num != 999)) {
      document.getElementById('number').value = num;
    }
  } while (num !== 999);
}

function updateAndExit(e) {
  var inputval = prompt('Enter a number between 1 and 5 (inclusive)');
  var num = parseInt(inputval);
  if ((num != NaN) amp;amp; (num >= 1) amp;amp; (num <= 5)) {
    this.textContent = num;
  }
}

window.onload = function() {
  var d = document.getElementById("click-to-udpate");
  if (d) {
    d.addEventListener("click",updateAndExit,false);
  }
}  
 .fakeInput {
  border:1px solid #886;
  padding:6px;
  background:#ddd;
}
.fakeInput:hover {
  border:1px solid #688;
  background:#fff;
  cursor:pointer
}  
 Number: <input type="text" disabled="disabled" id="number">
        <input type="button" onclick="showIt()" value="ShowIt"> 
        
<p>
Different option below:
</p>
<div id="click-to-udpate" class="fakeInput">Click to update</div>

Комментарии:

1. OP хочет, чтобы каждое введенное пользователем значение (взятое из окна подсказки) отображалось в input элементе. Но input значение элемента обновляется один раз, т.е. после выхода из do..while цикла.

2. @randomSoul : Не в Firefox в Linux. Входные данные обновляются каждый раз для меня, а затем заменяются при повторном изменении. Это может быть ограничением (особенностью) используемого браузера. Если пользователь хотел, чтобы значения были объединены, это что-то другое, но изменение незначительное.