Error assigning functions parameters in a javascript function to modify a table cell

Question

I got these two errors:

Uncaught TypeError: Cannot read properties of null (reading 'rows') at changeContent

Uncaught TypeError: Cannot read properties of null (reading 'rows') at changeContent

when trying to run the below code.

function changeContent(r, c, con) {
    var row = document.getElementById('myTable').rows[r].cells;
    row[c].innerHTML =con;
}

changeContent(0, 0, "changed");

<!DOCTYPE html>
<html><head><meta charset=utf-8 />
<title>Change the content of a cell</title>
<script src="index.js"></script>
</head><body>
<table id="myTable" border="1">
<tr><td>Row1 cell1</td>
<td>Row1 cell2</td></tr>
<tr><td>Row2 cell1</td>
<td>Row2 cell2</td></tr>
<tr><td>Row3 cell1</td>
<td>Row3 cell2</td></tr>
</table><form>
<input type="button" onclick="changeContent()" value="Change content">
</form></body></html>

How can I rectify this? Thank you.

Edit: I finally found something that works:

function changeContent(r=0, c=1, con="changed") {
var row = document.getElementById('myTable').rows[r].cells;
row[c].innerHTML =con;

}

Looks like you are running that JS before the whole thing is loaded so it can't find the table element. Put the call to the function after all your body or call it on onload. — A Haworth, Apr 24 '22 at 06:46
`onclick="changeContent()"`... you're passing nothing to the function ... so ... `document.getElementById('myTable').rows[undefined]` is indeed `undefined` — Bravo, Apr 24 '22 at 06:46
See: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/q/14028959) to fix your error, once you fix that you need to fix your `onclick` — Nick Parsons, Apr 24 '22 at 06:47

score 0 · Accepted Answer · answered Apr 24 '22 at 06:47

You can try to do this in a way you want/need some user input. As such it will be only able to change according to that Beyond that you must have to feed some data:

function changeContent()
{
rn = window.prompt("Input the Row number(0,1,2)", "0");
cn = window.prompt("Input the Column number(0,1)","0");
content = window.prompt("Input the Cell content");  
var x=document.getElementById('myTable').rows[parseInt(rn,10)].cells;
x[parseInt(cn,10)].innerHTML=content;
}

<html> 
<head> 
<meta charset=utf-8 /> 
<title>Change the content of a cell</title> 
<style type="text/css"> 
body {margin: 30px;} 
</style>  
</head><body> 
<table id="myTable" border="1"> 
<tr><td>Row1 cell1</td> 
<td>Row1 cell2</td></tr> 
<tr><td>Row2 cell1</td> 
<td>Row2 cell2</td></tr> 
<tr><td>Row3 cell1</td> 
<td>Row3 cell2</td></tr> 
</table><form> 
<input type="button" onclick="changeContent()" value="Change content"> 
</form></body></html>

Yes. Thanks. I already tried this way and it worked. I just wanted to figure out why this method did not work — scisamir, Apr 25 '22 at 04:44
Because you must have to provider user input or how it will change the data. And one more thing as you are new to stack overflow, if it worked please mark it as accepted. — ash, Apr 25 '22 at 06:24

score 0 · Answer 2 · edited Apr 25 '22 at 05:14

0

Finally found a solution. I directly assigned the value to the function parameters:

function changeContent(r=0, c=1, con="changed") {
    var row = document.getElementById('myTable').rows[r].cells;
    row[c].innerHTML =con;
}

edited Apr 25 '22 at 05:14

Debug Diva

26,058
13
70
123

answered Apr 25 '22 at 05:08

scisamir

5
2

Error assigning functions parameters in a javascript function to modify a table cell

2 Answers2