Блог

Главная - Вопросы по программированию - Javascript/HTML показывает предупреждение до изменения значения в браузере

Javascript/HTML показывает предупреждение до изменения значения в браузере

#javascript #html #dom

Вопрос:

У меня есть простая веб-страница счетчика, на которой есть кнопка » 1″ и дисплей подсчета. Когда вы нажимаете на кнопку, количество просмотров на веб-странице увеличивается на 1. Когда количество достигнет 5, на странице должно появиться предупреждение и сбросить счетчик до 0.

Однако, когда счетчик достигает 5, на веб-странице по-прежнему отображается «Количество:4» и появляется предупреждение. Более того, внутренний текст тега уже стал «Количество:5». Так почему же существует несоответствие между HTML и реальной веб-страницей? Имеет ли это какое-либо отношение к асинхронным операциям?

введите описание изображения здесь Я мог бы добавить setTimeout(function(){alert("Counter value: " totalCount)},1000); «а», чтобы отложить оповещение. Но это не было моим первоначальным намерением. Предупреждение всегда должно появляться сразу после того, как счетчик наберет 5 и отобразится как «Количество:5».

 let totalCount = 0;

function onload() {
  document.getElementById("increment").addEventListener("click", onClick);
  renderCounter();
}

function onClick() {
  totalCount  ;
  renderCounter();

  if (totalCount > 4) {
    alert("Counter value: "   totalCount);
    totalCount = 0;
    renderCounter();
  }
}

function renderCounter() {
  let counts = document.getElementById("counter");
  counts.innerText = "Counts: "   totalCount;
} 
 <body onload="onload()">
  <header id="header">
    <h1>Interesting tests</h1>
  </header>
  <section class="my-counter">
    <p id="counter"></p>
  </section>

  <section id="increment-button">
    <button type="button" id="increment">  1 </button>
  </section>

  <script src="increment.js"></script>

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

1. Вы сбрасываете totalCount настройки перед тем, как визуализировать их с renderCounter() помощью . Простое удаление renderCounter() в условном блоке должно это исправить.

2. Да, это верно. Потому что функция renderCounter() всегда вызывается в функции onClick (). Предполагается, что он будет отображать 0, если totalCount > 4. Правка: чтобы уточнить, что функция renderCounter() после сброса totalCount предназначена специально. Это заставит веб-страницу отображать «Количество:0».

Ответ №1:

Вам действительно нужен параметр setTimeout, но он не должен составлять 1 секунду

  1. Не сбрасывайте перед рендерингом
  2. предупреждение блокируется, поэтому интерфейс не получает возможности обновиться
  3. Разрешить рендеринг, затем предупредить, затем снова выполнить рендеринг
  4. Используйте EventListener вместо встроенных обработчиков событий
 let totalCount = 0;

window.addEventListener("load", function() {
  document.getElementById("increment").addEventListener("click", onClick);
  renderCounter();
})

function onClick() {
  totalCount  ;
  renderCounter();
  if (totalCount > 4) {
    totalCount = 0;
    setTimeout(function() {
      alert("Counter value: "   totalCount);
      renderCounter();
    }, 10); // allow the interface to update
  }
}

function renderCounter() {
  let counts = document.getElementById("counter");
  counts.innerText = "Counts: "   totalCount;
} 
 <header id="header">
  <h1>Interesting tests</h1>
</header>
<section class="my-counter">
  <p id="counter"></p>
</section>

<section id="increment-button">
  <button type="button" id="increment">  1 </button>
</section>

<script src="increment.js"></script>
Метки: