javascript usage in passages - jackdarker/TwineTest GitHub Wiki

Passages contains the text to display on the screen. This text can be plain text or html-code including script and style partitions.

If you enter something like "[[Next|Encounter]]" it will be converted when the passage is rendered to
<a href="javascript:void(0)" data-passage="Encounter">Next</a>

If you want to create something that looks like a passage link but calls a function isntead you can use
<a href='javascript:void(0)' onclick='myFunc'>Button</a>

Also, if you have to create dynamic passage links by adding them to html you cannot use [[]] but have to create the this link by yourself.

Instead of using the <a data-passage> from above, you could do something like this: fadeout current pasage, switch to other passage (you have to do fadeIn on sm.passage.showing-event) <a href="javascript:void(0)" onclick='( $("tw-passage").fadeOut(2000, function(){window.story.show("SleepUntilEvening");}));' >Sleep Until Evening</a>

If you have a choice in a passage but you dont want to add write a separate passage for the choice outcome, you can change the current passage in place: <div id="choice">
<a href="javascript:void(0)" id="yes" onclick='choice(this,"div#choice")'>Yes I will come by.</a></br>
<a href="javascript:void(0)" id="no" onclick='choice(this,"div#choice")'>Im not sure about this.</a></br>
</div>
<script>
function choice(elmt,replaceThis) {
var msg ='';
if(elmt.id==="yes") {
msg = "You aggreed to visit them.</br>";
} else {
msg = "You have to think about this.</br>";
}
$(replaceThis).replaceWith(msg);
}
</script>

In the examples above, the html is created in the form of text. This can cause problems if it contains script-code, since the code is embedded as text too. If it occurs that your code is not working, try to modify the html-DOM-nodes instead modifiying the html-text directly:
function createLink= (itemid,linktext,PointerToFunction){
var entry = document.createElement('a');
entry.id=itemid;
entry.href='javascript:void(0)';
entry.addEventListener("click", PointerToFunction, false);
entry.textContent=linktext;
$("div#panel")[0].appendChild(entry);
$("div#panel")[0].appendChild(document.createElement('br'));
}