javascript - 尝试写入文档但没有加载任何内容

标签 javascript

所以这是我第一次尝试 Javascript,它可能真的很困惑。它的重点是输出日期,日期的每个部分都有不同的颜色。我研究了几种方法,这就是我想到的(根据请求添加的 HTML):

<body>

<p id="calendar"></p>


<script>
    var d = new Date();
    var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var colors = ["red", "green", "yellow", "blue", "brown"];
    var i;
    var fulldate = [];

    var fulldate[0] = days[d.getDay()];
    var fulldate[1] = d.getDate();
    var fulldate[2] = months[d.getMonth()];
    var fulldate[3] = d.getFullYear();
    var hours = d.getHours();
    var minutes = d.getMinutes();
    var fulldate[4] = hours + ":" + minutes

        for(i = 0; i < 5; i++){
            document.getElementById("calendar").innerHTML = "<span style=\"color:"colors[i]"\">" fulldate[i] "</span>"
        }
</script>
</body>

我正在尝试找出为什么它在我编写的段落标签中根本不显示任何内容。谁能看出我哪里出了问题吗?

最佳答案

你就快到了!

您可以做的几件事:

1. 您需要连接您的 stringvariable是您设置innerHTML的地方您的p使用 + 的元素字符串和变量之间的符号

例如"A string" + myVariableaVariable + "some string" + anotherVariable

2.初始化i (for 循环的计数器)在 for 内声明 - 您不需要在循环之前声明它,并且将来更容易阅读

删除var i;顶部附近的声明 - 它有点丢失。然后,在你的for(...)中声明,你可以初始化 i ,那里。

例如for(var i = 0; i < 5; i++) { ... }

3. 您正在替换 innerHTML您的#calendar for 循环的每次迭代。您可以使用+=附加到现有值。

例如document.getElementById('calendar').innerHTML += "...";

<小时/>

您的代码应如下所示:

for (var i = 0; i < 5; i++) {
    document
        .getElementById("calendar")
        .innerHTML += "<span style=\"color:" + colors[i] + "\">" + fulldate[i] + "</span>";
}

希望这有帮助:)

关于javascript - 尝试写入文档但没有加载任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39182114/

相关文章:

javascript - 如何卸载 windows.eval() 加载和解释的 Javascript?

JavaScript - 如何检测自定义 URL 方案是否可用?

javascript - 我正在尝试为我的私有(private) Discord JS 机器人执行 Autorole 功能

php - 使用 jQuery 在 div 中加载 PHP 页面

javascript - 将 2 个 google 图表数据表合并到 1 个

javascript - AAPT : No resource found that matches the given name: attr 'android:keyboardNavigationCluster'

javascript - 为什么 javascript 检测到我已经滚动到元素底部,而实际上我还没有滚动到元素底部?

javascript - 我的phonegap应用程序显示,但我无法点击任何内容

javascript - 到达滚动部分时计数器播放

javascript - 如何在 JavaScript 中连接两个不重复的字符串