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
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
<<script>>
macro or use one of the post-rending facilities (one of thepostrender
/postdisplay
task objects or thePassageDone
special passage).Example using a task object (goes in Story JavaScript): (
postdisplay
should be fine here)Example using the
<<script>>
macro in-passage: (output
is a reference to the current render buffer)