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

idling

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.

greyelf

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.

idling

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?

Chapel

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.

idling

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.