Changing innerHTML property on a tag in a passage [SOLVED]

Crowbeak

Hello, all. I teach English in Japan and want to make Twine games for my students to play as a means of easy and engaging practice. I don't, however, want to be limited by the vocabulary they already know. Rather than forcing them to look words up in a dictionary (which, while a good exercise, would neatly walk around the goal of easy practice), I want to make it so that I can set up hyperlinks for words they don't know so that they can click the links and have the translation appear at the top/bottom of the passage.

The fact that I can't type in Japanese in the Twine window has forced me to get creative (which is probably a good thing in the long run, since if I get an engine of sorts set up for this it'll make creating moar Twine games for them easier). I already have some experience with HTML and JavaScript, so I want to set up an external text glossary and have Twine grab text from there and put it into the innerHTML property of a paragraph tag. Right now I'm just working on getting the text insertion to work and having no luck.

Here is the macro:

// Places the given text into the translation display field.
macros['displayTranslation'] =
{
handler: function(translationText) {
elem = document.getElementByID("translationDisplayField");
elem.innerHTML = translationText;
}
}

And here is the passage contents:

<p id="translationDisplayField"></p>
<<if $translation.isEnabled>>\
<<displayTranslation $translation.sourceText>>\
<<endif>>

My kids don't know this [[word|Beginning][$translation.isEnabled = true]].

The error I get is:

Error executing macro displayTranslation: TypeError: Object #<HTMLDocument> has no method 'getElementByID'

The $translation object is set with default/placeholder values in the Start passage. EDIT: I know I could have a separate frame with a text glossary, but that discourages the kids from trying to remember the words on subsequent playthroughs. Keeping the dictionary hidden also allows me to amass one giant dictionary for any and all Twine games I make for them without overwhelming them with too many words.

Any help you guys could offer would be much appreciated.

TheMadExile

Crowbeak wrote:

The error I get is:

Error executing macro displayTranslation: TypeError: Object #<HTMLDocument> has no method 'getElementByID'

In this case, the error means exactly what it says on the tin, there is no getElementByID() method.  JavaScript is case sensitive, the correct spelling is getElementById() (note the lowercase 'd').

That issue solved, it's still not going to work.  Since you're calling the macro within the same passage as the element you want it to update, the contents of the passage won't be in the DOM when the macro executesthey'll still be in the output buffer, so you'll have to look for the element there, which means you'll also have to use querySelector().  Additionally, the handler has a predefined set of formal parameters, you don't simply add parameters to it like you would a normal function.

Try this:


// Places the given text into the translation display field.
macros['displayTranslation'] =
{
handler: function (place, macroName, params, parser)
{
el = place.querySelector("#translationDisplayField");
el.innerHTML = eval(Wikifier.parse(params[0]));
}
};


Crowbeak

D'oh! I should have noticed the capitalization error. camelCase fail. xD

Regardless, your solution worked. Thank you! Now to implement actual translation happening.