Howdy, Stranger!

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

dynamically change button text [Twine 2, SC 2]

Hey everybody,

I'm in need of a button (which triggers an audio play macro), which can be pushed only twice. My go was:
<<set $counter to 1>>
<<set $btntxt to $counter+1 + " more time(s)">>


<span id="btn">
<<button $btntxt>>
	<<set $counter -=1>>
	<<if $counter eq 0>>
	<<replace "#btn">>No more tries!<</replace>>
<<endif>>
<</button>></span>

After two clicks, the replacement macro is correctly triggered, but what do I need to do in order to change the button text after the first click?

Comments

  • Try something like the following:
    <<set _counter to 2>>
    <<set _btntxt to _counter + " more times">>
    <span id="btn"><<button _btntxt>>
    	<<set _counter-->>
    	<<if _counter gt 0>>
    		<<replace "#btn>button">>_counter more time<<if _counter gt 1>>s<</if>><</replace>>
    	<<else>>
    		<<replace "#btn">>No more tries!<</replace>>
    	<</if>>
    <</button>></span>
    
    n.b. I changed both of the story variables into temporary variables. If you're not using them beyond the mechanics of the <<button>> there, then you probably don't need to make them part of the history.
  • edited June 2016
    Thanks,

    tried your way, but the button gets stuck after the second click. It seems the condition in <<else>> is never met or the button doesn't run the if macro after the first click.

    Here's my go (based on yours):
    <<set _counter to 2>>
    <span id="btn"><<button "listen!">>
    	<<audio test play>>
    	<<set _counter-->>
    	<<if _counter gt 0>>
    		<<replace "#btn">>
    			<<button "listen again">>
    				<<audio test play>>
    			<</button>>
    		<</replace>>
    	<<else>>
    		<<replace "#btn">>No more tries!<</replace>>
    	<</if>>
    <</button>></span>
    
  • Does anybody have another idea?
  • What version of SugarCube 2 are you using?
  • I am using SC 2.6.2 in Twine 2.0.11
  • edited July 2016
    euba25 wrote: »
    tried your way, but the button gets stuck after the second click. It seems the condition in <<else>> is never met or the button doesn't run the if macro after the first click.

    Here's my go (based on yours):
    <<set _counter to 2>>
    <span id="btn"><<button "listen!">>
    	<<audio test play>>
    	<<set _counter-->>
    	<<if _counter gt 0>>
    		<<replace "#btn">>
    			<<button "listen again">>
    				<<audio test play>>
    			<</button>>
    		<</replace>>
    	<<else>>
    		<<replace "#btn">>No more tries!<</replace>>
    	<</if>>
    <</button>></span>
    
    If you're referring to the code shown above, then the reason it's getting stuck is that you are not trying it my way. Your code above replaces the entire <<button>> macro—which includes the <<if>> macro—rather than just its text, as did my example. As such, you're throwing the <<if>> away. Of course it gets "stuck".

    I'd suggest looking at my example again—more closely this time. Here it is again, modified only to use you new "listen!"/"listen again" text, rather than what you originally asked for, and the <<audio>> macro invocation:
    <<set _counter to 2>>
    <span id="btn"><<button "listen!">>
    	<<audio "test" play>>
    	<<set _counter-->>
    	<<if _counter gt 0>>
    		<<replace "#btn>button">>listen again<</replace>>
    	<<else>>
    		<<replace "#btn">>No more tries!<</replace>>
    	<</if>>
    <</button>></span>
    
  • @TheMadExile: I did not mean any offense. I am indeed very thankful for all the help I get from you.
    The example you posted in your last post did not work (I am not implying that it is your duty to provide working code). So in order to understand it, I tried to simplify it a bit (especially the part with the plural-s made it hard for me to understand), during which I obviously messed it up.
    The above example does not work either (again, I am not implying that it is your duty to provide working code, I am just unable to fix the issue), so what I went for in the end is two buttons with replace macros:
    	<span id="btn"><<button "PLAY 1">>
    	<<audio "test" play>>
    	<<remove "#btn">>
    	<</button>></span>
    	<span id="btn2"><<button "PLAY 2">>
    	<<audio "test" play>>
    	<<remove "#btn2">>
    	<</button>></span>
    

    Not elegant, but works.
    Thanks again, euba
  • I am not offended, and that's beside the point.

    I tested both of the code examples I've given here and I guarantee you that they do, in fact, work. If they are not working for you, then you are simply doing something incorrectly. That's what I was getting at with my previous admonishment—it, again, was not an indication of offense.
  • weird. I just copy-and-pasted your code into an empty passage, ran debug and got this at the first click:
    Apologies! An error has occurred. You may be able to continue, but some parts may not work properly.
    
    Error: <<replace>>: no elements matched the selector "#btn>button".
    Stack Trace:
    Error: <<replace>>: no elements matched the selector "#btn>button"
        at Function._createClass.value (<anonymous>:39:15739)
        at HTMLButtonElement.<anonymous> (<anonymous>:40:10822)
        at HTMLButtonElement.<anonymous> (<anonymous>:38:13828)
        at HTMLButtonElement.n.event.dispatch (<anonymous>:24:7516)
        at HTMLButtonElement.r.handle (<anonymous>:24:5597)
    
  • edited July 2016
    euba25 wrote: »
    weird. I just copy-and-pasted your code into an empty passage, ran debug and got this at the first click:
    When using the Twine 2 application's Test option you will need to turn the Debug View option off, the reason you need to do this is because it inserts extra HTML elements into the page which may cause CSS selectors like #btn>button to become incorrect.

    Once you turn off Debug View the code example will work correctly.
  • greyelf wrote: »
    euba25 wrote: »
    weird. I just copy-and-pasted your code into an empty passage, ran debug and got this at the first click:
    When using the Twine 2 application's Test option you will need to turn the Debug View option off, the reason you need to do this is because it inserts extra HTML elements into the page which may cause CSS selectors like #btn>button to become incorrect.

    Once you turn off Debug View the code example will work correctly.

    I am guessing the TheMadExile like myself rarely uses the Test option when testing each of the examples we supply to other, but I am sure that he like myself do test each example before posting it.

  • euba25 wrote: »
    weird. I just copy-and-pasted your code into an empty passage, ran debug and got this at the first click: […]
    Ah. I hadn't considered that you were using Test mode. As greyelf surmised, Test mode is breaking the selector I supplied.

    Using my last example as the base, the following should work in both Play and Test modes—and the published HTML. I only altered the selector.

    FIND:
    		<<replace "#btn>button">>listen again<</replace>>
    
    REPLACE WITH:
    		<<replace "#btn button.macro-button">>listen again<</replace>>
    
Sign In or Register to comment.