New to programming, trying something out for a JS project.
I have three adjacent buttons with the following contents:
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>When any of the buttons are clicked, they all vanish and a single display appears - in this case, it'll be for one of the three plants on the buttons.
I want to access information from the buttons to help populate the new display afterwards. For example, if they click on the button with the picture of the cactus, I want the following display to have a heading "Cactus" without just hard coding the new header.
I'm not sure about the best way to tackle this, any help would be appreciated.
As some comments are pointing out, you need to separate the block-level elements from your buttons. Anchor tags would be a better option. You could use those in combination with if statements, .innerHTML, and .onclick listeners to populate your new display depending on which anchor is clicked.