In a passage, create inputs like this:
You don't need to (and shouldn't) call the processInputElements() function after each of your input element declarations, that function should only be called a single time after all such declarations have been done within the Passage.
eg. Your passage's contents should look something like the following.
Bandit's Name:
<input type="text" data-varname="banditName">\
Snake's Name:
<input type="text" data-varname="snakeName">\
(link-goto: "Done", "aBandit")
<script>processInputElements();</script>
Include it in your Javascript file
You don't need to use a Harlowe namespace to gain access to the story format's State object, but you can do so if you want to. The processInputElements() function could be change to the following and it would still work.
window.processInputElements = function () {
$('input[data-varname]').on('change', function () {
var varName = $(this).attr('data-varname');
State.variables[varName] = this.value;
});
};
Fun Fact: The window.processInputElements() function code you posted to is based on code I supplied to someone else, I later modified / extended that code to also support Numbers Radio Buttons, Check Boxes and Select.
window.processInputElements = function () {
var story = $('tw-story');
/* Handle Text related inputs. */
story.find('input[name][type="text"]').on('change', function () {
var varName = $(this).attr('name');
State.variables[varName] = this.value;
});
/* Handle Numeric related inputs. */
story.find('input[name][type="number"]').on('change', function () {
var varName = $(this).attr('name');
State.variables[varName] = parseInt(this.value);
});
/* Handle Radio Button related inputs. */
story.find('input[name][type="radio"]').on('change', function () {
var varName = $(this).attr('name');
State.variables[varName] = this.value;
});
/* Handle Check Box related inputs, uses 'data-onuncheck' property value when unchecked. */
story.find('input[name][type="checkbox"]').on('click', function () {
var varName = $(this).attr('name');
var unchecked = $(this).attr('data-onuncheck') || "";
State.variables[varName] = this.checked ? this.value : unchecked;
});
/* Handle Select / Dropdown related inputs. */
story.find('select[name]').on('change', function () {
var varName = $(this).attr('name');
State.variables[varName] = this.value;
});
};
The above variation of the processInputElements() function has been changed to use the standard name property (instead of data-varname) to determine the name of the input element's assocated story variable. This was done because input elements generally have a name property assigned to them anyway, so the handler code might as well use it.
The following is an example of the above variation being used within a Passage.
(set: $name to "John", $age to 18, $colour to "Red", $autosaves to "", $icecream to "Yes")
<label for="name">Name: </label>\
<input type="text" name="name">
<label for="age">Age: </label>\
<input type="number" name="age">
<label for="icecream">Like Icecream?: </label>\
<input type="radio" name="icecream" value="Yes">Yes\
<input type="radio" name="icecream" value="No">No
<label for="autosave">Auto Saves: </label>\
<input type="checkbox" name="autosaves" value="Yes">
{
<label for="colour">Favorite Colour:</label>
<select name="colour">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
}
[[Result]]
<script>processInputElements();</script>