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);