How to get a sibling element by class name upon button click?

Question

I have a table with similar rows and I am trying to get the value "Star" when the button is clicked.

<tr>
    <td class="shape">Star</td>
    <td class="weight">3</td>
    <td><button>Click</button></td>
</tr>

Code I have tried:

<script>
    const delButton = event.target;
    var prevShape = delButton.getElementsByClass("shape").previousSibling.innerHtml;  
</script>

Answer 1

Delegate:

 window.addEventListener("load", function() { // on page load document.getElementById("tb").addEventListener("click", function(e) { const tgt = e.target; if (tgt.tagName === "BUTTON") { const shape = tgt.closest("tr").querySelector(".shape").textContent; console.log(shape); } }) })

 <table> <tbody id="tb"> <tr> <td class="shape">Circle</td> <td class="weight">3</td> <td><button>Click</button></td> </tr> <tr> <td class="shape">Star</td> <td class="weight">3</td> <td><button>Click</button></td> </tr> </tbody> </table>