Issue with this Javascript code (I think with the execution context)

Question

On resize I want the code to run the first if statement: "I think this is too small". On the second resize I want it to run the first alternate: "I think this is too big". It only runs one, is it because the variable adjustment is local only and doesn't stick around for the second time?

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>

I'm not sure what this has to do with execution contexts? What do you even refer to by that term? — Bergi, Jun 04 '16 at 19:23
possible duplicate of [Why is document.write considered a “bad practice”?](http://stackoverflow.com/q/802854/1048572) — Bergi, Jun 04 '16 at 19:24

score 0 · Accepted Answer · answered Jun 04 '16 at 19:06

The problem is document.write. Never use document.write. You might think: "Oh, I want to write something to the document, so document.write seems perfect". Wrong, you have been fooled by its name. Even the specification says it's horrendous.

When you want to write something, use textContent, innerHTML or DOM methods.

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>

Utkarsh Shukla · Answer 2 · 2016-06-05T04:13:01.570

-1

As mentioned above document.write() is causing the problem .If you'll check the link provided by him you will understand what's the problem and ambiguity it causes.So , avoid using it .But still if you want to use it ,you can use it like this (atleast in this particular case ,here) .

         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>

edited Jun 05 '16 at 04:13

answered Jun 04 '16 at 19:38

Utkarsh Shukla

1
3

"*You can use it like this*" - what did you change? Why does it work now? – Bergi Jun 04 '16 at 20:08
@Bergi I ran the code and checked that the values of counter were changing but the event wasn't triggering the function .That seemed to me that addEventListener method was being removed from the window object after document.write() was executed .That's why I added it again just after document.write() so that the addEventListener method is again called to catch further events.Although ,cannot guarantee that it will always work in every case but seems to work here. – Utkarsh Shukla Jun 04 '16 at 20:42
Oh ,why am I downvoted . I just tried to answer the question . I thought that this may help not if the poster of question then someone else who can actually explain why this code worked . If its inappropiate and downvoted should I just delete it .Really don't know much about the system . – Utkarsh Shukla Jun 04 '16 at 22:09
I don't know what the reason was (I didn't do it), it just means that someone thought your answer wasn't useful or just didn't like it. Maybe they think using `document.write` shouldn't be encouraged in any way. This does not mean that your answer is inappropriate, if it works for you it's certainly valid. You can delete it if you want, but there is no obligation to. If you believe in your approach, just let it stay. – Bergi Jun 04 '16 at 22:18
I am going to let it be for now but let's just hope I don't end up getting a negative reputation (-; – Utkarsh Shukla Jun 05 '16 at 04:15
You can't fall below 1 :-) – Bergi Jun 05 '16 at 10:11
Well ,thats a relief ,although that also means that I am at the lowest level but still better than having a notorious (negative) reputation ;-) – Utkarsh Shukla Jun 05 '16 at 14:06

Issue with this Javascript code (I think with the execution context)

2 Answers2