I'm still working on an assignment for a javscript/dhtml class. The assignment is to dynamically create a selection list and fill list with character names as the options. This I have completed. The second part of the assignment is to create a function to show the character name(H3 element) selected and the lines of the play(Blockquote element) said by the character.
The problem I'm having now is, when I make a selection, the values returned are 'undefined'. I feel like I am close to completing this project, just need a little extra help! I would love any help!
Here is a small clip of the HTML file:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on HTML, XHTML and DHTML 4th Edition
Tutorial 16
Case Problem 4
The Tempest
Author: Collin Klopstein
Date: December 15, 2013
Filename: tempest.htm
Supporting files: bio_out.jpg, globe_out.jpg, plays.css, plays_out.jpg,
scene.js, son_out.jpg, strat_out.jpg
-->
<title>The Tempest, Act V, Scene 1</title>
<link href="plays.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scene.js"></script>
</head>
<body>
<div id="linklist">
<img src="plays_out.jpg" alt="The Plays" />
<img src="son_out.jpg" alt="The Sonnets" />
<img src="bio_out.jpg" alt="Biography" />
<img src="globe_out.jpg" alt="The Globe" />
<img src="strat_out.jpg" alt="Stratford" />
</div>
<div id="title"><img src="tempest.jpg" alt="The Tempest" /></div>
<div id="actList"><table><tr>
<td>ACT I</td><td>ACT II</td><td>ACT III</td>
<td>ACT IV</td><td>ACT V</td>
</tr></table></div>
<div id="characterList"></div>
<div id="sceneIntro">
<h2>Lines from Act V, Scene 1</h2>
</div>
<div id="scene">
<h3>PROSPERO</h3>
<blockquote><i>Enter PROSPERO in his magic robes, and ARIEL</i></blockquote>
<blockquote>Now does my project gather to a head:<br />
My charms crack not; my spirits obey; and time<br />
Goes upright with his carriage. How's the day?
</blockquote>
<h3>ARIEL</h3>
<blockquote>On the sixth hour; at which time, my lord,<br />
You said our work should cease.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>I did say so,<br />
When first I raised the tempest. Say, my spirit,<br/>
How fares the king and's followers?
</blockquote>
<h3>ARIEL</h3>
<blockquote>Confined together<br />
In the same fashion as you gave in charge,<br />
Just as you left them; all prisoners, sir,<br />
In the line-grove which weather-fends your cell;<br />
They cannot budge till your release. The king,<br />
His brother and yours, abide all three distracted<br />
And the remainder mourning over them,<br />
Brimful of sorrow and dismay; but chiefly<br />
Him that you term'd, sir, 'The good old lord Gonzalo;<br />
His tears run down his beard, like winter's drops<br />
From eaves of reeds. Your charm so strongly works 'em<br />
That if you now beheld them, your affections<br />
Would become tender.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>Dost thou think so, spirit?
</blockquote>
<h3>ARIEL</h3>
<blockquote>Mine would, sir, were I human.
</blockquote>
and the JavaScript file:
/*
New Perspectives on HTML, XHTML, and DHTML 4th Edition
Tutorial 16
Case Problem 4
Author: Collin Klopstein
Date: December 15, 2013
Filename: scene.js
Function List:
uniqueElemText(elemName)
Returns the unique content from HTML tags with the
tag name elemName. The list is sorted in alphabetical
ordered and returned as an array.
*/
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
addEvent(window, "load", characterBox, false);//calls createListBox() when page loads
var sourceDoc = document.getElementById("scene");
function uniqueElemText(elemName) {
elems = document.getElementsByTagName(elemName);
elemsArray = new Array();
for (var i=0; i<elems.length; i++) elemsArray[i]=elems[i].innerHTML;
elemsArray.sort();
for (i=0; i<elemsArray.length-1; i++) {
if (elemsArray[i]==elemsArray[i+1]) {
elemsArray.splice(i+1,1);
i--;
}
}
return elemsArray;
}
function characterBox(object, option) {
var boxHead = document.getElementById("characterList");//references div with id characterList
boxHead.innerHTML = "<p>Show Only Lines By:</p>";//adds <p> element to characterList div
var cList = document.createElement("select");//creates <select> element
boxHead.appendChild(cList);//appends <select> element to characterList div
var characters = uniqueElemText("h3");//creates characters array that calls uniqueElemText() and applies all h3 elements
var showAll = document.createElement("option");//creates option element
showAll.text = "Show All Character Lines";// value of option element
showAll.value = 'ALL';
cList.add(showAll);//adds showAll as option of selection list
for (var i = 0; i < characters.length; i++) {
var options = document.createElement("option");
options.innerHTML = characters[i];
cList.appendChild(options);
addEvent(cList, "change", sortLines, false);
}
}
function sortLines(e) {
var character = e.target.value || e.srcElement.value;
var displayStatus = "";//stores display status to displayStatus var; value empty string, default status applied by browser
var sourceDoc = document.getElementById("scene");
for (var n = sourceDoc.firstChild; n != null; n = n.nextSibling) {
var nodeName = document.createElement("h3");
nodeName.innerHTML = sourceDoc[n];
var quote = document.createElement("blockquote");
quote.innerHTML = sourceDoc[n];
nodeName.appendChild(quote);
if (nodeName.innerHTML.indexOf("<h3>" + character + "</h3>") != -1) {
displayStatus = "none";
}
else
displayStatus = nodeName.innerHTML;
}
sourceDoc.innerHTML = displayStatus;
}
UPDATED ANSWER
This javascript code is working i have tested it
OLD ANSWER
If i have understood it correctly now you have character list containing PROSPERO and ARIEL as option, what you want is on select of any option it should get you the dialogues related to option selected. Efficient way is to add class to the dialogues/blockquotes say
so that it is easier for you to perform javascript selection using
Have created a fiddle with you requirement, please check. It will not be exact but logic will remain same http://jsfiddle.net/raunakkathuria/45UT5/
There is one more fiddle if you want all the styling also, first fiddle will just give you html
http://jsfiddle.net/raunakkathuria/45UT5/1/