I'm currently building a website that should include a list of selectable locations. On selection, there is an overlay panning from left to right. I want to be able to send the location value from the list to my script so that I can load a specific image to the overlay.
Every time I move function from the HTML doc to my .js, the functions seem to never get called. (This is my first ever web dev project).
document.getElementById("mkc").onclick = overlayShow();
document.getElementById("hide").onclick = overlayHide();
function overlayShow() {
document.getElementById("overlay").className += " show";
}
function overlayHide() {
document.getElementById("overlay").classList.remove("show");
}<div><div id="list"><a onclick=>Birstall</a><a id="mkc" onclick="overlayShow()">Milton Keynes: C wing</a><a id="MKB" onclick="overlayShow()">Milton Keynes: B wing</a><a href="#">Link 3</a><a href="#">Link 4</a></div></div><div class="main"><div id="overlay" class="overlay"><div class="content"><button id="hide" onclick="overlayHide()">hide</button></div></div></div>The functionality works with the 2nd script included, but when I move the functions inside index.js, it does not.
Thanks in advance.