Hey everyone, I'm new to this community and having some trouble with my index.html file. Everything works fine except for one script that only runs when I open the file directly with live server in VSCode. Can someone help me out? The script causing issues is located at the end of the second code block.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Exercises</title>
<style>
#conteudo {
padding: 30px 0px;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<h1>HTML Exercices</h1>
</header>
<nav>
<a href="exercises/option1.html"> 01 - Most Used Tags</a>
<a href="exercises/option2.html"> 02 - Mouse</a>
<a href="exercises/option3.html"> 03 - Other tags</a>
<a href="exercises/lists.html"> 04 - Lists</a>
<a href="exercises/nestedList.html"> 05 - Nested Lists</a>
<a href="exercises/links.html"> 06 - LINKS</a>
</nav>
<section section id = 'conteudo'></section>
<footer> <br> Modern Web Course</footer>
<script>
document.querySelectorAll('a').forEach(link => {
const conteudo = document.getElementById('conteudo')
link.onclick = function(e){
e.preventDefault()
fetch(link.href)
.then(resp => resp.text())
.then(html => conteudo.innerHTML = html)
}})
</script>
</body>
</html>
<h1>Project</h1>
<ul class = 'tree'>
<li>
<span wm-folder> backend</span>
<ul>
<li>
<span wm-folder>app</span>
<ul>
<li>product.js</li>
<li>user.js</li>
<li>sale.js</li>
</ul>
<li>
<span wm-folder>config</span>
<ul>
<li>db.js</li>
<li>routes.js</li>
<li>server.js</li>
</ul>
</li>
</li>
</ul>
</li>
<li>
<span wm-folder>frontend</span>
<ul>
<li>
<span wm-folder>publics</span>
<ul>
<li>rapp.css</li>
<li>mouse.css</li>
<li>mole.css</li>
</ul>
</li>
</ul>
</li>
</ul>
<link rel="stylesheet" href="http://files.cod3r.com.br/web-course/tree.css">
<script>
document.querySelectorAll('[wm-folder]').forEach(folder => {
folder.onclick = function (e){
console.log('test')
const ul = folder.nextElementSibling
const display = ul.style.display
ul.style.display = display == 'none' ? 'block' : 'none'
}
})
</script>
I've tried clearing cache on Opera GX browser and disabling adblock, but nothing seems to fix the issue.