Hello everyone, below I have script.js and index.html. I want to use the variable outputHTML from script.js in the script tags of index.html so that I can print them in table form on my page (I'm pretty sure I have to do it this way because I'm using node). However index.html won't seem to recognize the vale of outputHTML from script.js and I have no idea why. Hopefully someone can help, thanks in advance.
script.js
var outputHTML = '';
var animals = ["cat", "dog", "goat", "turkey", "buffalo"];
// Loop over our arrays and create our html string
outputHTML += "<table>";
for (var i = 0; i < animals.length; i++) {
outputHTML += "<tr>";
outputHTML += "<td>" + animals[i] + "</td>";
outputHTML += "</tr>";
}
outputHTML += "</table>";
export { outputHTML };
------------------------------------------------=
//index.html file
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="script.js">
</script>
</head>
<body>
<button onclick= "f()">
Click To Access Animals
</button>
<div>
<p id="text" style="color:purple;
font-weight:bold;font-size:20px;">
</p>
</div>
<script type="text/javascript">
import { outputHTML } from './script.js';
function f() {
document.getElementById("text").innerHTML = outputHTML;
}
</script>
</body>
</html>