Estoy trabajando con un tema de WordPress que no tiene entrada para hacer clic en los divs. Pero solo puedo asignar clases e ID.
Tengo cuatro tramos seguidos, y al hacer clic en cada columna, quiero que se muestre el párrafo correspondiente.
Pude hacerlo con los botones que tienen propiedades al hacer clic, pero no pude hacerlo con las columnas.
Ayude a revisar el código y vea cómo puedo un JS para llamar a los párrafos para cambiar llamando a una ID, sin tener que hacer clic en el HTML. El clic puede estar en JavaScript o CSS.
function changeElement(num) { document.getElementById(`paragraph_${num}`).style.display = 'block'; const arr = [1, 2, 3, 4].filter((elem) => elem !== num); arr.forEach((elem) => { document.getElementById(`paragraph_${elem}`).style.display = 'none'; }) } body { width: 100%; } .none { display: none; } div { display: flex; flex-direction: row; gap: 20px; justify-items: center; } span { height: 50px; width: 50px; background-color: green; } // the divs that correspond to each button below <div> <span>Div 1</span> <span>Div 2</span> <span>Div 3</span> <span>Div 4</span> </div> <p id="paragraph_1">paragraph 1</p> <p id="paragraph_2" class="none">paragraph 2</p> <p id="paragraph_3" class="none">paragraph 3</p> <p id="paragraph_4" class="none">paragraph 4</p> </body>Dado que no puede agregar un 'onlcik' en el html, estaba pensando que podría llamar al javascript inyectándolo con JavaScript con el método setAttribute() .
Aquí está el código:
function set_event(){ const Div1 = document.getElementById('div1'); const Div2 = document.getElementById('div2'); const Div3 = document.getElementById('div3'); const Div4 = document.getElementById('div4'); Div1.setAttribute("onclick", "changeElement(1)"); Div2.setAttribute("onclick", 'changeElement(2)'); Div3.setAttribute("onclick", 'changeElement(3)'); Div4.setAttribute("onclick", 'changeElement(4)'); } window.onload = set_event(); function changeElement(num) { document.getElementById(`paragraph_${num}`).style.display = 'block'; const arr = [1, 2, 3, 4].filter((elem) => elem !== num); arr.forEach((elem) => { document.getElementById(`paragraph_${elem}`).style.display = 'none'; }) } body { width: 100%; } .none { display: none; } div { display: flex; flex-direction: row; gap: 20px; justify-items: center; } span { height: 50px; width: 50px; background-color: green; } // the divs that correspond to each button below <div> <span id='div1'>Div 1</span> <span id='div2'>Div 2</span> <span id='div3'>Div 3</span> <span id='div4'>Div 4</span> </div> <p id="paragraph_1">paragraph 1</p> <p id="paragraph_2" class="none">paragraph 2</p> <p id="paragraph_3" class="none">paragraph 3</p> <p id="paragraph_4" class="none">paragraph 4</p> <script> </script>