滚动字幕未捕获类型错误:无法读取属性'style'的未定义

Scrolling marquee Uncaught TypeError: Cannot read property 'style' of undefined

本文关键字:属性 读取 未定义 style 字幕 类型 错误 滚动      更新时间:2023-09-26

所以我一直在想出typeError:无法读取未定义的属性"style"。它位于javascript的最后一行。任何人有任何建议。成品是一个带有垂直滚动文本的字幕。

window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
/* defineMarquee()
      Initializes the contents of the marquee, determines the
      top style positions of each marquee item, and sets the
      onclick event handlers for the document
*/
function defineMarquee() {
  var topValue
  var allElems = document.getElementsByTagName("*");
  for (var i = 0; i < allElems.length; i++) {
    if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
  }
  //Extract the "top" CSS class from marqueeTxt
  for (var i = 0; i < marqueeTxt.length; i++) {
    if (marqueeTxt[i].getComputedStyle) {
      topValue = marqueeTxt[i].getPropertyValue("top")
    } else if (marqueeTxt[i].currentStyle) {
      topValue = marqueeTxt[i].currentStyle("top");
    }
    marqueeTxt[i].style.top = topValue;
  }

  document.getElementById("startMarquee").onclick = startMarquee;
  document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
      Starts the marquee in motion
*/
function startMarquee() {
  if (marqueeOff == true) {
    timeID = setInterval("moveText()", 50);
    marqueeOff = false;
  }
}
/* stopMarquee()
   Stops the Marquee
*/
function stopMarquee() {
  clearInterval(timeID);
  marqueeOff = true;
}
/* moveText ()
   move the text within the marquee in a vertical direction
*/
function moveText() {
  for (var i = 0; i < marqueeTxt.length; i++) {
    topPos = parseInt(marqueeTxt[i].style.top);
  }
  if (topPos < -110) {
    topPos = 700;
  } else {
    topPos -= 1;
  }
  marqueeTxt[i].style.top = topPos + "px";
}
* {
  margin: 0px;
  padding: 0px
}
body {
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif
}
#pageContent {
  position: absolute;
  top: 0px;
  left: 30px;
  width: 800px
}
#links {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(0, 153, 102);
  float: left
}
#links {
  list-style-type: none
}
#links li {
  display: block;
  float: left;
  text-align: center;
  width: 19%
}
#links li a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: black;
  background-color: white
}
#links li a:hover {
  color: white;
  background-color: rgb(0, 153, 102)
}
#leftCol {
  clear: left;
  float: left
}
h1 {
  font-size: 24px;
  letter-spacing: 5px;
  color: rgb(0, 153, 102)
}
#main {
  float: left;
  width: 450px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgb(0, 153, 102);
  padding-bottom: 15px
}
#main img {
  float: right;
  margin: 0px 0px 10px 10px
}
#main p {
  margin-bottom: 10px
}
address {
  width: 100%;
  clear: left;
  font-style: normal;
  font-size: 12px;
  border-top: 1px solid black;
  text-align: center;
  padding-bottom: 15px
}
.marquee {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 280px;
  height: 300px;
  background-color: rgb(0, 153, 102);
  color: white;
  border: 5px inset white;
  padding: 0px;
  overflow: hidden;
  position: relative
}
#marqueeTxt1 {
  font-size: 1.4em;
  letter-spacing: 0.15em;
  border-bottom: 1px solid white
}
input {
  width: 120px;
  margin: 5px;
  font-size: 0.9em
}
#marqueeButtons {
  width: 280px;
  text-align: center
}
#marqueeTxt1 {
  position: absolute;
  top: 40px;
  left: 20px
}
#marqueeTxt2 {
  position: absolute;
  top: 90px;
  left: 20px
}
#marqueeTxt3 {
  position: absolute;
  top: 170px;
  left: 20px
}
#marqueeTxt4 {
  position: absolute;
  top: 250px;
  left: 20px
}
#marqueeTxt5 {
  position: absolute;
  top: 330px;
  left: 20px
}
#marqueeTxt6 {
  position: absolute;
  top: 410px;
  left: 20px
}
#marqueeTxt7 {
  position: absolute;
  top: 490px;
  left: 20px
}
#marqueeTxt8 {
  position: absolute;
  top: 570px;
  left: 20px
}
#marqueeTxt9 {
  position: absolute;
  top: 640px;
  left: 20px
}
<?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 JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 3
   BYSO Web Page
   Author: Gavin Macken
   Date: 28 Feb `15  
   Filename:         byso.htm
   Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
  <title>Boise Youth Symphony Orchestra</title>
  <link href="bstyles.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="marquee.js"></script>
</head>
<body>
  <form id="marqueeForm" action="">
    <div id="pageContent">
      <div id="head">
        <img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" />
      </div>
      <ul id="links">
        <li><a href="#">Home Page</a>
        </li>
        <li><a href="#">About BYSO</a>
        </li>
        <li><a href="#">Our Director</a>
        </li>
        <li><a href="#">Join BYSO</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
      <div id="leftCol">
        <div class="marquee">
          <div id="marqueeTxt1" class="marqueeTxt">
            Schedule of Events
          </div>
          <div id="marqueeTxt2" class="marqueeTxt">
            Holiday Concert
            <br />December 14, 7:30 PM
            <br />Boise Civic Center
          </div>
          <div id="marqueeTxt3" class="marqueeTxt">
            Christmas Concert
            <br />Dec. 16, 7 PM
            <br />Our Savior Episcopal Church
          </div>
          <div id="marqueeTxt4" class="marqueeTxt">
            Spring Concert
            <br />Feb. 27, 7 PM
            <br />Boise Civic Center
          </div>
          <div id="marqueeTxt5" class="marqueeTxt">
            Easter Fanfare
            <br />March 14, 9 PM
            <br />Our Savior Episcopal Church
          </div>
          <div id="marqueeTxt6" class="marqueeTxt">
            High School MusicFest
            <br />May 2, 3 PM
            <br />Boise Central High School
          </div>
          <div id="marqueeTxt7" class="marqueeTxt">
            Summer Concert
            <br />June 15, 7:30 PM
            <br />Frontier Concert Hall
          </div>
          <div id="marqueeTxt8" class="marqueeTxt">
            Fourth Fest
            <br />July 4, 4 PM
            <br />Canyon View Park
          </div>
          <div id="marqueeTxt9" class="marqueeTxt">
            Frontier Days
            <br />August 9, 1 PM
            <br />Boise Concert Hall
          </div>
        </div>
        <div id="marqueeButtons">
          <input type="button" id="startMarquee" value="Start Marquee" />
          <input type="button" id="stopMarquee" value="Pause Marquee" />
        </div>
      </div>
      <div id="main">
        <h1>Boise Youth Symphony Orchestra</h1>
        <img src="byso.jpg" alt="" />
        <p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with beautiful music while offering the highest quality musical training to over 1,000 teens throughout Idaho for the past 30 years. BYSO has established an outstanding reputation
          for its high quality sound, its series of commissioned works, and collaborations with prominent musical groups such as the Idaho and Boise Symphony Orchestras, the Montana Chamber Orchestra, the Boise Adult Choir and the Western Symphony Orchestra.
          Last year the group was invited to serve as the U.S. representative to the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
        <p>Leading this success for the past decade has been Boise Symphony artistic director Denise Young. In a concert review by John Aehl, music critic for the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that the orchestra is playing
          better than ever."</p>
      </div>
      <address>
    BYSO &#183; 300 Mountain Lane &#183; Boise, Idaho  83702 &#183; (208) 555 - 9114
    </address>
    </div>
  </form>
</body>
</html>

使用marqueeTxt[i]的代码需要在for(var i)循环中。

这将修复该错误。字幕仍然不会滚动,因为marqueeTxt[i].style.top为空。defineMarquee()尝试设置此项的方式不起作用。当我遍历它时,getComputedStylecurrentStyle都没有定义,所以它跳过了设置topValue的两种方法。

window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
/* defineMarquee()
      Initializes the contents of the marquee, determines the
      top style positions of each marquee item, and sets the
      onclick event handlers for the document
*/
function defineMarquee() {
  var topValue
  var allElems = document.getElementsByTagName("*");
  for (var i = 0; i < allElems.length; i++) {
    if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
  }
  //Extract the "top" CSS class from marqueeTxt
  for (var i = 0; i < marqueeTxt.length; i++) {
    if (marqueeTxt[i].getComputedStyle) {
      topValue = marqueeTxt[i].getPropertyValue("top")
    } else if (marqueeTxt[i].currentStyle) {
      topValue = marqueeTxt[i].currentStyle("top");
    }
    marqueeTxt[i].style.top = topValue;
  }
  document.getElementById("startMarquee").onclick = startMarquee;
  document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
      Starts the marquee in motion
*/
function startMarquee() {
  if (marqueeOff == true) {
    timeID = setInterval("moveText()", 50);
    marqueeOff = false;
  }
}
/* stopMarquee()
   Stops the Marquee
*/
function stopMarquee() {
  clearInterval(timeID);
  marqueeOff = true;
}
/* moveText ()
   move the text within the marquee in a vertical direction
*/
function moveText() {
  for (var i = 0; i < marqueeTxt.length; i++) {
    topPos = parseInt(marqueeTxt[i].style.top);
    if (topPos < -110) {
      topPos = 700;
    } else {
      topPos -= 1;
    }
    marqueeTxt[i].style.top = topPos + "px";
  }
}
* {
  margin: 0px;
  padding: 0px
}
body {
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif
}
#pageContent {
  position: absolute;
  top: 0px;
  left: 30px;
  width: 800px
}
#links {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(0, 153, 102);
  float: left
}
#links {
  list-style-type: none
}
#links li {
  display: block;
  float: left;
  text-align: center;
  width: 19%
}
#links li a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: black;
  background-color: white
}
#links li a:hover {
  color: white;
  background-color: rgb(0, 153, 102)
}
#leftCol {
  clear: left;
  float: left
}
h1 {
  font-size: 24px;
  letter-spacing: 5px;
  color: rgb(0, 153, 102)
}
#main {
  float: left;
  width: 450px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgb(0, 153, 102);
  padding-bottom: 15px
}
#main img {
  float: right;
  margin: 0px 0px 10px 10px
}
#main p {
  margin-bottom: 10px
}
address {
  width: 100%;
  clear: left;
  font-style: normal;
  font-size: 12px;
  border-top: 1px solid black;
  text-align: center;
  padding-bottom: 15px
}
.marquee {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 280px;
  height: 300px;
  background-color: rgb(0, 153, 102);
  color: white;
  border: 5px inset white;
  padding: 0px;
  overflow: hidden;
  position: relative
}
#marqueeTxt1 {
  font-size: 1.4em;
  letter-spacing: 0.15em;
  border-bottom: 1px solid white
}
input {
  width: 120px;
  margin: 5px;
  font-size: 0.9em
}
#marqueeButtons {
  width: 280px;
  text-align: center
}
#marqueeTxt1 {
  position: absolute;
  top: 40px;
  left: 20px
}
#marqueeTxt2 {
  position: absolute;
  top: 90px;
  left: 20px
}
#marqueeTxt3 {
  position: absolute;
  top: 170px;
  left: 20px
}
#marqueeTxt4 {
  position: absolute;
  top: 250px;
  left: 20px
}
#marqueeTxt5 {
  position: absolute;
  top: 330px;
  left: 20px
}
#marqueeTxt6 {
  position: absolute;
  top: 410px;
  left: 20px
}
#marqueeTxt7 {
  position: absolute;
  top: 490px;
  left: 20px
}
#marqueeTxt8 {
  position: absolute;
  top: 570px;
  left: 20px
}
#marqueeTxt9 {
  position: absolute;
  top: 640px;
  left: 20px
}
<?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 JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 3
   BYSO Web Page
   Author: Gavin Macken
   Date: 28 Feb `15  
   Filename:         byso.htm
   Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
  <title>Boise Youth Symphony Orchestra</title>
  <link href="bstyles.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="marquee.js"></script>
</head>
<body>
  <form id="marqueeForm" action="">
    <div id="pageContent">
      <div id="head">
        <img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" />
      </div>
      <ul id="links">
        <li><a href="#">Home Page</a>
        </li>
        <li><a href="#">About BYSO</a>
        </li>
        <li><a href="#">Our Director</a>
        </li>
        <li><a href="#">Join BYSO</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
      <div id="leftCol">
        <div class="marquee">
          <div id="marqueeTxt1" class="marqueeTxt">
            Schedule of Events
          </div>
          <div id="marqueeTxt2" class="marqueeTxt">
            Holiday Concert
            <br />December 14, 7:30 PM
            <br />Boise Civic Center
          </div>
          <div id="marqueeTxt3" class="marqueeTxt">
            Christmas Concert
            <br />Dec. 16, 7 PM
            <br />Our Savior Episcopal Church
          </div>
          <div id="marqueeTxt4" class="marqueeTxt">
            Spring Concert
            <br />Feb. 27, 7 PM
            <br />Boise Civic Center
          </div>
          <div id="marqueeTxt5" class="marqueeTxt">
            Easter Fanfare
            <br />March 14, 9 PM
            <br />Our Savior Episcopal Church
          </div>
          <div id="marqueeTxt6" class="marqueeTxt">
            High School MusicFest
            <br />May 2, 3 PM
            <br />Boise Central High School
          </div>
          <div id="marqueeTxt7" class="marqueeTxt">
            Summer Concert
            <br />June 15, 7:30 PM
            <br />Frontier Concert Hall
          </div>
          <div id="marqueeTxt8" class="marqueeTxt">
            Fourth Fest
            <br />July 4, 4 PM
            <br />Canyon View Park
          </div>
          <div id="marqueeTxt9" class="marqueeTxt">
            Frontier Days
            <br />August 9, 1 PM
            <br />Boise Concert Hall
          </div>
        </div>
        <div id="marqueeButtons">
          <input type="button" id="startMarquee" value="Start Marquee" />
          <input type="button" id="stopMarquee" value="Pause Marquee" />
        </div>
      </div>
      <div id="main">
        <h1>Boise Youth Symphony Orchestra</h1>
        <img src="byso.jpg" alt="" />
        <p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with beautiful music while offering the highest quality musical training to over 1,000 teens throughout Idaho for the past 30 years. BYSO has established an outstanding reputation
          for its high quality sound, its series of commissioned works, and collaborations with prominent musical groups such as the Idaho and Boise Symphony Orchestras, the Montana Chamber Orchestra, the Boise Adult Choir and the Western Symphony Orchestra.
          Last year the group was invited to serve as the U.S. representative to the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
        <p>Leading this success for the past decade has been Boise Symphony artistic director Denise Young. In a concert review by John Aehl, music critic for the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that the orchestra is playing
          better than ever."</p>
      </div>
      <address>
    BYSO &#183; 300 Mountain Lane &#183; Boise, Idaho  83702 &#183; (208) 555 - 9114
    </address>
    </div>
  </form>
