Fatal编程技术网
  • javascript/
  • Javascript 如何调用数组创建数组来调用函数？被调用的函数将按字母顺序在字符列表中显示选项

Javascript 如何调用数组创建数组来调用函数？被调用的函数将按字母顺序在字符列表中显示选项

javascript arrays

Javascript 如何调用数组创建数组来调用函数？被调用的函数将按字母顺序在字符列表中显示选项,javascript,arrays,dhtml,Javascript,Arrays,Dhtml,我正在为一个javascript、DHTML类做家庭作业。我需要创建一个函数来创建一个选择列表。在这个函数中，我试图创建一个数组字符来调用一个函数uniquelemtext，这是为我提供的。此函数将创建选择列表的选项并按字母顺序显示它们。这是我在DHTML工作的第一周，我迷路了！任何帮助都将不胜感激 以下是HTML文件的小片段： <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD

我正在为一个javascript、DHTML类做家庭作业。我需要创建一个函数来创建一个选择列表。在这个函数中，我试图创建一个数组字符来调用一个函数uniquelemtext，这是为我提供的。此函数将创建选择列表的选项并按字母顺序显示它们。这是我在DHTML工作的第一周，我迷路了！任何帮助都将不胜感激

以下是HTML文件的小片段：

<?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>
以及JavaScript文件：

/*
   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

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() {
    var boxHead = document.getElementById("characterList");
    boxHead.innerHTML = "<p>Show Only Lines By:</p>";
    var cList = document.createElement("select");
    boxHead.appendChild(cList);

    var characters = new Array(uniqueElemText);
    for (var i = 0; i < characters.length; i++) {
        var options = document.createElement("option");
        cList.appendChild(options);
    }
}
我错误地引用了UniquelemText。“characters”数组的值必须为=到UniquelemText“h3”。UniquelemText构建一个包含所有标记名为“h3”的元素的数组

还需要添加options.innerHTML=characters[i]；到我的for循环命令

function characterBox() {
    var boxHead = document.getElementById("characterList");
    boxHead.innerHTML = "<p>Show Only Lines By:</p>";
    var cList = document.createElement("select");
    boxHead.appendChild(cList);

    var characters = uniqueElemText("h3");
    for (var i = 0; i < characters.length; i++) {
        var options = document.createElement("option");
        options.innerHTML = characters[i];
        cList.appendChild(options);
    }
}
我在for循环中添加了一个命令，options.innerHTML=characters[I]。这将显示UniqueleText的实际命令，作为选择列表中的唯一选项。我觉得我很接近，但可能是打错了UniquelemText？