Howdy, Stranger!

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

How to Reference Element IDs with JavaScript Properly in Twine 2.0.3 Sugarcube

edited March 2015 in Help! with 2.0
I'm relatively new to Twine and JavaScript, but am attempting to use both for a study. I must use JavaScript to communicate variables to a server via php script. However, I'm having trouble understanding how to manipulate JavaScript within the Twine platform. I remember reading that the JavaScript is executed prior to the evaluation of statements within Passages, and that a united html document is delivered when "publishing to a file". I have found that html element id's established in passages cannot actually be referenced in the JavaScript page. How might I then reference such elements? Thus far, all I can get to occur is the alert("ready") popup.

Here is the final page of my game, after establishing all variables in the browser's local storage via the <<remember>> macro.

You have now left. This concludes the demo game.

<<remember $finished = true>>

<form action='results.php' method='post'>
<input type="submit" id="submit1" value="Submit Results">
</form>

<div id="thankyou">Thank You!</div>
The Story JavaScript page has...

//requires jquery
$(document).ready(function() {

$('#thankyou').hide();
alert("ready");
});

$('#submit1').click(function() {
alert("Results Sent!");
$('#thankyou').show();
});

Comments

  • You can only target elements in an object model, either the current document's object model (a.k.a. the DOM) or another (usually the rendering buffer).  The text of your "final page" is not transformed into actual elements and made part of an object model until it's been rendered, so until that point it's just text in the system.

    Also, using $(document).ready(), in general, is pointless, since SugarCube's main function is executed thus (i.e. your code will never be executed until sometime after that point anyway, since it's executed by SugarCube).

    What you'll want to do is either, add code to an in-passage &lt;&lt;script&gt;&gt; macro or use one of the post-rending facilities (one of the postrender/postdisplay task objects or the PassageDone special passage).


    Example using a task object (goes in Story JavaScript): (postdisplay should be fine here)

    postdisplay["thankyouSetup"] = function () {
    if (passage() === "PASSAGE_TITLE_HERE") {
    $("#thankyou").hide();
    $("#submit1").on("click", function () {
    $("#thankyou").show();
    });
    }
    };

    Example using the &lt;&lt;script&gt;&gt; macro in-passage: (output is a reference to the current render buffer)

    You have now left. This concludes the demo game.

    <<remember $finished = true>>

    <form action="results.php" method="post">
    <input type="submit" id="submit1" value="Submit Results">
    </form>

    <div id="thankyou">Thank You!</div>

    <<script>>
    $("#thankyou", output).hide();
    $("#submit1", output).on("click", function () {
    $("#thankyou").show();
    });
    <</script>>
  • Thank you so much!  It works perfectly. You've been a great help, so keep up the great work!
Sign In or Register to comment.