Creating a basic HTML document with a JavaScript script can be quite simple.
...
<script type = "text/javascript"> src = "xxx.js"></script>
...
<body>
<ul id ="pics">
<li><a href="A.jpg">A</a></li>
<li><a href="A.jpg">A</a></li>
<li><a href="A.jpg">A</a></li>
</ul>
</body>
When trying to access the pictures using JS, the code snippet looks like this:
var picspics = document.querySelectorAll("#pics ul > li > a");
alert(picspics[0]);
Instead of getting the expected array of picture elements, it returned undefined. This issue persisted even after attempts to troubleshoot by adding window.onload in the code.
In an effort to debug further, I used alert function and discovered that the array of elements was coming up as undefined. Removing the JS file and manually typing the code in the console also resulted in failure.
This problem arose when attempting to iterate over the list items and add onclick events, leading to confusion about why the variable did not contain the expected array of elements. Any insight on what went wrong would be greatly appreciated!
Thank you.