用于在容器中显示动态消息的 JavaScript 函数<div>

我已经从事此类练习已经有一段时间了，我无法弄清楚它的问题。首先，我一遍又一遍地挖了我的书，没有找到任何有用的答案的运气。然后，我用谷歌搜索了地狱，这是一个狂野的追逐ID，而不是再次经历。另外，我不希望任何人认为我只是在寻找某人来做我的工作。我通常需要一些帮助和指导。

我需要显示的是

JavaScript函数在容器中显示动态消息。
JavaScript功能要更改滚动条的颜色。
JavaScript函数要使用下拉列表链接到新网页。
JavaScript函数显示了最后修改网页的日期，并且在容器中显示了版权消息。

这是我到目前为止验证它的目的，我会收到此消息：

*第26行，第30列：文档类型不允许元素" H1"此处 displaydate.innerhtml ="今日是" 工作日 " monthdate " Year "。我们H…✉上面命名的元素是在不允许的情况下找到的。这可能意味着您的嵌套元素不正确 - 例如"正文"部分中的"样式"元素，而不是内部"头" - 或两个重叠的元素（不允许）。

错误行44，第34列：文档类型不允许元素" H6"此处displayCopyright.innerhtml ="此文档的URL是" document.url "＆lt;…✉上面命名的元素是在不允许的情况下找到的。这可能意味着您的嵌套元素错误 - 例如"正文"部分中的"样式"元素，而不是内部"头" - 或两个重叠的元素（不允许）。

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
<title>Oakwood Elementary School</title>
<script type="text/javascript">
<!--hide from older browsers-->
function coountDown(){
    var today = new Date()
    var dayofweek = today.toLocaleString()
    dayLocate = dayofweek.indexOf(" ")
    weekDay = dayofweek.substring(0, dayLocate)
    newDay = dayofweek.substring(dayLocate)
    dateLocate = newDay.indexOf(",")
    monthDate = newDay.substring(0, dateLocate+1)
    yearLocate = dayofweek.indexOf("2014")
    year = dayofweek.substr(yearLocate, 4)
    var ColumbusDay = new Date("October 8, 2014")
    var daysTooGo = ColumbusDay.getTime()-today.getTime()
    var daysToColumbusDay = Math.ceil(daysToGo/(1000*60*60*24))
    displayDate.innerHTML = "<h1>Today is "+weekDay+" "+monthDate+" "+year+". We have "+daysToColumbusDay+" days until Columbus Day.</h1>   
    }
function scrollColor() {
        styleObject=document.getElementsByTagName('html').style
        styleObject.scrollbarFaceColor="#fbb04"
        styleObject.scrollbarTrackColor="#ffe700"
}
function loadInfo(myForm) {
    var menuSelect=myForm.Menu.selectedIndex
    var menuUrl=myForm.Menu.options[menuSelect].value+".html"
    window.location=menuUrl
    }
    functions copyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
displayCopyRight.innerHTML = "<h6>The URL of this document is "+document.URL+"<br />Copyright Oakwood Elementary School"+"<br /> This document was last modified "+lastModDate+".</h6>"
}

</script>
<style type="text/css">
.center {
    text-align:center;
    }
table {
    margin-left:15%;
    margin-right:15%;
    }
.cell-width {
    width: 50%;
}
.left-align {
   width: 50%;
   left: 0;
   }
.right-align {
   width: 50%;
   right: 0;
   text-align: right; 
   } 
</style>
</head>
<body onload="scrollColor(); countDown(); copyRight()">
<div class="center">
<p><img src="chapter9Oakwood.jpg" alt="oakwood banner" width="750" height="120" /></p>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold;">OAKWOOD ELEMENTARY SCHOOL</p>
<img src="hrzntlrule.jpg" width="700" height="5" alt="hr" />
<div id="displayDate">
</div>
<img src="hrzntlrule.jpg" width="700" height="5" alt="hr" /> </div>
<table>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Oakwood Village School Board</p>
    <p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">The Oakwood Village School Board will have monthly meetings on the third Tuesday of the month this fall. Meeting days are September 18, October 16, November 19, and December 18, 2012. All meetings will start promptly at 7:30 p.m. and adjourn by 9 p.m. Meeting days for the spring semester will be determined at the December meeting.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Morning drop off and afternoon pick up</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">Please remember to enter the school drop off area from the south entrance and exit out the north drive way. As always, please watch for children walking to school.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Fall Fund Raiser</p>
<p style="font-family: 'Times New Roman', Times, serif; font-size:12pt">This fall, Oakwood Elementary School will have a flea market. We are seeking donations of usable items that can be sold at the flea market. Volunteers are needed to help with setup, sales, and post flea market clean up. Mike's Stop and Shop will serve hot dogs, hamburgers and refreshments.</p>
     </td>
  </tr>
  <tr>
    <td class="right-align"><img src="school-house_left.gif" alt="school" width="160" height="139" /></td>
    <td class="left-align">
          <img src="school-house_right.gif" alt="school" width="160" height="139" />
    </td>
  </tr>
    <tr>
    <td colspan="2">
    <form id="announceMenu" action=" ">
      <p style="font-weight:bolder">
       Select an item from the list to see other current announcements:
         <select name="Menu" onchange="loadInfo(this.form)">
           <option>Select an information item</option>
           <option value="chapter09fundraiser">October Fundraiser</option>
           <option value="chapter09pto">October PTO </option>
           <option value="chapter09tests">State Achievement Test</option>
         </select>
      </p>
    </form></td>
  </tr>
  <tr>
    <td colspan="2">
    <p style="font-weight:bold; font-family:Arial, sans-serif; font-size:14pt">Attendance Policy:
    <span style="font-family: 'Times New Roman', Times, serif; font-size:8pt">Please call in your child's attendance at 555-555-5555 x2205.</span>
    </p>    
    </td>
  </tr>
</table>
<p></p>
<div id="displayCopyRight">
</div>
</body>
</html>

您的代码中充满了错别字。您需要在浏览器中调试它。您可以在Firefox中使用Firebug，也可以使用Chrome的建筑调试器 - 按F12打开它。如果您想为此使用IE，上帝会帮助您（尤其是如果您有

我发现的一些错误：

1）错别字：coountdown，daystoogo，函数而不是函数

2）document.getElementsByTagName返回一个数组。因此，如果需要第一个元素，则应使用document.getElementsByTagName('html')[0]。我不确定您想在这里实现什么，但是您可能想将样式应用于身体（document.body）。

3）displayDate.innerHTML = "<h1>Today is "+weekDay+" "+monthDate+" "+year+". We have "+daysToColumbusDay+" days until Columbus Day.</h1>：您忘了关闭字符串。

4）当您创建变量时，请不要忘记var，就像使用styleObject一样。

您还应该考虑对代码进行审查。理想情况下，可以与您坐在一起并浏览代码的人，但您可以随时尝试。在我看到的许多内容中：除非您真的知道自己在做什么，请使用;。即使您知道自己在做什么，请使用它们。

至于h1和h6验证器所抱怨的，您可以随时使用document.createelement。

我对您的代码进行了一些调试。

主要是您是简单错别字的受害者。

我没有看到您的技术错，除了您一直在使用90年代后期的教科书。您不要责怪遵循所给出的示例，但是从那以后发生了一些变化。

您可能要纠正的几点：

使用;终止语句。尽管从理论上可以做到这一点，但它可能会引起罕见但痛苦的错误（通常是当错别字更改代码的含义时）。您可以将分号视为安全网，以避免错字的痛苦后果。
重新处理您的活动处理程序代码。现在它有效，但不是出于您期望的原因。

日期计算有点混乱，但是既然它正确显示您应该在纠正它时几乎没有麻烦。

为了避免将来这种挫败感，我建议您花一些时间熟悉您喜欢的浏览器的开发工具。

不幸的是，每个浏览器都会实现自己的开发工具的风味，因此我不能更具体，但是它们都提供相同的服务。
它们相对明确，您应该很难理解它们的工作方式。

控制台将显示所有错误，并且"调试"选项卡将允许您检查变量，设置断点等的内容。一旦您习惯了，这是一个大规模的节省时间。

<!--hide from older browsers--> // <-- obsolete
function countDown(){ // <-- typo corrected
    var today = new Date()
    var dayofweek = today.toLocaleString()
    dayLocate = dayofweek.indexOf(" ")
    weekDay = dayofweek.substring(0, dayLocate)
    newDay = dayofweek.substring(dayLocate)
    dateLocate = newDay.indexOf(",")
    monthDate = newDay.substring(0, dateLocate+1)
    yearLocate = dayofweek.indexOf("2014")
    year = dayofweek.substr(yearLocate, 4)
    var ColumbusDay = new Date("October 8, 2014")
    var daysToGo = ColumbusDay.getTime()-today.getTime() // <-- typo corrected
    var daysToColumbusDay = Math.ceil(daysToGo/(1000*60*60*24))
    var displayDate = document.getElementById ('displayDate'); // <-- grab the element from its ID
    displayDate.innerHTML = "<h1>Today is "+weekDay+" "+monthDate+" "+year+". We have " // <-- trouble with date bits
                          + daysToColumbusDay+" days until Columbus Day.</h1>";  // <-- missing " added
    }
function scrollColor() {
        styleObject=document.getElementsByTagName('html')[0].style // <-- array index added
        styleObject.scrollbarFaceColor="#fbb04"   // <-- IE specific style elements
        styleObject.scrollbarTrackColor="#ffe700"
}
function loadInfo(myForm) {
    var menuSelect=myForm.Menu.selectedIndex
    var menuUrl=myForm.Menu.options[menuSelect].value+".html"
    window.location=menuUrl
    }
    function copyRight() { // <-- typo corrected
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
displayCopyRight.innerHTML = "<h6>The URL of this document is "+document.URL+"<br />Copyright Oakwood Elementary School"+"<br /> This document was last modified "+lastModDate+".</h6>"
}

相关内容

最新更新

热门标签：