CODEWITHSUNDEEP
javascriptfunctionhtml-table
triPs
triPs

Reputation: 35

Javascript dynamic table creating error

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?

Upvotes: 1

Views: 49

Answers (1)

Yuriy Yakym
Yuriy Yakym

Reputation: 3911

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' ";

Upvotes: 1

Related Questions