使用DOM时，什么也没有出现
Using DOM and nothing is appearing
我正在尝试使用数组和DOM向屏幕显示存储在数组中的引号。我相信我目前正在一个实例中使用文档对象模型，因为我正在获得输出。然而，在另一个例子中，我无法在屏幕上显示任何内容（日期和当天的报价没有显示在屏幕上）。
我看了又看，试图找出我做错了什么，但没有成功。这是一个任务，我需要使用DOM。
<html>
<head>
<meta charset="utf-8">
<title>JSJQ Assignment 4 - Arrays / Date Starter File</title>
<style>
body{
font-family: arial, sans-serif;
font-size: 100%;
}
form{
margin-top: 50px;
}
</style>
<script>
//************************************************************
// 1: define variables for today's date,
//************************************************************
var today = new Date();
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
//************************************************************
// 2: define an array to hold the day names
//************************************************************
var monthArray = new Array();
monthArray[0] = "January";
monthArray[1] = "February";
monthArray[2] = "March";
monthArray[3] = "April";
monthArray[4] = "May";
monthArray[5] = "June";
monthArray[6] = "July";
monthArray[7] = "August";
monthArray[8] = "September";
monthArray[9] = "October";
monthArray[10] = "November";
monthArray[11] = "December";
var dayArray = new Array();
dayArray[0] = "Monday";
dayArray[1] = "Tuesday";
dayArray[2] = "Wednesday";
dayArray[3] = "Thursday";
dayArray[4] = "Friday";
dayArray[5] = "Saturday";
dayArray[6] = "Sunday";
//************************************************************
// 3: define an array to hold the daily quotes
//************************************************************
var quoteArray = new Array();
quoteArray[0] = "Ability is nothing without opportunity - Napoleon Bonaparte";
quoteArray[1] = "Nothing happens unless first we dream - Carl Sandburg";
quoteArray[2] = "Believe you can and you're halfway there - Theodore Roosevelt";
quoteArray[3] = "A place for everything, everything in its place - Benjamin Franklin";
quoteArray[4] = "Don't let the fear of striking out hold you back - Babe Ruth";
quoteArray[5] = "We can't help everyone, but everyone can help someone - Ronald Reagan";
quoteArray[6] = "With self-discipline most anything is possible - Theodore Roosevelt";
//************************************************************
// 4: loop through all of the quotes
// and write the quotes to the page. Use DOM methods or innerHTML
// to write to the page.
//************************************************************
function allQuotes() {
var allQuotes = document.getElementById('quotes');
for (var i = 0; i < quoteArray.length; i++) {
var text = document.createTextNode(quoteArray[i]);
var br = document.createElement('br');
allQuotes.appendChild(text);
allQuotes.appendChild(br);
}
quoteOfTheDay();
}
//************************************************************
// 5: create a window.onload function to format and display
// the current day name.
//
// Display the quote for the day.
//
//
//************************************************************
function quoteOfTheDay() {
document.getElementById('quote_of_the_day').firstChild.nodeValue = quoteArray[today.getDay()-1];
document.getElementById('date').firstChild.nodeValue = dayArray[day] + ", " + monthArray[month] + day + ", " + year;
}
window.onload = allQuotes;
</script>
</head>
<body>
<h1>Quote of the Day</h1>
<p id="quote_of_the_day"></p>
<p id="date"></p>
<h2>All the quotes:</h2>
<p id="quotes"></p>
</body>
</html>
您的问题在这里
window.onload = quoteOfTheDay;
window.onload = allQuotes;
当窗口加载完成时，只有allQuotes将运行，因为您只能为window.onload分配一个值。如果您希望在窗口加载时同时调用这两个函数，请将它们封装在一个函数中，并将其分配给window.onload
window.onload = function(){
quoteOfTheDay();
allQuotes();
};
此外，您试图获得quote_of_the_day和date的第一个子代，但它们没有子代。您可以将内容像空间或其他东西一样放在其中，也可以只设置整个内容，而不是子节点的值。
将quoteOfTheDay函数替换为
function quoteOfTheDay() {
document.getElementById('quote_of_the_day').firstChild.nodeValue = quoteArray[today.getDay() - 1];
// document.getElementById('date').firstChild.nodeValue = dayArray[day] + ", " + monthArray[month] + day + ", " + year;
}
并在quote_of_the_day中添加一个伪元素，例如
<p id="quote_of_the_day"><span></span></p>
，因为代码正在寻找quote_of_the_day的子元素，但它是空的，所以代码失败了。
我找不到起始正文标记，除非你故意错过了它们，否则你的代码应该以结尾
</body>
</html>
我会先解决这个问题，看看它是否有帮助。
您的脚本代码中存在一些逻辑错误。使用此方法
HTML
<html>
<head>
</head>
<title>JSJQ Assignment 4 - Arrays / Date Starter File</title>
<body>
<h1>Quote of the Day</h1>
<p id="quote_of_the_day"></p>
<p id="date"></p>
<h2>All the quotes:</h2>
<p id="quotes"></p>
</body>
</html>
脚本
var today = new Date();
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
//************************************************************
// 2: define an array to hold the day names
//************************************************************
var monthArray = new Array();
monthArray[0] = "January";
monthArray[1] = "February";
monthArray[2] = "March";
monthArray[3] = "April";
monthArray[4] = "May";
monthArray[5] = "June";
monthArray[6] = "July";
monthArray[7] = "August";
monthArray[8] = "September";
monthArray[9] = "October";
monthArray[10] = "November";
monthArray[11] = "December";
var dayArray = new Array();
dayArray[0] = "Monday";
dayArray[1] = "Tuesday";
dayArray[2] = "Wednesday";
dayArray[3] = "Thursday";
dayArray[4] = "Friday";
dayArray[5] = "Saturday";
dayArray[6] = "Sunday";
//************************************************************
// 3: define an array to hold the daily quotes
//************************************************************
var quoteArray = new Array();
quoteArray[0] = "Ability is nothing without opportunity - Napoleon Bonaparte";
quoteArray[1] = "Nothing happens unless first we dream - Carl Sandburg";
quoteArray[2] = "Believe you can and you're halfway there - Theodore Roosevelt";
quoteArray[3] = "A place for everything, everything in its place - Benjamin Franklin";
quoteArray[4] = "Don't let the fear of striking out hold you back - Babe Ruth";
quoteArray[5] = "We can't help everyone, but everyone can help someone - Ronald Reagan";
quoteArray[6] = "With self-discipline most anything is possible - Theodore Roosevelt";
//************************************************************
// 4: loop through all of the quotes
// and write the quotes to the page. Use DOM methods or innerHTML
// to write to the page.
//************************************************************
function allQuotes() {
var allQuotes = document.getElementById('quotes');
for (var i = 0; i < quoteArray.length; i++) {
var text = document.createTextNode(quoteArray[i]);
var br = document.createElement('br');
allQuotes.appendChild(text);
allQuotes.appendChild(br);
}
quoteOfTheDay();
}
//************************************************************
// 5: create a window.onload function to format and display
// the current day name.
//
// Display the quote for the day.
//
//
//************************************************************
function quoteOfTheDay() {
document.getElementById('quote_of_the_day').firstChild.nodeValue = quoteArray[today.getDay()-1];
document.getElementById('date').firstChild.nodeValue = dayArray[day] + ", " + monthArray[month] + day + ", " + year; }
window.onload = allQuotes;
相关文章：
- DOM元素和angular元素之间的主要区别是什么
- 直接在DOM事件处理程序中调用作用域函数的最短方法是什么
- 这两种使用 jQuery 追加 DOM 元素的方法有什么不同
- 创建具有关联 dom 元素的 javascript 对象的首选方法是什么
- 根据DOM，HTML元素的开始和结束标记之间的内容被称为属性.这个房产的名字是什么
- 什么是子树(在JavaScript中引用DOM时）
- 使用DOM时，什么也没有出现
- 在表单提交将DOM的一部分替换为分部之后，我应该将ajax成功绑定到什么来使我的javascript工作
- 从DOM中清空一系列元素的最快方法是什么
- 存在什么库来提供跨浏览器 DOM 访问
- 索引数据库与DOM有什么关系吗?
- 模糊 DOM 元素时会发生什么
- DOM解析，加载，渲染，就绪有什么区别
- 什么是 FORM 相当于 DOM 的 getNextSibling
- 拖动DOM元素时有什么方法可以更改光标样式
- DOM、原始 html 以及页面上显示的内容是什么关系
- 什么可以存储在 DOM 存储中
- 在 DOM 中测试元素的最佳方法是什么?
- 聚合物 dom-module 什么也没显示
- DOM 对象是什么类型的对象
