Could someone shed light on why I'm encountering the error message mentioned above while using this code?
It's functioning properly on jsfiddle, but for some reason, it won't execute in the browser.
var bladeRunnerButton = document.querySelector("ul.bladeRunner").innerHTML;
var bladeRunnerContent = document.querySelector("div.bladeRunner").innerHTML;
var detroitButton = document.querySelector("ul.detroit").innerHTML;
var detroitContent = document...querySelector("div.detroit").innerHTMl;
var mammejongButton = document.querySelector("ul.mammejong").innerHTML;
var mammejongContent = document.querySelector("div.mammejong").innerHTML;
var buttonArray = [bladeRunnerButton, detroitButton, mammejongButton];
var articleArray = [bladeRunnerContent, detroitContent, mammejongContent];
function createfunc(i) {
return function() { document.getElementById("fillPane").innerHTML = articleArray[i];};
}
for (let i=0; i < articleArray.length; i++) {
let button = buttonArray[i];
button.addEventListener("click", createfunc(i));
}#content {
display: none;
}<li>
<ul class="bladeRunner">Blade Runner 2049</ul>
<ul class="detroit">Detroit</ul>
<ul class="mammejong">Mammejong</ul>
</li>
<div class="contentPanel bladeRunner">
</div>
<div class="contentPanel detroit">
</div>
<div class="contentPanel mammejong">
</div>