Javascript: Can't override variable

Question

For fun and the sake of learning I recently started to work on my own html canvas project. Now I'm pretty much finished, I just want to upload it to Wallpaper Engine where user can set it as their own animated Wallpaper.

For that I wanted give the user the possibility for some options of the wallpaper.

I've followed the Instructions you can find here

Now I have the following problem, that a variable for an option, won't change globally, just inside its parent. See the code:

var scale = 1,
    dotsize = 1,
    dotgap = 8,
    text = 'example',
    fontFamily = 'Arial',
    fontSize = 300,
    radius = 200;



window.wallpaperPropertyListener = {
  applyUserProperties: function(properties) {
    if (properties.text) {
      text = properties.text.value;
      alert(text)
    }
  }
};
alert(text)

The first alert after taking the content from Wallpaper Engine shows me the right text (whatever the user put inside the text field)

However, the alert at the end will show me the 'example' string I have set above.

I tried different this like using window.text or var text etc, but can't figure it out.

The second alert() call happens before the listener is ever called, how would you expect to show anything else? — Frax, Apr 14 '18 at 17:37
That just means that last `alert(text)` is being invoked before the one inside your `wallpaperPropertyListener()`. That may happen if `applyUserProperties` gets called asynchronously, e.g. by timer. — c-smile, Apr 14 '18 at 17:38
The second alert outside of your event listener is fired first, at page load. The second one inside the listener is waiting for the speciified event and only executed after that has happened — baao, Apr 14 '18 at 17:38

score 2 · Accepted Answer · answered Apr 14 '18 at 17:40

2

wallpaperPropertyListener is just a function definition and won't execute till its called. So from the javascript point of view, its just seeing your function definition with no execution, and then moving on to your second alert. Hope this helps

answered Apr 14 '18 at 17:40

alaboudi

3,187
4
29
47

But why can I see the first alert then? Is it maybe because wallpaper engine itself calls it in the end after the rest is loaded? – josias Apr 14 '18 at 17:49
Because there is some step behind the scenes thats calling your `wallpaperPropertyListener` after the second alert. I think the main source of confusion here is between defining a function vs calling it. Till you call your `wallPaperPropertyListener` function your text property wont change. – alaboudi Apr 14 '18 at 17:53
What exactly do I have to type, I can't figure out how to call the funciton before the alert? Isn't wallpaperPropertyListener just a variable where applyUserProperties is one of them? tried writing several things which didnt work – josias Apr 14 '18 at 18:29
I took a quick read at the link you sent. Look it seems that after you file is loaded in, something reads the wallpaperPropertyListener attribute. Unless you can tell me explicitly why you want to show the alert, I can't help by suggesting alternatives. – alaboudi Apr 14 '18 at 18:40
the alert was just for testing purposes, because there is no console in wallpaper engine.. I'm just trying to achieve that the wallpaper properties are being loaded before the rest of the script... – josias Apr 14 '18 at 18:44
How can I manually execute the function? I've tried wallpaperPropertyListener.applyUserProperties(); var wallpaper = new wallpaperPropertyListener.applyUserProperties(); wallpaper (); and other stuff... – josias Apr 14 '18 at 18:52
Because right now the 'example' text is displayed on my canvas instead of the one that the user set – josias Apr 14 '18 at 19:09

Javascript: Can't override variable

1 Answers1