Проблема с этим Javascript кодом (я думаю, с контекстом выполнения)

Question

При изменении размера Я хочу, чтобы код запускал первый оператор if: «Я думаю, что это слишком мало». Во втором изменении размера я хочу, чтобы он запускал первый вариант: «Я думаю, что это слишком большой». Он работает только один, это потому, что переменная настройка является локальной только и не придерживается во второй раз?

var counter = 0; 
 
function message() { 
 
    if (counter == 0) { 
 
     document.write("I think this is too small"); 
 
     counter = counter + 1; 
 
    } else if (counter == 1) { 
 
     document.write("I think this is too big"); 
 
     counter = counter + 1; 
 
    } else { 
 
     confirm("Third Time's a charm"); 
 
    } 
 
} 
 
window.addEventListener('resize', message, false); 
 

<p>Text</p>

Answer 1

Проблема заключается в том document.write. Никогда не использовать document.write. Вы можете подумать: «О, я хочу что-то написать в документе, поэтому document.write кажется идеальным». Неправильно, вас обманули его имя. Even the specification says it's horrendous.

Если вы хотите что-то написать, используйте textContent, innerHTML или DOM-методы.

var target = document.querySelector('p'); 
 
var counter = 0; 
 
function message() { 
 
    if (counter == 0) { 
 
    target.textContent = "I think this is too small"; 
 
    counter = counter + 1; 
 
    } else if (counter == 1) { 
 
    target.textContent = "I think this is too big"; 
 
    counter = counter + 1; 
 
    } else { 
 
    target.textContent = "Third Time's a charm"; 
 
    } 
 
} 
 
window.addEventListener('resize', message, false);

<p>Text</p>

Answer 2

Как уже упоминалось выше document.write() вызывает проблемы .Если вы проверить ссылку, предоставленную ему вы поймете, в чем проблема и неоднозначность его causes.So, не используйте его. Но если вы хотите его использовать, вы можете использовать его так (по крайней мере, в данном конкретном случае здесь).

  var counter = 0; 
 
     function message() { 
 
      if (counter == 0) { 
 
       document.write("I think this is too small"); 
 
       counter = counter + 1; 
 
       window.addEventListener('resize', message, false); 
 
      } else if (counter == 1) { 
 
       document.write("I think this is too big"); 
 
       counter = counter + 1; 
 
       window.addEventListener('resize', message, false); 
 
      } else { 
 
       confirm("Third Time's a charm"); 
 
       window.addEventListener('resize', message, false); 
 
      } 
 
     } 
 
     window.addEventListener('resize', message, false); 
 

<p>Text</p>