Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

137
Visualizações
Click event triggered on one element but not on another

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.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda