Quantcast
Channel: Help! with 2.0 - Twine Forum
Viewing all articles
Browse latest Browse all 1844

How to invoke a Javascript function with a button in Sugarcube?

$
0
0
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:
<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


Viewing all articles
Browse latest Browse all 1844

Trending Articles