I am working on developing a page with a central content div, where users have the ability to choose various options that will introduce different additional content. This added content will then present more opportunities for adding new elements, ultimately leading to the creation of an interactive short story.
After revising my approach slightly, I am still encountering issues trying to implement it.
The code I am currently using is as follows:
<div id="ongoingStory">
<p>You find yourself in a certain place. There are items scattered around and multiple exits.</p>
<p>Would you like to take <span id="action1">action 1</span> or <span id="action2">action 2</span>?</p>
</div>
var oneResult = "<p>You decide on action 1, which triggers some events. You can then choose between <span id=\"action3\">action 3</span> or <span id=\"action4\">action 4</span>.</p>";
var anotherResult = "<p>Opting for action 2 leads to other outcomes. Afterward, you can select either <span id=\"action5\">action 5</span> or <span id=\"action6\">action 6</span>.</p>";
var root;
var branch;
function addToStory(root, branch) {
$( "#" + root ).addClass( "disabled" );
$(branch).appendTo("#ongoingStory").hide().fadeIn(1000);
}
document.getElementById("ongoingStory").addEventListener("click", moveAlong, false);
function moveAlong(e) {
if (e.target !== e.currentTarget) {
switch (e.target.id) {
case action1:addToStory(action1, oneResult);break;
case action2:addToStory(action2, anotherResult);break;
case action3:addToStory(action3, otherResult);break;
case action4:addToStory(action4, yetOtherResult);break;
};
};
e.stopPropagation();
}
Upon loading the page, no errors occur, but clicking on an action within the initially displayed content inside the ongoingStory div does not trigger any changes. Subsequently, the console outputs a "ReferenceError: action3 is not defined." This error arises because the specified content containing that particular action/id tag is not being added. The challenge lies in understanding why this content is not appended in the first place. It is possible that there may be issues with how I am referencing the ID's of the spans, although if that were the case, I would anticipate the switch statement to encounter problems at action1 instead.