Nuevo en programación, probando algo para un proyecto JS.
Tengo tres botones adyacentes con los siguientes contenidos:
for (var i = 0; i < plantButtons; i++) { document.querySelectorAll(".option")[i].addEventListener("click", function() { // alert("Plant Button Clicked!"); plantContainer.style.display = "none"; plantView.style.display = "flex"; }); } <a class="option flex-column"> <img class="plant-img" src="https://via.placeholder.com/50"> <h3 class="plant-name">Cactus</h3> <p class="plant-desc">A hardy plant with low watering needs and high sun tolerance.</p> </a> <a class="option flex-column"> <img class="plant-img" src="https://via.placeholder.com/50"> <h3 class="plant-name">Spider Plant</h3> <p class="plant-desc">A unique plant, adaptable to a variety of conditions.</p> </a> <a class="option flex-column"> <img class="plant-img" src="https://via.placeholder.com/50"> <h3 class="plant-name">Boston Fern</h3> <p class="plant-desc">A luscious plant with particular requirements. </p> </a>Cuando se hace clic en cualquiera de los botones, todos desaparecen y aparece una sola pantalla; en este caso, será para una de las tres plantas en los botones.
Quiero acceder a la información de los botones para ayudar a llenar la nueva pantalla después. Por ejemplo, si hacen clic en el botón con la imagen del cactus, quiero que la siguiente pantalla tenga un encabezado "Cactus" sin simplemente codificar el nuevo encabezado.
No estoy seguro de cuál es la mejor manera de abordar esto, cualquier ayuda sería apreciada.
Como señalan algunos comentarios, debe separar los elementos de nivel de bloque de sus botones. Las etiquetas de anclaje serían una mejor opción. Puede usarlos en combinación con declaraciones if, .innerHTML y .onclick listeners para completar su nueva pantalla según el ancla en la que se haga clic.