Howdy, Stranger!

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

How can I send the player to a passage using an onclick Event?

edited June 2017 in Help! with 2.0
I'm using Twine 2.1.3 and SugarCube 2.18.0.

I have created a div-element as a pop-up window and am allowing the player to close this div element with an ondblclick Event:
<script>
function closeThis() {
    document.getElementById("pop-up").style.visibility = "hidden";
}
</script>

<div id="pop-up" class="thumbs" ondblclick=closeThis()>
- Double-click to close -
</div>

How would I have to alter the code, if I also want to send the player to a specific passage upon double clicking the div element? I have found some topics talking about using JavaScript to jump to specific passages, but I can't seem to get this to work.

Comments

  • note: There should be quotes wrapping your call of closeThis()
    <div id="pop-up" class="thumbs" ondblclick="closeThis()">
    


    I suggest you read SugarCube' API's if you want to use Javascript to access internal features, in this particular case I would recommend reading about the Engine.play() function in the Engine API documentation.
  • edited June 2017
    greyelf wrote: »

    I suggest you read SugarCube' API's if you want to use Javascript to access internal features, in this particular case I would recommend reading about the Engine.play() function in the Engine API documentation.

    Thanks, I had already found the Engine.play() function, but like I mentioned I cannot get it to work - most likely because I'm making some very basic mistake since I have no experience with JavaScript:
    <script>
    function closeThis() {
    	document.getElementById("pop-up").style.visibility = "hidden";
    	Engine.play("Cave");
    }
    </script>
    

    will just give me an Error-message: Uncaught ReferendeError: Engine is not defined.
    I stumbled on the same problem earlier trying to use UI.restart() - until I started using state.restart() in its stead.

    Edit: Ok, after some further testing I think I found my problem. It seems the problem is that I need to use <script></script> to define the closeThis() function, but <<script>><</script>> to use Engine.play(). How do I get around that?
  • edited June 2017
    Try something like this:

    In JavaScript:
    setup.closeThis = function () {
        $('#pop-up').hide(); // same as your code, just a bit shorter with jQuery
        Engine.play('passage');
    };
    
    $(document).on('dblclick', '#pop-up', setup.closeThis);
    // pass function's definition rather than a call when it's a variable
    

    In passage:
    <div id="pop-up" class="thumbs">
    - Double-click to close -
    </div>
    

    The problem you're encountering is a scoping issue; I always have trouble getting in-passage html to play nice with out-of-passage JavaScript, not sure why (I'd love to know why, if anyone knows). I think it's easier to just handle the whole event in JS.
  • Thanks @Chapel - this does work. It seems to have the weird effect, that I am being send to the passage in question twice (since the passage code is executed twice), but that's not a problem for the setup I have in place.
Sign In or Register to comment.