Use JavaScript to return correct row number without using inline code

Is there a way of using javascript to alert the correct row number, without using "onclick" or "this" or in fact any javascript in the HTML other than a link to a js page?

This is my HTML

<div align='center'>
    <table>
        <tr>
            <td><b>Row Number  </b></td>
            <td>Confirm</td>
        </tr>

        <tr>
            <td class='row_num'>100</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>101</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>102</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>103</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>104</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>
    </table>
</div>

<script type="text/javascript"src="js/test.js"></script>

and here's the javascript. Now I am aware that the code is wrong and why it's wrong. I'm using a for loop that returns every row number. So I put a break in but, this just breaks at the first-row number and alerts 100 on every button. So what I need to know is if it's possible to alert the correct row number without using any inline javascript code in HTML page.

window.onload = addListener();

function buttonClick(){

var x = confirm("Are you sure you want to delete?");

var rowNum = document.getElementsByClassName("row_num");

if (x)
var y;
for (y = 0; y < rowNum.length; y++) {
var nums = rowNum[y].innerText;
    alert(nums + " Has been deleted");
        break;
}
else
return false;
}

function addListener() {
var i;
var z = document.getElementsByClassName("confirmed");
for (i = 0; i < z.length; ++i){
z[i].addEventListener("click", buttonClick);

}
}

Check your console. else after for is invalid syntax.

Try to use .textContent (the standard property name) rather than .innerText, which is something old and nonstandard introduced by IE.

You're on the right track, though I would suggest using the array functions rather than for loops, especially since you're using var which has hoisting issues.

window.onload = addListener();

function buttonClick(e) {
  if (!confirm("Are you sure you want to delete?")) return;
  const tr = e.target.closest('tr');
  const rowNum = tr.children[0].textContent;
  alert(rowNum + " Has been deleted");
}

function addListener() {
  document.querySelectorAll('.confirmed').forEach(element => {
    element.addEventListener("click", buttonClick);
  });
}

<div align='center'>
    <table>
        <tr>
            <td><b>Row Number  </b></td>
            <td>Confirm</td>
        </tr>

        <tr>
            <td class='row_num'>100</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>101</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>102</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>103</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>

        <tr>
            <td class='row_num'>104</td>
            <td><button class='confirmed'>Confirm</button></td>
        </tr>
    </table>
</div>