Getting error with tables for some reason

I have created a table i want to create calculator with. Problem is, when i did some testings and experiments, i want to get a length of cells of second row in table, i wrote correct code like it shows on w3schools but on mine it returns error

“script.js:1 Uncaught TypeError: Cannot read properties of undefined (reading ‘1’)
at script.js:1:63”

Any ideas why it gives me this?
I also want to retreive values from each cell but when i call innerHTML or innerText on cell’s i get the same type of error.

Here’s html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <p id="demo"></p>
    <span id="inputValue">Hello</span>
    <table cellspacing="0" class="calculator">
      <tr>
        <td id="clear">AC</td>
        <td id="delete">Del</td>
        <td class="sign">%</td>
        <td class="sign">/</td>
      </tr>
      <tr>
        <td class="num" id="seven">7</td>
        <td class="num">8</td>
        <td class="num">9</td>
        <td class="sign">*</td>
      </tr>
      <tr>
        <td class="num">4</td>
        <td class="num">5</td>
        <td class="num">6</td>
        <td class="sign">-</td>
      </tr>
      <tr>
        <td class="num">1</td>
        <td class="num">2</td>
        <td class="num">3</td>
        <td class="sign">+</td>
      </tr>
      <tr>
        <td>S.F</td>
        <td class="num">0</td>
        <td class="dot">.</td>
        <td class="result">=</td>
      </tr>
    </table>
    <script src="script.js"></script>
  </body>
</html>

CSS:

span {
  width: 326px;
  background-color: rgb(236, 236, 236);
  border: 1px solid rgb(209, 209, 209);
  display: block;
}

table {
  width: 328px;
}

table tr td {
  width: 80px;
  height: 80px;
  text-align: center;
  border: 1px solid rgb(209, 209, 209);
  cursor: pointer;
}

table tr td:hover {
  background-color: rgb(209, 209, 209);
}


JS

let value = document.getElementsByClassName("calculator").rows[1].cells.length;

alert(value);

What do you think document.getElementsByClassName("calculator") returns?

Object html collection but then i try rows it returns undefined.

console.log(document.getElementsByClassName("calculator")) should explain why.

Try document.querySelector(".calculator")