Values not holding after setting InnerText of Elements

I have an external file that is setting the InnerText of rects or buttons or text elements in scenes. Some of the elements don’t hold their changed values after navigating to another scene and then returning (they revert to the original value), while some do. The inconsistency is driving me nuts and I can’t figure out what the culprit is. I’ve tried innerHTML instead of innerText and that has the same issues. Unfortunately, the project is way too big and complex to include here. Has anyone run across something like this or could point me in the right direction?

Hype will reset attributes it thinks it wants to control; undoubtedly like inner html of elements.

If you want an element to persist its properties across scene changes, you can use Persistent Symbols.

(An alternative is to use an On Scene Load handler that restores the values, but this is probably more work in most cases!)

Thank you @jonathan. The persistent symbol seems like a good workaround. A few questions:

  1. I do not understand the inconsistency. Some are holding their values and some aren’t. I have four rects that I set the innerText of. All of them have formatted/styled text set in Hype. One is in one scene and the other 3 in a different scene. Buttons move them back and forth. The three rects in the second scene hold their formatting just fine. The one in the first scene doesn’t. Any idea why this would be?

  2. There are also 3 rects that have their background image set dynamically and these seem to hold all the time. Can I assume that element.style.backgroundImage changes are going to hold (without having to use persistent symbols)?

  3. If I want to retain the text formatting and styles (and using the persistent symbols) is it best to set innerText? Any downside to using this over innerHTML.

  4. The persistent symbols seem to work. I am adding them to just one scene. Any problem with that - where I don’t have them added to other scenes?

  5. Do persistent symbols add a lot of overhead? I could easily see needing a dozen or two with this new strategy.

  6. And finally, I tried the other approach of re-running my loading script on each scene. The problem is that the changes are visible to the user. They see the original values for an instant and then they are over-ridden. I handle this on the startup / initialization by going to a blank scene before starting but I can’t do this on every scene change. I tried running it on the unload scene event on the scene before navigating back and still there was the re-draw. Any way to avoid this re-draw issue.

Thank you so much. I appreciate your help. I know this is a lot of questions but this is really important for me to get right.

Hype 4 will have a new scene-event: ‘On prepare for display’ … this should be the right place to do such changes as it states that the DOM for the scene is loaded …

1 Like

It really depends on if Hype wants control of the attribute or not (if it was set, if it is animated, if it is a default value). I would assume Hype always wants to control everything :slight_smile:.

The answer is probably dependent on what you’re trying to do. My recollection is both will wipe out everything within the tag, and it only has to do with the API on if you are setting text-only content, or you want HTML tags to be parsed. I personally always use innerHTML for my needs.

No problem at all! It is true a goal of the feature was to have the same content on multiple scenes (like a navigation menu) but this use case is also part of the goal.

They do add overhead, but it is really impossible to quantify without knowing more about your document. I don’t anticipate an issue, but I always say try it and see if it is a problem! Just keep a backup of the state before. Hopefully with the “New Persistent Symbol from Selection…” it isn’t too hard to do a quick prototype and make sure it is all okay.

What @h_classen said :smiley:.

1 Like