I need to toggle a section (called "newHexagon")'s visibility by alternatively clicking two different h2's, "seeHexagon" and "hideHexagon". When the page is loaded newHexagon's visibility is hidden. If seeHexagon is clicked, it is correctly changed to "visible". The problem is that when hideHexagon is clicked, nothing happens, instead of visibility being brought back to hidden as required by my code. The click on hideHexagon is correctly received, as proven by console.log('clicked'). The next line of code simply seems to have no effect. My script is as follows
// retrieve element that when clicked fires the click event
const seeHexagon = document.getElementById('creaServizi');
// extract necessary html from a data attribute of body
const htmlServices = document.body.getAttribute("data-esagonoServizi");
// select the node to which append the new section
const servicesSide = document.querySelector('.terzaRigaDes');
// create the new section with visibility hidden
const newHexagon = document.createElement('section');
newHexagon.setAttribute('class', 'esagono esagonoServizi');
newHexagon.setAttribute('id', 'sezioneServizi');
newHexagon.style.visibility = 'hidden';
// fill the new section with html extracted above
newHexagon.innerHTML = htmlServices;
// append the new section to the selected node
servicesSide.appendChild(newHexagon);
// now that the section is present, retrieve the element that when clicked must fire the second click event
let hideHexagon = document.getElementById('chiudiServizi');
// add listener for click event to element that sets the new section's visibility to visible
seeHexagon.addEventListener('click', function () {
newHexagon.style.visibility = 'visible';
hideHexagon.addEventListener('click', function () {
console.log('clicked'); // EVERYTHING WORKS UP TO THIS LINE INCLUDED
// NEXT LINE IS INEFFECTIVE AND THAT'S THE PROBLEM
newHexagon.style.visibility = 'hidden';
});
});
Please note that the exact same result is obtained if the second event listener function is moved outside and below the first click's function.
You need to take the hide event listener outside of the other event listener, otherwise it will keep adding event listeners. (other than that the code is ok)
// retrieve element that when clicked fires the click event
const seeHexagon = document.getElementById('creaServizi');
// extract necessary html from a data attribute of body
const htmlServices = "hello world";
// select the node to which append the new section
const servicesSide = document.querySelector('.terzaRigaDes');
// create the new section with visibility hidden
const newHexagon = document.createElement('section');
newHexagon.setAttribute('class', 'esagono esagonoServizi');
newHexagon.setAttribute('id', 'sezioneServizi');
newHexagon.style.visibility = 'hidden';
// fill the new section with html extracted above
newHexagon.innerHTML = htmlServices;
// append the new section to the selected node
servicesSide.appendChild(newHexagon);
// now that the section is present, retrieve the element that when clicked must fire the second click event
let hideHexagon = document.getElementById('chiudiServizi');
// add listener for click event to element that sets the new section's visibility to visible
seeHexagon.addEventListener('click', function() {
newHexagon.style.visibility = 'visible';
});
hideHexagon.addEventListener('click', function() {
console.log('clicked'); // EVERYTHING WORKS UP TO THIS LINE INCLUDED
// NEXT LINE IS INEFFECTIVE AND THAT'S THE PROBLEM
newHexagon.style.visibility = 'hidden';
});
<button id="creaServizi">seeHexagon</button>
<button id="chiudiServizi">hideHexagon</button>
<div class="terzaRigaDes"></div>