Question

我尝试将外部JS文件中的数组加载到我的HTML中并遇到问题。

我的js.js：

var temp_max = [4,9,2,5,8,4,2,10];

我的HTML：

注意：请下载此文件DateJS并将其插入“DATE-JS”!!

<!doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--CSS for layout-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <!--Date library for german date layout-->
    <script src="DATE-JS"></script>
    <script src="js.js"></script>
</head>

<body>

        <br>
        <br>


    <div style="width:80%" position="absolute">

        <div class="header">

            <script>

                    for(var i = 0 ; i <8 ; i++)
                    {
                        var weekday=Date.today().addDays(i).toString('dddd');
                        document.write("<div id='div_weekday'>" + weekday + "</div>");
                    }

                    for(var i = 0 ; i <8 ; i++)
                    {
                        var day = Date.today().addDays(i).toString('dd');
                        document.write("<div id='div_date'>" + day + "</div>")
                    }

            </script>
        </div>
    </div>
</body>
</html>

我的CSS：

* {
  box-sizing: border-box;
}

body {
background-color: rgb(86,86,85);
}

h1:after {
    content: " ";
    width: 70.5%;
    height: 2px;
    background-color: rgb(228,203,153);
    position:absolute;
    top: 50%;
    margin-left: 15px

  }

  .header {
    width: 100%;
}

.header > div {
    color: rgb(228,203,153);
  width: 12.5%;
  float: left;
  border: solid rgb(228,203,153);
  border-width: 1px 1px 1px 0;
  text-align: left;
  word-break: break-all;
}
.header > div:first-child {
  border-width: 1px;
}


#div_date {
  border: none;
  width: 12.5%;
  font-size: 60px;
  text-align: right;
  border-bottom: solid rgba(228,203,153,0.3);
  border-width: 0.5px;
  padding-right: 1%
}

#div_weekday {
  border: none;
  width: 12.5%;
  font-size: 20px;
  text-align: left;
  padding-left: 1%
}

这是一个没有导入JS数组的截图。

所以我希望我的temp_max数组值显示在德国工作日的正上方！

所以在第一个信息之上：'Donnerstag'脚本应该显示数组中的值4，依此类推。

请注意，我想从外部JS文件导出此数组，我无法将此变量写入我的HTML文件中！

我已经尝试过使用

了

document.getElementById

但这对我不起作用。

Answer 1

如果问题只是循环创建的div，我想你可以这样做。您需要更改的只是为您的div添加不同的ID。只需在ids中使用i索引。

这样的事情：

创建：

for(var i = 0 ; i <8 ; i++) {
    var weekday=Date.today().addDays(i).toString('dddd');
    document.write("<div id='div_weekday_" + i + "'>" + weekday + "</div>");
}

更新数据：

for (var i = 0; i < 8; i++) {
    document.getElementById('div_weekday_' + i).innerHTML = temp_max[i].weekday;
}

将外部JS文件中的数组导入HTML

1 个答案: