Javascript 当我从动态创建的选择列表中进行选择时，Web内容返回为未定义
我还在为javscript/dhtml类做作业。任务是动态创建一个选择列表，并使用字符名作为选项填充列表。这个我已经完成了。赋值的第二部分是创建一个函数来显示选定的角色名称（H3元素）和角色所说的播放行（Blockquote元素） 我现在遇到的问题是，当我进行选择时，返回的值是“未定义的”。我觉得我即将完成这个项目，只需要一点额外的帮助！我愿意得到任何帮助 以下是HTML文件的一个小片段：Javascript 当我从动态创建的选择列表中进行选择时，Web内容返回为未定义,javascript,dhtml,Javascript,Dhtml,我还在为javscript/dhtml类做作业。任务是动态创建一个选择列表，并使用字符名作为选项填充列表。这个我已经完成了。赋值的第二部分是创建一个函数来显示选定的角色名称（H3元素）和角色所说的播放行（Blockquote元素） 我现在遇到的问题是，当我进行选择时，返回的值是“未定义的”。我觉得我即将完成这个项目，只需要一点额外的帮助！我愿意得到任何帮助 以下是HTML文件的一个小片段： <?xml version="1.0" encoding="UTF-8" ?> <!D
<?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>
暴风雨，第五幕，第一场
第三法案
第四幕第五幕
第五幕第一场的台词
普洛斯彼罗
穿着魔法长袍的普洛斯彼罗和艾丽儿进来了
现在，我的项目是否达到了高潮：
我的魅力不会破裂；我的灵魂服从；和时间
他坐着马车笔直地走着。今天怎么样？
阿里尔
在第六个小时；那时候，大人，
你说我们的工作应该停止。
普洛斯彼罗
我是这么说的，
当我第一次掀起风暴时。说吧，我的灵魂，
国王和他的追随者们过得怎么样？
阿里尔
被限制在一起
与您负责的方式相同，
就像你离开他们一样；所有囚犯，先生，
在树林里，哪种天气保护着你的牢房
在你被释放之前，他们是不会让步的。国王，
他的兄弟和你的兄弟，忍受这三个分心的人
剩下的人为他们哀悼，
充满悲伤和沮丧；但主要是
先生，你称他为“善良的老冈萨洛勋爵
他的眼泪顺着胡须流下来，就像冬天的水滴一样
从芦苇的屋檐下。你的魅力如此强烈地影响着他们
如果你现在看到他们，你的感情
会变得温柔。
普洛斯彼罗
你这样认为吗，灵魂？
阿里尔
如果我是人类的话，我会的。
/*
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;
}
/*
HTML、XHTML和DHTML第四版的新视角
教程16
案例问题4
作者：柯林·克洛普斯坦
日期：2013年12月15日
文件名：scene.js
功能列表：
UniquelemText（元素名）
返回带有
标记名elemName。列表按字母顺序排列
已排序并作为数组返回。
*/
函数addEvent（对象、evName、FName、cap）{
if（object.attachEvent）
object.attachEvent（“on”+evName，fnName）；
else if（object.addEventListener）
object.addEventListener（evName、fnName、cap）；
}
addEvent（窗口，“加载”，字符框，假）//页面加载时调用createListBox（）
var sourceDoc=document.getElementById（“场景”）；
函数uniquelemtext（elemName）{
elems=document.getElementsByTagName（elemName）；
elemsArray=新数组（）；
对于（var i=0；i
这个javascript代码正在运行，我已经测试过了
var hiddenElement = new Array();
function sortLines(e) {
var character = e.target.value || e.srcElement.value;
for ( var x = 0; x < hiddenElement.length; x++ ) {
hiddenElement[x].style.display = 'block'; // display all hidden elements
}
if (character === 'ALL') { return false; } // return from here if all is selected
var allheadingelm = document.getElementsByTagName("h3");
var otherelm = new Array();
for (var i = 0; i < allheadingelm.length; i++) {
if (allheadingelm[i].innerHTML.indexOf(character) == -1) {
otherelm.push(allheadingelm[i]);
}
}
for (var j = 0; j < otherelm.length; j++) {
for (var n = otherelm[j].nextElementSibling; n != null; n = n.nextElementSibling) {
if (n.tagName.indexOf("H3") != -1 && n.innerHTML.indexOf(character) != -1) {
break;
} else {
n.style.display = "none";
hiddenElement.push(n);
}
}
otherelm[j].style.display = 'none';
hiddenElement.push(otherelm[j]);
}
}
您的要求有误，请检查。虽然不准确，但逻辑将保持不变
还有一个小提琴如果你想所有的样式也，第一小提琴将只给你的html
好的，我唯一的问题是，我不应该对html文件做任何更改。这一切都应该通过我的Javascript文件完成。我只是添加了它，例如，在您的上下文中，使Javascript工作更重要。您可以使用document.createElement通过Javascript添加元素。我对此表示歉意我没有明白我的意思。我只是想了解一下。这是我使用动态html的第一周。我觉得我对上面的代码已经很熟悉了。当我选择一个字符时，它会显示“未定义”一词对于字符和行，使用正确的格式。我可以对if/else或displayStatus做些什么吗？您能提供从哪里获得的确切代码吗？因为这对我来说很容易分析。我知道这可能不是首选方法，但我发布了我的JScript文件作为答案。我非常感谢您接受ti让我来帮我！
<h3>PROSPERO</h3> <blockquote class="PROSPERO">Dost thou think so, spirit? </blockquote>
<h3>ARIEL</h3> <blockquote class="ARIEL">Mine would, sir, were I human. </blockquote>
document.getElementsByClassName