0
184
ViewsTiene que hacer clic dos veces para que el evento se active en JavaScript
Configuré un evento de alternancia en JavaScript, pero cuando se carga la página, tengo que hacer clic dos veces en el elemento para que se active. Después de eso, responde normalmente a un solo clic, pero tan pronto como actualizo la página, vuelve a suceder.
Aquí es donde sucede:
Este es el sitio web y usted mismo puede ver claramente el comportamiento: https://n-ii-ma.github.io/Portfolio-Website/
Este es el código JS para el evento:
/* Read More */ let readMore1 = document.getElementById('show-card-1'); let readMore2 = document.getElementById('show-card-2'); let readMore3 = document.getElementById('show-card-3'); /* Projects Description */ let desc1 = document.getElementById('details1'); let desc2 = document.getElementById('details2'); let desc3 = document.getElementById('details3'); /* Toggle Description */ readMore1.onclick = function() { if (desc1.style.display === 'none') { desc1.style.display = 'block'; readMore1.style.color = 'DeepPink'; readMore1.innerText = 'Read Less'; } else { desc1.style.display = 'none'; readMore1.style.color = ''; readMore1.innerText = 'Read More'; } } readMore2.onclick = function() { if (desc2.style.display === 'none') { desc2.style.display = 'block'; readMore2.style.color = 'DeepPink'; readMore2.innerText = 'Read Less'; } else { desc2.style.display = 'none'; readMore2.style.color = ''; readMore2.innerText = 'Read More'; } } readMore3.onclick = function() { if (desc3.style.display === 'none') { desc3.style.display = 'block'; readMore3.style.color = 'DeepPink'; readMore3.innerText = 'Read Less'; } else { desc3.style.display = 'none'; readMore3.style.color = ''; readMore3.innerText = 'Read More'; } }¿Sabes cómo puedo solucionar este problema?
3 answers
Answer question0
Configuró sus secciones de element.style.property para display: none usando CSS, pero la sintaxis de desc solo puede acceder a estilos en línea.
Esto significa que en la primera llamada, por ejemplo, desc1.style.display es igual a "" , no a none . Esto agrega la propiedad display: none a los estilos en línea en el bloque else , y desde allí el código funciona normalmente.
Para probar los estilos CSS y en línea, debe usar window.getComputedStyle :
if (getComputedStyle(desc1).display === "none") { desc1.style.display = 'block'; readMore1.style.color = 'DeepPink'; readMore1.innerText = 'Read Less'; }0
Ha definido el onClick incluso como se muestra a continuación:
if (desc1.style.display === 'none') { desc1.style.display = 'block'; readMore1.style.color = 'DeepPink'; readMore1.innerText = 'Read Less'; } else { desc1.style.display = 'none'; readMore1.style.color = ''; readMore1.innerText = 'Read More'; } Cuando hace clic por primera vez desc1.style.display aparece en blanco.
Así que va a otra parte y no la muestra.
Debe agregar style.display como ninguno en la primera carga o agregar otra condición para tener desc1.style.display === '' como a continuación:
let readMore1 = document.getElementById('show-card-1'); let desc1 = document.getElementById('details1'); readMore1.onclick = function() { if (desc1.style.display === 'none' || desc1.style.display === '') { desc1.style.display = 'block'; readMore1.style.color = 'DeepPink'; readMore1.innerText = 'Read Less'; } else { desc1.style.display = 'none'; readMore1.style.color = ''; readMore1.innerText = 'Read More'; } } <div class="project-title" id="project1"> <div class="title"> <h3>Tea Cozy</h3> <p id="show-card-1">Read More</p> </div> </div> <div class="project-desc" id="details1" style="display: none;"> <p>This was my first website that I published to GitHub Pages. It was quite challenging at the time, but it greatly helped me learn a lot to hone my skills.</p> <a href="https://n-ii-ma.github.io/Tea-Cozy/" class="address" target="_blank">Tea Cozy</a> <div class="tech"> <i class="fab fa-html5 fa-2x" aria-hidden="true"></i> <i class="fab fa-css3-alt fa-2x" aria-hidden="true"></i> <i class="fab fa-git fa-2x" aria-hidden="true"></i> <i class="fab fa-github fa-2x" aria-hidden="true"></i> </div> </div>0
element.style.display solo le brinda los estilos no calculados. Por lo tanto, no devolverá los estilos que asignó a través de clases o identificadores en un archivo css.
Para verificar eso, puede usar getComputedStyle() .
Mira este ejemplo:
const elm1 = document.getElementById('hello') const elm2 = document.getElementById('bye') console.log('non-computed# hello:', elm1.style.display) console.log('computed #hello:', getComputedStyle(elm1).display) console.log('non-computed #bye:', getComputedStyle(elm2).display) #hello { display: none; } <h1 id="hello"></h1> <h1 id="bye" style="display: none"></h1>