将数组从外部JS文件导入HTML

Question

I try to load an array from an external JS file into my HTML and have problems with that. 我尝试将外部JS文件中的数组加载到HTML中，并且遇到了问题。

My js.js: 我的js.js：

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

My HTML: 我的HTML：

Note: Please download this file DateJS and insert it into "DATE-JS"!! 注意：请下载此文件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>

My CSS: 我的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%
}

Here is a screenshot without importing the JS array. 这是不导入JS数组的屏幕截图。

So I want that my temp_max array values are displayed exactly above the German weekdays! 因此，我希望我的temp_max数组值显示在德国工作日的正上方！

So above the first information: 'Donnerstag' the script should display the value 4 from the array and so on. 因此，在第一个信息上方：“ Donnerstag”，脚本应显示数组中的值4，依此类推。

Please note that I want to export this array from an external JS-file, I am not able to write this variable into my HTML file! 请注意，我要从外部JS文件导出此数组，因此无法将此变量写入HTML文件！

I already tried to use 我已经尝试使用

document.getElementById

but this does not work for me. 但这对我不起作用。

Answer 1

If the problem just in looping over the created divs, I think you can do this. 如果问题仅在于遍历已创建的div，我认为您可以这样做。 All what you need to change is just adding a different ids to your divs. 您需要更改的所有内容只是在div中添加了一个不同的ID。 Just use i index in your ids. 只需在您的ID中使用i索引即可。

Something like this: 像这样：

Creation: 创建：

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

Updating data: 更新数据：

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

将数组从外部JS文件导入HTML

问题描述

1 个解决方案

解决方案1
0 2018-03-29 11:21:25

将数组从外部JS文件导入HTML

问题描述

1 个解决方案

解决方案1 0 2018-03-29 11:21:25

解决方案1
0 2018-03-29 11:21:25