What I'm trying to do is to invoke a Javascript function that (I think) I defined in the global story javascript. Here's what I did:
1. Wrote my "test" passage:
2. Set up the CSS in the Story CSS:
3. Chucked the following code into the Story Javascript:
4. And finally, I referred to this thread: https://twinery.org/forum/discussion/6524/calling-js-functions-in-twine-2-sugarcube-without-macros-is-it-possible and I put a button that attempts to invoke the "move()" function into the passage:
Please forgive my rather elementary understanding of how Javascript works XD
1. Wrote my "test" passage:
<div id="progressbar-container"><div id="progressbar"></div></div>
2. Set up the CSS in the Story CSS:
#progressbar-container { width: 12em; background-color: transparent; border: 1px solid white; border-radius: 4px; } #progressbar { width: 0%; height: 2em; background-color: green; border-radius: 4px; }
3. Chucked the following code into the Story Javascript:
function move() { var elem = document.getElementById("progressbar"); var width = 1; var id = setInterval(frame, 100); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } }
4. And finally, I referred to this thread: https://twinery.org/forum/discussion/6524/calling-js-functions-in-twine-2-sugarcube-without-macros-is-it-possible and I put a button that attempts to invoke the "move()" function into the passage:
<<button "Test">><<script>>move();<</script>><</button>>But when I click the button, get an error message that says bad evaluation: move is not defined.
Please forgive my rather elementary understanding of how Javascript works XD