如何访问单击按钮的元素

Question

编程新手，为JS项目尝试一些东西。

我有三个相邻的按钮，内容如下：

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>

当点击任何一个按钮时，它们都会消失，只显示一个——在这种情况下，它将显示按钮上三种植物中的一种。

我想访问按钮中的信息，以帮助以后填充新的显示。例如，如果他们点击带有仙人掌图片的按钮，我希望下面的显示具有标题"；仙人掌"；而不需要对新报头进行硬编码。

我不确定解决这个问题的最佳方法，任何帮助都将不胜感激。