Question

我有2个文件，filter.html和filter.js。在filter.html我有一个id为“test”的div，在filter.js我有一个名为“finishedHTML”的变量。

现在我想把“finishedHTML”的内容写成测试div作为html代码，但是html的东西“finishedHTML”是空的。我该如何解决这个问题？

来源：

var finishedHTML = "<h2>Yes it works</h2>"

header {
  display: block;
  background: #A2AFBC;
  top: 0;
  height: 50px;
  position: fixed;
  width: 100%;  
  text-align: center;
}

footer {
  height: 50px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  background: #A2AFBC;
  position: fixed;
}
.headerTitle {
  font-size: 2.0em;
  font-family: Verdana;
  font-weight: 100;
  color: #506B84;
  margin: 0em;
  font-weight: bold;
}

h2 {
  font-size: 3.0 em;
  color: red;
}

<html>    
<head>
    <title>title</title>
    <link rel="stylesheet" href="style.css" type="text/css" >
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
    <!--Filter.js-->
    <script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
    <header>
        <span class="headerTitle">Header Text</span>
    </header>

    <div id="test" style="margin-left: 300px; padding-top: 300px;">
        <h1>This is a test text</h1>
    </div>
    <script language="javascript" type="text/javascript">
        document.getElementById('test').innerHTML = finishedHTML;
    </script>
    <footer>
    </footer>
</body>
</html>

感谢你的帮助！

Answer 1

只有在声明变量finishedHTML之后才能使用它。因此，在设置innerHTML之前的任何时候都要声明它，它会起作用。

＆＃13;

var finishedHTML = "<h2>Yes it works</h2>";
document.getElementById('test').innerHTML = finishedHTML;

＆＃13;

header {
        display: block;
        background: #A2AFBC;
        top: 0;
        height: 50px;
        position: fixed;
        width: 100%;  
        text-align: center;
    }
    
footer {
        height: 50px;
        width: 100%;
        bottom: 0px;
        left: 0px;
        background: #A2AFBC;
        position: fixed;
    }
.headerTitle {
    font-size: 2.0em;
    font-family: Verdana;
    font-weight: 100;
    color: #506B84;
    margin: 0em;
    font-weight: bold;
    
}

h2 {
  font-size: 3.0 em;
  color: red;
  
}

＆＃13;

<html>    
    <head>
        <title>title</title>
        <link rel="stylesheet" href="style.css" type="text/css" >
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
        <!--Filter.js-->
        <script language="javascript" type="text/javascript" src="filter.js"></script>
    </head>
    <body>
        <header>
            <span class="headerTitle">Header Text</span>
        </header>
        <!-- style="margin-left: 300px; padding-top: 300px;"-->
        <div id="test" style="margin-top: 100px;">
            <h1>This is a test text</h1>
        </div>
        
        <footer>
        </footer>
    </body>
</html>

＆＃13;

Answer 2

将transportMode.map { tag -> "$myAPIUrl$locationCoordinatesLat,$locationCoordinatesLong&destinations=$locationInput$tag&key=$myAPIKey" }移至filter.js。

Answer 3

<html>    
    <head>
        <title>title</title>
        <link rel="stylesheet" href="style.css" type="text/css" >
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
    </head>
    <body>
        <header>
            <span class="headerTitle">Header Text</span>
        </header>

        <div id="test" style="margin-left: 300px; padding-top: 300px;">
            <h1>This is a test text</h1>
        </div>
        <!--Filter.js-->
        <script language="javascript" type="text/javascript" src="filter.js"></script>
        <script language="javascript" type="text/javascript">
            document.getElementById('test').innerHTML = finishedHTML;
        </script>
        <footer>
        </footer>
    </body>
</html>

将<script>置于正文中可以解决您的asysnc加载脚本问题

Answer 4

嘿，请检查一下它的工作正常。感谢

<html>    
    <head>
        <title>title</title>
        <link rel="stylesheet" href="style.css" type="text/css" >
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
        <!--Filter.js-->
        <script language="javascript" type="text/javascript" src="filter.js"></script>
    </head>
    <body>
        <header>
            <span class="headerTitle">Header Text</span>
        </header>
        
        <div id="test" style="margin-left: 300px; padding-top: 30px;">
            <h1>This is a test text</h1>
        </div>
        <script language="javascript" type="text/javascript">
            var finishedHTML = "<h2>Yes it works</h2>";
            console.log(finishedHTML);
            document.getElementById('test').innerHTML = finishedHTML;
        </script>
        <footer>
        </footer>
    </body>
</html>

将javascript变量移交给html

4 个答案: