Question

我正在尝试使用数组和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>

Answer 1

你的问题在这里

window.onload = quoteOfTheDay;
window.onload = allQuotes;

只有allQuotes将在窗口完成加载时运行，因为您只能为window.onload分配一个值。如果你想在窗口加载时调用它们将它们包装在一个函数中并将其分配给window.onload

window.onload = function(){
    quoteOfTheDay();
    allQuotes();
};

此外，您尝试获得quote_of_the_day和date的第一个孩子，但他们没有孩子。您可以将内容放在空格或类似内容中，也可以只设置整个内容而不是子节点的值。

Answer 2

我找不到起始正文标记，除非你故意错过它们，否则你的代码应该以：

结束

</body>
</html>

我会先解决这个问题，看看是否有帮助。

Answer 3

用

替换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 的子元素，但它是空的，因此代码失败。

Answer 4

您的脚本代码中存在一些逻辑错误。使用此方法

<强> 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并没有出现任何东西

4 个答案: