Ayúdenme a obtener el texto interno del encabezado de la tarjeta de cuadrícula.
Archivo CSS;
.container1 { display: grid; grid-template-columns: auto auto auto auto; column-gap: 10px; justify-content: space-evenly; } .posts { width: 13rem; margin: 10px auto 10px auto; height: 17rem; background: white; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); border-radius: 10px; } <div class="container1"> <div class="posts"> <h3>Heading 1</h3> </div> <div class="posts"> <h3>Heading 2</h3> </div> <div class="posts"> <h3>Heading 3</h3> </div> <div class="posts"> <h3>Heading 4</h3> </div> <div class="posts"> <h3>Heading 5</h3> </div> <div class="posts"> <h3>Heading 6</h3> </div> </div>¿Cómo puedo obtener el texto interno del encabezado si hago clic en grid3 y así sucesivamente a través de Javascript?
Suponiendo que las cuadrículas se refieran a los elementos div.posts , puede usar el método de documento querySelectorAll() para recuperar una lista de todas las cuadrículas, use el método forEach() para recorrer la lista recuperada de cuadrículas y luego agregar un detector de clics a cada cuadrícula que recuperará el texto interno del elemento de encabezado.
Compruebe y ejecute el siguiente fragmento de código para ver un ejemplo práctico del enfoque anterior:
const grids = document.querySelectorAll('div.posts'); grids.forEach(grid => grid.addEventListener('click', () => { console.log(grid.childNodes[0].textContent); alert(grid.childNodes[0].textContent); })); .container1 {display: grid; grid-template-columns: auto auto auto auto; column-gap: 10px; justify-content: space-evenly;} .posts {width: 13rem; margin: 10px auto 10px auto; height: 17rem; background: white; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); border-radius: 10px;} <div class="container1"> <div class="posts"><h3>Heading 1</h3></div> <div class="posts"><h3>Heading 2</h3></div> <div class="posts"><h3>Heading 3</h3></div> <div class="posts"><h3>Heading 4</h3></div> <div class="posts"><h3>Heading 5</h3></div> <div class="posts"><h3>Heading 6</h3></div> </div>Supongo que podemos hacer esto mediante la delegación de eventos , solo lo intenté de otra manera tbh
document.querySelector(".container1").addEventListener("click",(e)=>{ if(e.target && e.target.closest(".posts")){ console.log(e.target.textContent) }else{ return; } }) .container1 { display: grid; grid-template-columns: auto auto auto auto; column-gap: 10px; justify-content: space-evenly; } .posts { width: 13rem; margin: 10px auto 10px auto; height: 17rem; background: white; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); border-radius: 10px; } <div class="container1"> <div class="posts"> <h3>Heading 1</h3> </div> <div class="posts"> <h3>Heading 2</h3> </div> <div class="posts"> <h3>Heading 3</h3> </div> <div class="posts"> <h3>Heading 4</h3> </div> <div class="posts"> <h3>Heading 5</h3> </div> <div class="posts"> <h3>Heading 6</h3> </div> </div>Aquí está el código que puede ayudarte. Al agregar una función onclick.
html:
<div class="container1"> <div class="posts"> <h3 onclick="GetInnerText(this.innerHTML)">Heading 1</h3> </div> <div class="posts"> <h3 onclick="GetInnerText(this.innerHTML)">Heading 2</h3> </div> <div class="posts"> <h3 onclick="GetInnerText(this.innerHTML)">Heading 3</h3> </div> <div class="posts"> <h3 onclick="GetInnerText(this.innerHTML)">Heading 4</h3> </div> <div class="posts"> <h3 onclick="GetInnerText(this.innerHTML)">Heading 5</h3> </div> <div class="posts"> <h3 onclick="GetInnerText(this.innerHTML)">Heading 6</h3> </div> </div>J.S.:
function GetInnerText(text) { console.log(text); }Enlace de referencia stackblitz