After crafting the subsequent HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="j1.js" **defer**></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elderflower</title>
</head>
<body>
<h1 class="target">Hii</h1>
<h1>Unchanged</h1>
<h1 class="target">Hii</h1>
</body>
</html>
and here's the javascript snippet provided:
let el = document.querySelectorAll(".target");
for(let i=0;i<el.length;i++)
{
el[i].innerText = "Altered by JS";
}
Why is it that my javascript fails to yield any changes until I insert the term "defer" on line 4 within the HTML?