I am facing an issue with two files, filter.html and filter.js. The file filter.html contains a div with the id "test", while the file filter.js has a variable named "finishedHTML."
My objective is to inject the content of "finishedHTML" into the test div as html code. However, "finishedHTML" seems to be empty. How can I resolve this problem?
Source:
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>Thank you for your assistance!