滚动字幕未捕获的TypeError:无法读取未定义的属性“样式”

时间:2015-03-03 05:14:12

标签: javascript typeerror

所以我不断提出typeError:无法读取属性'style'undefined。 它位于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>

3 个答案:

答案 0 :(得分:0)

使用marqueeTxt[i]的代码需要位于for(var i)循环内。

这将解决该错误。选框仍然无法滚动,因为marqueeTxt[i].style.top为空。 defineMarquee()尝试设置此功能的方式并不起作用。当我单步执行时,getComputedStylecurrentStyle都没有定义,因此它会跳过设置topValue的两种方法。

&#13;
&#13;
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";
  }

}
&#13;
* {
  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
}
&#13;
<?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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

topValue=getStyle(marqueeTxt[i],'top');, 并添加

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;
}

然后该文件将起作用。

答案 2 :(得分:0)

由于.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>