Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

[Twine 2.1.3] [Sugarcube 2.18] Using Replace on a Span inside an added 'Sidebar'

Okay, I actually have new visible areas appearing already, but not working yet. I have, specifically, 4 new areas: a condition pane at the top, Status down the side, a navigation map in the lower right, and a space across the bottom for Actions.
My initial thought was to have the Status bar updated by PassageDone (that part isn't hard to get working, and I've already got it running smooth in another test).
For the rest of them, however, I had intended to simply have a <Span id=""></span> inside of each, which would be updated by passages when they were loaded, or when choices were made through the available actions.
My initial foray into this proved a little infuriating, as the game itself did not recognize the Span ID inside the new areas. I got the following error message:
Error: <<replace>>: no elements matched the selector "#HUDaction"

Now, I get that this is the game itself failing to check the new areas for the element, but is there some way to get it to, or to get around this? My main idea in migrating to this more separated interface was to simplify the confetti-bomb-style code that I've BEEN writing, and to make the look of the game more consistent. ...lord, I hope this is just some dumb little missed symbol on my part and not eightyseven pages of complex, unfamiliar code...

In case it might help at all, I'm including the actual project file that I'm using to build the interface; the rest of the game is in it's own (very messy and ugly) version of the project file, so this is ONLY the interface and my effort at updating the Actions bar.

(I do have to thank Greyelf for the new area code, as I found it in a couple of their posts. Various other bits and pieces lying around are thanks to Madexile and Claretta. No, it's not for profit, it's for fun, learning, and staying sane at work.)


  • edited June 2017
    There's two problems. First, you have the id wrong:
    <center><span id="#HUDaction">Available actions will go here</span></center>

    You need to lose that # in the span. It should be:
    ...<span id="HUDaction">...

    If you fix that, you'll notice that this alone will not fix the issue. That's where you're running into the second problem.

    From the SugarCube documentation (emphasis mine):
    WARNING: All DOM macros require the elements to be manipulated to be on the page. As a consequence, you cannot use them directly within a passage to modify elements within said passage, since the elements they are targeting are still rendering and not yet on the page. You must, generally, use them with a interactive macro (e.g. <<link>>) or within the PassageDone special passage. Elements which are already part of the page, on the other hand, present no issues.

    So when you attempt to modify #HUDactions in your passage's code, the element is still rendering and doesn't yet exist (note: this may not be true in subsequent passages, since your elements aren't inside the passages, but it is true of the beginning of the game, when no elements are loaded in yet). It is highly recommended that you pair DOM macros like <<replace>> with interaction, like links. If you can't do that for some reason, you can sort of get around this using a <<timed>> macro or similar:
    ::Main Menu
    <<timed 100ms>><<replace "#HUDaction">>Start New Game - Skip Prolog
    Version and Update log<</replace>><</timed>>

    That said, it's best to avoid this whole situation if you can.

    Using both these fixes, your code works fine for me.
  • Thank you, Chapel!

    I do enjoy coding to a point, but it is by no means a strength of mine. I'm teaching myself all this from scratch BECAUSE I don't parse technical stuff well until I understand it, so USING it gives me context to work backward from. If it wasn't for this forum, I wouldn't really have much of a game at all. I HAVE learned a lot from all this, but I still miss a lot of little things... and obviously some big, glaring things that are biting my face...

    This actually helps immensely, though (and not just because I was a ditz and stuck that # in there!). I'll see if it still needs the timer to move forward from here; hopefully not, but if it does, I can still make it work.

    Thanks again! =^.^=
Sign In or Register to comment.