All my other JavaScript is working in the external js file but the following code only works if it is directly in the html document. No errors are getting thrown anywhere in VSCode or by the Compile Hero extension.
I have moved my external script reference to the bottom of the page. All my external script works except for that one. The script in question works if I move it inline at the bottom of the page but not if I move it into the the external file. I have tried locating it in different places in the script file and that doesn't change anything. I DO see the DOM tree working because it fails inline in the head of the html page but works beneath my dropList section in the body. What else am I missing here?
The code:
var dropdown = document.getElementsByClassName("dropBtn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
JAVASCRIPT DEBUG TERMINAL & POWERSHELL ERRORS: these required the removal of "function() after "click", to pass the code without an error. "Fixing" the code to the following allows the code to pass in the debugger/powershell terminals but in turn, throws a laundry list of "problems" with the CompileHero extension and VSCode which now won't let the code pass when used either inline or the external file...
var dropdown = document.getElementsByClassName("dropBtn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
Questions like Why does jQuery or a DOM method such as getElementById not find the element? and $(document).ready equivalent without jQuery do not answer my issue.
EDIT: below is how my script file is written when it works inline. Please note that the external script file path IS correct and DOES work fine on other elements in the same html document - just not on the code in question:
Here is my html code structure (basic w3schools.com stuff slightly modified) along with the script that works perfectly inline:
<body>
<div class="dropList">
<button class="dropBtn" href="#section1">Section 1</button>
<div class="dropBox">
<a href="#s1-a">S1a</a>
<a href="#s1-b">S1b</a>
<a href="#s1-c">S1c</a>
</div>
<button class="dropBtn" href="#section2">Section2</button>
<div class="dropBox">
<a href="#">S2a</a>
<a href="#">S2b</a>
<a href="#">S2c</a>
</div>
</div>
<script src="../../public_html/script/wc-javascript.js"></script>
<script> <!--NOTE THIS WORKS HERE BUT NOT IN THE ABOVE FILE-->
var dropdown = document.getElementsByClassName("dropBtn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
</body>
Here is my basic CSS (again, just modified w3schools stuff)
.dropList {
height: 100%;
width: 190px;
position: fixed;
top: 0;
left: 0;
background-color: $lt;
overflow-x: hidden;
padding-top: 20px;
z-index: 1;
}
/* Style the dropList links and the dropdown button */
.dropList a, .dropBtn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.dropList a:hover, .dropBtn:hover {
color: $contrast;
text-shadow: 0 0 1px $dk;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the dropList */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropBox {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
font-size: 1.25rem;
float: right;
color: black;
}
