innerHTML not being added to Scene 2

Using JavaScript with Hype
1

I’m attempting to add innerHTML to text inputs. I’ve discovered that all is fine if the inputs are on Scene 1, but the innerHTML doesn’t get added to inputs in Scene 2.

I’ve attached a demo

innerhtmlissue.hype.zip (66.5 KB)

Is this something to do with the way that I’m using JQuery here?

// this innerHTML is not being added to boxes in scene 2
$('.scene2box').each(function() {
		var counter = $('.scene2box').index($(this)) + 1;
    	$(this).html('<textarea id="scene2box' + counter + '" class="text-input" tabindex="' + counter + '" input-type="tel" oninput="saveText()">');
	});
2

i think, you have to put all in a symbol.

3

hmmm… not sure why that would be. These are simple elements in the DOM. I should be able to reach their innerHTML. Maybe someone else knows if it’s symbol related.

4

Every time Hype switches layout or a scene all innerHTML is rebuilt so your modifications are ereased. Hype is the opposite of reactive :slight_smile: and loves it’s initial state … I discussed this recently with @jonathan and the conclusion was that this won’t change any time soon. I suggested a setter to modify the data Hype works from but this would mean a new API. He was hinting at a Hype 5.0 for that.

@jonathan just thinking about it again maybe an easy solution would be a notify event that can be modified in its return value if we want like the one with the urls

Basically this means please rerun your setter function on every scene or layout init.

5

There are certain properties Hype cares about and resets when a scene is shown so that the state goes back to its original values - Inner HTML is one of them. You will want to run code on scene load/on layout load to setup the scene each time.

6

thanks for the background guys. It’s an encouragement to me, at least, that it wasn’t bad code on my part. I’ll figure out a way round this.

1 Like