Hi, I have an assignment where I have a drop down list that is created dynamically that uses the content from the h3 tags in the body as the options in addition to the first option being "Show entire script"
The content of the body is actually a screenplay with <h3> and <blockquote>
My goal is to only show the character's (who is selected in the drop down) name and dialogue while hiding the rest of the screenplay
I am not too sure how to go about this at all, but this is what I have so far:
All it does is gets rid of the names of the characters who aren't selected and not the block quotes underneath
Any help would be great, Thanks!
Javascript File
window.onload = fillList;
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
var sourceDoc;
var charName = new Array();
function fillList()
{
sourceDoc = document.getElementById("scene");
charName = uniqueElemText("h3");
var characterList = document.getElementById("characterList");
var selectListText = "<select><option>Show All Character Lines</option>";
for(var i=0; i < charName.length; i++)
{
selectListText += "<option>" + charName[i] + "</option>";
}
selectListText += "</select>";
characterList.innerHTML = selectListText;
addEvent(characterList.firstChild, "change", hideText, null);
}
function hideText(e) {
var character = e.target || event.srcElement;
var elems = document.getElementsByTagName("h3");
for (i = 0; i < elems.length; ++i) {
if(character.value != elems[i].innerHTML) {
elems[i].style.display = "none";
}
}
}
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;
}Shortened HTML File
<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 />
</blockquote>
<h3>GONZALO</h3>
<blockquote>All torment, trouble, wonder and amazement<br />
Inhabits here: some heavenly power guide us<br />
Out of this fearful country!
</blockquote>
<h3>PROSPERO</h3>
<blockquote>Behold, sir king,<br />
The wronged Duke of Milan, Prospero:<br />
For more assurance that a living prince<br />
Does now speak to thee, I embrace thy body;<br />
And to thee and thy company I bid<br />
A hearty welcome.
</blockquote>
<h3>ALONSO</h3>
<blockquote>Whether thou best he or no,<br />
Or some enchanted trifle to abuse me,<br />
As late I have been, I not know: thy pulse<br />
Be living and be here?
</blockquote>