使用DOM并没有出现任何东西

问题描述 投票：1回答：4

我试图使用数组和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>
javascript dom
4个回答
-1
投票

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

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;
1
投票

你的问题在这里

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

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

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

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

0
投票

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

0
投票

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

</body>
</html>

我先解决这个问题然后看看是否有帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.