I am trying to create a clickMe() function that if the input is not displayed, clicking the button will show it. input. And if input is shown, clicking the button hides it. I have tried two different approaches but both have not been able to toggle the input element.

document.addEventListener("DOMContentLoaded", load); function load(){ let button = document.querySelector("button");

button.addEventListener("click", clickMe); }

// approach #1 function clickMe(){ document.getElementById("popup").onclick = function() { document.getElementById("popup").style.display = "none"; } document.getElementById("popup").onclick = function() { document.getElementById("popup").style.display = "block"; } }

// approach #2 let input = document.getElementById("input");

if(input.style.display=="none"){ alert("Hidden"); input.style.display = "block"; } else { alert("Displayed"); input.style.display = "none"; }

HTML:

Competency 15 Event Listeners