</body>
</html>

上面几乎是对的,但仍然有一个错误。改变if(marqueeTxt[i].getComputedStyle) { topValue = marqueeTxt[i].getPropertyValue("top") } else if (marqueeTxt[i].currentStyle) { topValue = marqueeTxt[i].currentStyle("top"); }

至CCD_ 9,并添加

function getStyle(elem,name){
  //如果属性存在于style[]中,那么他已被设置了,并是最终的
  if(elem.style[name])
    return elem.style[name];
  //否则尝试ie的办法
  else if(elem.currentStyle)
    return elem.currentStyle[name];
  //或者w3c的方法,如果存在的话
  else if(document.defaultView&&document.defaultView.getComputedStyle){
    name=name.replace(/([A-Z])/g,"-$1");
    name=name.toLowerCase();
    var s=document.defaultView.getComputedStyle(elem,'');
    return s&&s.getPropertyValue(name);
  }//否则用户使用的是其他浏览器,返回null
  else return null;
}

然后文件就可以工作了。

因此,多亏了.getComputedStyle方法,我成功地解决了这个问题。谢谢你让我走上了正确的道路。

window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
/* defineMarquee()
      Initializes the contents of the marquee, determines the
      top style positions of each marquee item, and sets the
      onclick event handlers for the document
*/
   function defineMarquee() {
   var topValue = 0;
   var allElems = document.getElementsByTagName("*");
   for(var i = 0; i < allElems.length; i++){
      if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
   }
//Extract the "top" CSS class from marqueeTxt
   for(var i = 0; i < marqueeTxt.length; i++){
      if (window.getComputedStyle) {
       topValue = document.defaultView.getComputedStyle(marqueeTxt[i]).getPropertyValue("top");}
       else if (marqueeTxt[i].currentStyle) {
         topValue = document.defaultView.marqueeTxt[i].currentStyle["top"];
       }
         marqueeTxt[i].style.top = topValue;
   }
 
   document.getElementById("startMarquee").onclick = startMarquee;
   document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
      Starts the marquee in motion
*/
   function startMarquee() {
      if(marqueeOff ==  true) {
         timeID = setInterval("moveText()", 50);
         marqueeOff = false;
      }
   }
/* stopMarquee()
   Stops the Marquee
*/
   function stopMarquee() {
      clearInterval(timeID);
      marqueeOff = true;
   }  
/* moveText ()
   move the text within the marquee in a vertical direction
*/
function moveText (){
for(var i = 0; i < marqueeTxt.length; i++) {
      
   topPos = parseInt(marqueeTxt[i].style.top);  
  
   if(topPos < -110) {
      topPos = 700;
   } else { topPos -= 1;
   }
   marqueeTxt[i].style.top = topPos + "px";
}
}
*                    {margin: 0px; padding: 0px}
body                 {font-size: 15px; font-family: Arial, Helvetica, sans-serif}
#pageContent         {position: absolute; top: 0px; left: 30px; width: 800px}
#links               {display: block; width: 100%; margin-bottom: 20px;
                      border-bottom: 1px solid rgb(0,153, 102); float: left}
