Javascript Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
Question
I'm trying to code a Sudoku generator in JavaScript and I think I did it. My problem is for visualizing the generated solution inside the input tags I use for the game. I put this function on the property onload of the body of my html page:
function begin() {
var container=document.getElementById("container");
var div;
for(var i=0; i<9; i++) {
div=document.createElement("div");
div.id=i;
div.setAttribute("class", "square");
for(var j=0;j<9;j++) {
var square=document.createElement("input");
square.setAttribute("type", "text");
square.setAttribute("maxlength", "1");
if(i%2==0) {
square.setAttribute("class", "square1");
}
else {
square.setAttribute("class", "square2");
}
div.appendChild(square);
}
container.appendChild(div);
}
}
And it works perfectly fine, since it show 9 squares (the divs), each with 9 small squares inside(the inputs).
Now the last function is, to show the result is:
function showSudoku(sudoku, i) {
var container = document.getElementById("container");
var cells = container.getElementsByTagName("input");
for(var j=0; j<81; j++)
cells[j].value = sudoku[j];
}
but I get the error
Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
For some reason the variable container is not initialized with the element identified with the id container . Can anyone help me?
[EDIT] Here is the HTML code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Sudoku</title>
<style type="text/css">
body {
text-align: center;
}
#game {
width: 21.2em;
height: 21.15em;
margin: auto;
border: 2px solid #777777;
}
#container {
width: 21.2em;
height: 21.2;
margin: auto;
}
.square {
width: 6.94em;
height: 6.94em;
display: inline-block;
border: 1px solid #A9A9A9
}
.square1 {
height: 3em;
width: 3em;
background-color: white;
border: 1px dashed #CBCBCB;
color: black;
display: inline-block;
}
.square2 {
height: 3em;
width: 3em;
background-color: #DDDDDD;
border: 1px dashed #CBCBCB;
color: black;
display: inline-block;
}
input {
text-align: center;
}
</style>
<script type="text/javascript" src="sudoku.js">
</script>
</head>
<body onload="begin()">
<div id="levels">
<label><input type="radio">Easy</label>
<label><input type="radio">Medium</label>
<label><input type="radio">Hard</label>
</div>
<div id="buttons">
<button id="newgame" onclick="newGame()">NEW GAME</button>
<button id="solve">SOLVE</button>
</div>
<br>
<div id="game">
<div id="container">
</div>
</div>
<br>
<div id="time">
<input id="currentTime" type="text" readonly="readonly">
</div>
</body>
</html>
The buttons and the inputs radio are still unused.
1 answers
solution1
0 2017-09-23 12:17:46
hey you are messing with tagname since you would not specify which input type you are wanting to append in the javascript. so you should have to go like this as follows:
var nodeLists = document.getElementsByTagName("input");
for(node in nodeLists){
if(nodeLists[node].getAttribute('type') == "text"){
//write code here as you want
}
else{
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.