Javascript dynamic table creating error

Question

HTML

 <!DOCTYPE html>
 <html>
 <head>
 <title>BOOM</title>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="Style/main.css">
 </head>
 <body>
 <div id="headline">

<h1>Laevade Pommitamine<h1>


<select id="grid" name ="grid" onChange="populate()">
<option value=""></option>
<option value="3">3x3</option>
<option value="4">4x4</option>
<option value="5">5x5</option>
<option value="6">6x6</option>
<option value="7">7x7</option>
<option value="8">8x8</option>
<option value="9">9x9</option>
<option value="10">10x10</option>
</select>

<select id ="ships"></select>
<input type="button" value="New Game" onclick="newGame()">
</div>

<div id="myboard" style="display:inline-block"></div>
<div id="opponentboard" style="display:inline-block"></div>



<script src="scripts/main.js"></script>
</body>
</html>

JAVASCRIPT

var table=[[0,0],[0,0]]; //myships=[[0,0],[1,1]];
function get(x){
return document.getElementById(x);
}

function populate(){
var s1 = document.getElementById('grid');
var s2 = document.getElementById('ships');

if(s1.value == "3"){
    var optionArray = ["|","1|1","2|2"];
}
else if(s1.value == "4"){
    var optionArray = ["|","1|1","2|2","3|3"];
}
else if(s1.value == "5"){
    var optionArray = ["|","1|1","2|2","3|3","4|4"];
}
else if(s1.value == "6"){
    var optionArray = ["|","1|1","2|2","3|3","4|4","5|5"];
}
else if(s1.value == "7"){
    var optionArray = ["|","1|1","2|2","3|3","4|4","5|5","6|6"];
}
else if(s1.value == "8"){
    var optionArray = ["|","1|1","2|2","3|3","4|4","5|5","6|6","7|7"];
}
else if(s1.value == "9"){
    var optionArray == ["|","1|1","2|2","3|3","4|4","5|5","6|6","7|7","8|8"];
}
else if(s1.value == "10"){
    var optionArray = ["|","1|1","2|2","3|3","4|4","5|5","6|6","7|7","8|8","9|9"];
}    

//clear eelmine list
var length = s2.options.length;
for (i = 0; i < length; i++) {
    s2.remove(0);
}

//ehita uus list
for(var option in optionArray){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
}
}

/*function changeColorRandomly(){
var N = document.getElementById("ships").value
console.log(ships.value);
var tableRows = document.getElementsByTagName("tr"),
    i = 0, row, col, trRow, tdCol;
    while(i < N){
        row = Math.floor(Math.random()*grid.value);
        col = Math.floor(Math.random()*grid.value);
        trRow = tableRows[row];
        tdCol = trRow.childNodes[col];
        if(tdCol.style.backgroundColor !== "yellow"){
            tdCol.style.backgroundColor = "yellow";
            i++;
            console.log(i);
        }
    }
}*/


function tc(tabelid, row, col) {
var cid;  // lokaalne, aint funktsiooni sees

console.log(("click: "+tabelid+row)+col);
cid=(tabelid+row)+col;
get(cid).innerHTML = "*";
//myships[row][col]=1;
get(cid).style.backgroundColor = "red";

//myships[1000]=45;
table[row][col]=1;
// $("#c11").html("*") jquery
}

function changeFunc(id){
var selectBox = get(id);
var val = selectBox.options[selectBox.selectedIndex].value;
console.log(val);
buildBoard("myboard",val); 
buildBoard("opponentboard", val);
}
function buildBoard(id, size) {
var s=" ";
var i,j;
var s1 = document.getElementById('grid');
var s2 = document.getElementById('ships');
var myboard = document.getElementById('myboard');
var opponentboard = document.getElementById('opponentboard');

s+="<table>";
for(i=0; i<parseInt(size); i++) {
    s+="<tr>";
    for(j=0; j<parseInt(size); j++) {
        s+="<td>"
        s+="class='g' ";
        s+=" onclick=\"tc('"+id+"',"+i+","+j+");\"";
        s+=" id='"+id+i+j+"'>";
        s+=i+"_"+j;
        s+="</td>"
    }
    s+="</tr>";
}
s+="</table>";
document.getElementById('myboard').innerHTML=s;
console.log(s);
}

function newGame() {
var s1 = document.getElementById('grid').value;
var s2 = document.getElementById('ships').value;
var myboard = document.getElementById('myboard');
var opponentboard = document.getElementById('opponentboard');
buildBoard(myboard, s1);
buildBoard(opponentboard, s1);

}

So my question is, when I click new Game button it makes a table... but instead on normal cells it prints this:

        s+="<td>"
        s+="class='g' ";
        s+=" onclick=\"tc('"+id+"',"+i+","+j+");\"";
        s+=" id='"+id+i+j+"'>";
        s+=i+"_"+j;
        s+="</td>"

How can I fix it so instead it would print 2 normal tables with X * X rows and cells as value in the first selectbox?

Yuriy Yakym · Accepted Answer · 2015-10-13 23:11:58Z

1

s+="<td>"

here you closed td tag with '>', and only then tried to add class and onclick event to it. So that's wrong, because class and onclick attributes are contents of td tag.

Just try to do it this way:

s+="<td ";
s+="class='g' ";

answered Oct 13, 2015 at 23:11

Yuriy Yakym

3,96621 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

triPs Over a year ago

It worked, but how can I make it so that it would create 2 similar tables next to each other. The point is to get battleship grid

Yuriy Yakym Over a year ago

There are several mistakes: 1) just decide what you want to send to buildBoard function, in one case you send element id, and in another you send DOM element. Let's consider, that you will send element id, then you need to change this line `document.getElementById('myboard').innerHTML=s;' in buildBoard function to this line: 'document.getElementById(id).innerHTML=s;'. And after that change buildBoard(myboard, s1); to buildBoard('myboard', s1); and buildBoard(opponentboard, s1); to buildBoard('opponentboard', s1);

Collectives™ on Stack Overflow

Javascript dynamic table creating error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related