#links               {list-style-type: none}
#links li            {display: block; float: left; text-align: center; width: 19%}
#links li a          {display: block; width: 100%; text-decoration: none; color: black;
                      background-color: white}
#links li a:hover    {color: white; background-color: rgb(0,153,102)}
#leftCol             {clear: left; float: left}
h1                   {font-size: 24px; letter-spacing: 5px; color: rgb(0, 153,102)}
#main                {float: left; width: 450px; margin-left: 10px; 
                      padding-left: 10px; border-left: 1px solid rgb(0,153,102);
                      padding-bottom: 15px}
#main img            {float: right; margin: 0px 0px 10px 10px}
#main p              {margin-bottom: 10px}
address              {width: 100%; clear: left; font-style: normal; font-size: 12px;
                      border-top: 1px solid black; text-align: center;
                      padding-bottom: 15px}
.marquee             {position: absolute; top: 0px; left: 0px;
                      width: 280px; height: 300px;
                      background-color: rgb(0, 153, 102); color:white; 
                      border: 5px inset white; 
                      padding:0px; overflow:hidden; position:relative}
#marqueeTxt1         {font-size: 1.4em; letter-spacing: 0.15em; border-bottom: 1px solid white}
input                {width: 120px; margin: 5px; font-size: 0.9em}
#marqueeButtons      {width: 280px; text-align: center}
#marqueeTxt1         {position: absolute; top: 40px; left: 20px}
#marqueeTxt2         {position: absolute; top: 90px; left: 20px}
#marqueeTxt3         {position: absolute; top: 170px; left: 20px}
#marqueeTxt4         {position: absolute; top: 250px; left: 20px}
#marqueeTxt5         {position: absolute; top: 330px; left: 20px}
#marqueeTxt6         {position: absolute; top: 410px; left: 20px}
#marqueeTxt7         {position: absolute; top: 490px; left: 20px}
#marqueeTxt8         {position: absolute; top: 570px; left: 20px}
#marqueeTxt9         {position: absolute; top: 640px; left: 20px}
<?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 JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 3
   BYSO Web Page
   Author: Gavin Macken
   Date: 28 Feb `15  
   Filename:         byso.htm
   Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
   <title>Boise Youth Symphony Orchestra</title>
   <link href="bstyles.css" rel="stylesheet" type="text/css" />
   <script type = "text/javascript" src = "marquee.js"></script>
</head>
<body>
   <form id="marqueeForm" action="">
   <div id="pageContent">
      <div id="head"><img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" /></div>
      <ul id="links">
         <li><a href="#">Home Page</a></li>
         <li><a href="#">About BYSO</a></li>
         <li><a href="#">Our Director</a></li>
         <li><a href="#">Join BYSO</a></li>
         <li><a href="#">Contact Us</a></li>
      </ul>
      <div id="leftCol">
      <div class="marquee">
         <div id="marqueeTxt1" class="marqueeTxt">
            Schedule of Events
         </div>
         <div id="marqueeTxt2" class="marqueeTxt">
            Holiday Concert<br />
            December 14, 7:30 PM<br /> 
            Boise Civic Center
         </div>
         <div id="marqueeTxt3" class="marqueeTxt">
            Christmas Concert<br /> 
            Dec. 16, 7 PM<br /> 
            Our Savior Episcopal Church
         </div>
         <div id="marqueeTxt4" class="marqueeTxt">
            Spring Concert<br />
            Feb. 27, 7 PM<br /> 
            Boise Civic Center
         </div>
         <div id="marqueeTxt5" class="marqueeTxt">
            Easter Fanfare<br />
            March 14, 9 PM<br />
            Our Savior Episcopal Church
         </div>
         <div id="marqueeTxt6" class="marqueeTxt">
            High School MusicFest<br />
            May 2, 3 PM<br />
            Boise Central High School
         </div>
         <div id="marqueeTxt7" class="marqueeTxt">
            Summer Concert<br />
            June 15, 7:30 PM<br />
            Frontier Concert Hall
         </div>
         <div id="marqueeTxt8" class="marqueeTxt">
            Fourth Fest<br />
            July 4, 4 PM<br />
            Canyon View Park
         </div>
         <div id="marqueeTxt9" class="marqueeTxt">
            Frontier Days<br />
            August 9, 1 PM<br />
            Boise Concert Hall
         </div>     
      </div>
      <div id="marqueeButtons">
         <input type="button" id="startMarquee" value="Start Marquee" />
         <input type="button" id="stopMarquee" value="Pause Marquee" />
      </div>
      </div>
      <div id="main">
         <h1>Boise Youth Symphony Orchestra</h1>
         <img src="byso.jpg" alt="" />
         <p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with 
            beautiful music while offering the highest quality musical training to over 
            1,000 teens throughout Idaho for the past 30 years. BYSO 
            has established an outstanding reputation for its high quality sound, its 
            series of commissioned works, and collaborations with prominent musical groups 
            such as the Idaho and Boise Symphony Orchestras, the Montana Chamber 
            Orchestra, the Boise Adult Choir and the Western Symphony Orchestra. 
            Last year the group was invited to serve as the U.S. representative to 
            the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
         <p>Leading this success for the past decade has been Boise Symphony artistic 
            director Denise Young. In a concert review by John Aehl, music critic for 
            the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that 
            the orchestra is playing better than ever."</p>
      </div>
    <address>
    BYSO &#183; 300 Mountain Lane &#183; Boise, Idaho  83702 &#183; (208) 555 - 9114
    </address>
   </div>
</form>
</body>
</html>