Sample code for using the click event in snowman

hugoestr

So I am trying to save the name of the player using snowman. I am very familiar with JavaScript and jQuery.

Give me your **your** __name__ : <input id="playerName" type="text" /> <input id="enterName" type="button" value="enter" />

My initial impulse was to bind #enterName with the .click() event, and then use jQuery to get the value from playerName. This failed. I have read through a number answers here, and tried the best I could to implement a working solution, but I haven't have any success.

I ran the output created from the published html page through the debugger. Then I found that it renders like this:

</script><tw-passagedata pid="1" name="start" tags="" position="0,1">
<%
s.name = "baba";
alert(s.name);
%>

Welcome to St. Amore's Academy!

Continue?

Give me your **your** __name__ : <input id="playerName" type="text" /> <input id="enterName" type="button" onclick="window.S.alert("#enterName");" value="enter" />


</tw-passagedata>

Clearly the JavaScript code will be broken because the html lacks the elements with then names "playerName" and "enterName". Based on the rendered markup, it seems that the tw-passagedata will then be rendered at a future point.

My question is how exactly am I supposed to interact with the future markup so that I can access the text field and the onclick event for the button? Seeing a code sample would be probably the best.

Thanks in advance!

TheMadExile

hugoestr wrote: »

I ran the output created from the published html page through the debugger. Then I found that it renders like this:

[…]

Clearly the JavaScript code will be broken because the html lacks the elements with then names "playerName" and "enterName". Based on the rendered markup, it seems that the tw-passagedata will then be rendered at a future point.

It doesn't render like that. You were looking at the story's data store, which is a part of its HTML and thus part of the DOM when the story loads.

You probably want something like the following:

Give me your **your** __name__ :
<input id="playerName" type="text" value="<%=s.name%>"> <button id="enterName">Confirm</button>
<%
$(function () {
	$("#playerName").on("change", function () {
		s.name = $("#playerName").val();
	});
	$("#enterName").on("click", function () {
		s.name = $("#playerName").val();
	});
});
%>

That will set s.name to whatever is in the text box when the player changes the value and/or clicks on the confirmation button.