Howdy, Stranger!

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

[Sugarcube] remove macro not working

edited May 2015 in Help! with 2.0
Hello everyone,

I'm trying to get Sugarcube's remove macro to work. Even if I use the example code in Sugarcube's documentation, which is
I'd like a <span id="huge-cupcake">humongous </span>cupcake, please.

<<remove "#huge-cupcake">>

on a fresh Twine story, I keep on getting the same error:

Error: <<remove>>: no elements matched the selector "#huge-cupcake"

What am I doing wrong? Is there any 2.0 syntax that I'm missing?

Thanks!


Comments

  • edited May 2015
    Have you defined #huge-cupcake in your CSS?

  • I don't think I need to do it unless I want to change it visually...What should I write in my CSS?
  • edited May 2015
    The <<remove>> macro error message indicates it's looking for a css selector.

    And... there's no reason to use a <span> if you haven't defined it in css, so it wouldn't surprise me if <<remove>> was looking for a css selector.

    So you need to try something like:
    #huge-cupcake {
    color: pink;
    ]
    
  • I tried your code (replacing the square bracket with a curly one). Unfortunately, I keep on getting the same error (with a pink word now :D)

    Any other ideas?
  • edited May 2015
    Wrap it in a control element. To your passage, add:

    <<click "test">><<remove "#huge-cupcake">><<set $hashugecupcake to 1>><</click>>

    And then click on the word test.

    If this works you can probably also try removing the css. I may have been wrong about the need for css there.

    (You don't need the set macro there, I just put it in because that seems to be what the example is doing - having the player take a cupcake.)
  • Wrapping it up in a click elements works. Unfortunately, I can't use it in my story. I need to wrap it up inside an if statement.
    On the walls, the witch hung <span id="roots">[[two andorea roots|Roots]], </span>a fresh tree branch and skulls of different sizes and shapes.<<if $rootsStolen>><<remove "#roots">><</if>>
    

    and on another passage I have this:
    <<set $rootsStolen = true>>You pick up the roots, careful not to break them.
    

    And, I keep on getting an error.

    The cupcake code was taken straight from the Sugarcube documentation. I was trying to debug this with the simplest possible code (example code, new Twine story), which was not working either. It's weird that wrapping it in a click elements works. I have no clue how to solve the issue though.
  • edited May 2015
    My best guess is that what's going on is the css selector isn't appearing in time for it to register for <<remove>>, so you would want a way to make sure the <<remove>> is being executed after the passage is generated.

    You could try putting the <<remove>> in the PassageDone special passage. That may work, since that should execute the <<remove>> code after the passage text is determined, but before the passage is displayed. Alternatively could used <<timedcontinue>> in the replace set, but that will produce flickering.

    That said... I'm confused about why you need to use <<remove>> for this purpose?

    Why not just go:
    On the walls, the witch hung<<if $rootsStolen is false>> [[two andorea roots|Roots]],<</if>> a fresh tree branch and skulls of different sizes and shapes.
    

    ?
  • edited May 2015
    I tried using <<if $rootsStolen is false>>, <<if $rootsStolen is true>> and <<if $rootsStolen>> without the <<remove>>, like you suggested. But in all three cases, the text doesn't get displayed, and that happens before I set the variable in the other passage. :( So I can't use that. I will try with the timed macros.
  • Also tried adding <<set $rootsStolen = false>> to the StoryInit passage, in case it wasn't seeing the variable because it wasn't declared first, but that didn't work as well.
  • edited May 2015
    That's because you haven't initialised $rootsStolen in StoryInit, so if you haven't yet defined it, it is looking for something that doesn't exist.

    Write in the StoryInit passage:

    <<set $rootsStolen to false>>


    And then go and initialise every other variable you use there - it's best practice, for these reasons. I had assumed all variables were initialised.
  • Yes, I did that. :) See upper post.
  • edited May 2015
    There's no reason that it wouldn't work in that case, then. It's just a simple if statement.

    Try putting in your start passage:
    <<if $rootsStolen is false>>test<</if>>
    

    If that doesn't work, then something is going on with your variables.
  • The test code in the start passage works. I'm seriously banging my head over this issue. The code I'm working is in the second passage, and I'm not doing anything else with variables... Maybe I'll try to copy it all in a new story.
  • edited May 2015
    At this point the only progress might come from doing that, or copying out more passages here to check if you haven't done something else that is interfering.
  • Same issue in the new story. Test code in the first passage shows, the one in the second passage doesn't. I even tried removing the passage link Roots and replacing it with simple text, but it still doesn't show. It makes no sense at all. :(
  • edited May 2015
    Try using a different variable. Something is going on there which is affecting that variable.
  • FIXED! I was using <<if $rootsStolen = false>> instead of <<if $rootsStolen is false>> in the second passage. How could I not notice that?

    Thank you so much for the help, Claretta :)
  • edited May 2015
    Yeah I thought that could be an issue, but edited it out of one of my earlier replies as I wasn't sure if I was on the right track.

    BTW, if you want to use those kind of signs, you need to write <<if $rootsStolen == false>>.

    Double equal signs is equal to "to".
  • Yes, the documentation said that you can also use standard operators, so it didn't occur to me to check. Thanks!
  • A single equals sign = means assignment, so what your <if $rootsStolen = false>> was doing was assigning the false value to the $rootsStolen variable and then checking if the result was true.

    A double equals sign == is used for comparison. <if $rootsStolen == false>>

    People get = & == confused so that is one reason it can help to use the to and is keywords instead.
    <<set $variable to "value">>
    
    <<if $variable is "value">>
    
  • Even for people who are knowledgeable about that, it is easy enough to make a typo and SugarCube will not throw an error message, making debugging difficult.

    So I prefer to use is and to, because if I make a mistake, I will be notified.
  • edited May 2015
    It's an order of operations issue. Elements do not become part of the page/DOM until after the passage has fully rendered. Macros are executed during passage rendering. So, what your code was trying to do was this:
    1. Add I'd like a <span id="huge-cupcake">humongous </span>cupcake, please. to the render buffer.
    2. Execute <<remove "#huge-cupcake">>, which tries to remove the element with the ID "huge-cupcake" from the page/DOM. No such element exists, so give an error.
    3. Passage rendering finishes and the render buffer is added to the page/DOM. Now, the <span id="huge-cupcake"> exists within the page/DOM.
    The various DOM macros are not meant to be used directly within the same passage as what you're trying to manipulate (using them within a <<click>> or the like doesn't count, as their content aren't executed until activated by the player, well after rendering is complete).

    Regardless. As you've found out, this is a job for the <<if>> macro anyway.
  • edited January 2017
    im getting a similar error, but its hard to describ. i get Error: <<replace>>: no elements matched the selector "#error" but I have the div class right there.
    <div id = "error"> </div>
    <<replace "#error">> do stuff <</replace>>
    <<display name/age>>
    <div id="error-fage">> </div>
    <<if $validname eq 1>>
     <<replace "#error-fage">> <<goto [[intro]]>>
    <</replace>> {{{HAVENT decided how Ill go to the post input passage so I have both here}}}
    <<click "Proceed">>
     <<replace "#error-fage">> <<goto [[intro]]>>
    <</replace>>
    <</click>>
    <<else>>
    
    <<replace "#error-fage">> nothing works <</replace>> 
    
    <</if>>
    
    The last line is where I get the error.
    Name/age passage:
    
    
    Your name is: <<textbox "$name" "" autofocus>> \
    
    <<button "Confirm your name!">>
    	<<set $name to $name.trim()>>
    	<<if /[^a-z]/i.test($name)>>
    
    <<replace "#error-fage">>ERROR <</replace>>
    		
    		<<else>>
    	  
    <<replace "#error-fage">>VALID <</replace>>
    
    	<</if>>
     <</button>><div id="error-fage"></div>
    
  • im getting a similar error
    Please read the comment by TheMadExile immediatly before your own, it explains why you can't target an element in the current passage the way you are doing.
  • <<display name/age>>
    
     
    
    <<click "Proceed">>
    <<replace "#error-fage">> 
    <<if $validname eq 1>>
    <<goto [[intro]]>>
      <<else>>
      INVALID NAME. LETTERS ONLY!!!!!!!!!!
      <</if>>
    <</replace>>
    <</click>>
    
    

    Okay so this works, with proceed only taking you to the next passage if the name is letters only, clicking on it otherwise will tell you if its not and not "goto" the next passage. I did understand before posting my error message that the post above me had to do with my error, and the entire thread, but I wasn't clear as to the why.
Sign In or Register to comment.