I have a script (JavaScript) in the HTML file "2020-X". "2020-X" is included in the HTML file "index-X" using a w3-include-html attribute.
My problem is that the script in "2020-X" does not work when the file "2020-X" is included in "index-X". When the file "2020-X" runs directly, the script works. What's wrong and how can I fix it?
This is from file "index-X":
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.lovest.no/MinScript.js"></script> <!-- Function includeHTML -->
</head>
<body>
<p>This is from file "index-X".</p>
<div w3-include-html="https://www.lovest.no/6-Blogger/2020-X.html"></div>
<script> includeHTML();</script>
</body>
This is from file "2020-X":
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="demo">Script in file "2020-X":
<br>Does NOT work when "2020-X" is included in "index-X".
<br>Works only when "2020-X" is startet alone/direct.
<br>What is wrong?
</p>
<script>
<!-- $(document).ready(function(){ (Have tried this too) -->
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = "Script in file '2020-X': It works! And the answer is: " + myFunction(15, 2);
<!-- }); -->
</script>
</body>
