Javascript für onclick Funktion

Question

Ich versuche, mein Scripting zu üben, indem ich ein Schlachtschiffspiel mache. Wie gesehen here.

Ich versuche derzeit, das Brett 2D zu machen. Ich war in der Lage eine For-Schleife zu machen, um das Board zu machen, aber aus Testzwecken versuche ich nur das Board zu machen, wenn ich auf ein Quadrat klicke, wird es rot ... Aber das untere Quadrat immer beleuchtet. Ich habe versucht, es zu debuggen, indem ich den c Wert null mache, aber dann hört es gerade auf zu arbeiten. Ich weiß, dass es den Wert c nicht richtig speichert, aber ich frage mich, wie ich das beheben kann.

Muss ich 100 Quadrate selbst machen oder kann ich das Skript tatsächlich tun?

maincansize = 400; 
 
document.getElementById("Main-Canvas").style.height = maincansize; 
 
document.getElementById("Main-Canvas").style.width = maincansize; 
 
document.getElementById("Main-Canvas").style.position = "relative"; 
 
var ize = maincansize * .1; 
 
for (var a = 0; a < 10; a++) { 
 
    for (var b = 0; b < 10; b++) { 
 
    var c = document.createElement("div"); 
 
    var d = c; 
 
    c.onclick = function() { 
 
     myFunction() 
 
    }; 
 
    function myFunction() { 
 
     console.log("A square was clicked..." + c.style.top); d.style.backgroundColor = "red"; 
 
    } 
 
    c.style.height = ize; 
 
    c.style.width = ize; 
 
    c.style.left = b * ize; 
 
    c.style.top = a * ize; 
 
    c.style.borderColor = "green"; 
 
    c.style.borderStyle = "outset"; 
 
    c.style.position = "absolute"; 
 
    console.log(ize); 
 
    document.getElementById('Main-Canvas').appendChild(c); 
 

 
    } //document.getElementById('Main-Canvas').innerHTML+="<br>"; 
 
}

#Main-Canvas { 
 
    background-color: #DDDDDD; 
 
}

<div> 
 
    <div id="header"></div> 
 
    <script src="HeaderScript.js"></script> 
 
</div> 
 
<div id="Main-Canvas" style="height:400;width:400;"> 
 

 
</div>

Answer 1

Hier ist der Code mit einigen Korrekturen:

1. Hinzufügen 'px' zu Stil Zuordnung
2. das geklickt Element myFunction vorbei

var maincansize = 400; 
 
document.getElementById("Main-Canvas").style.height = maincansize; 
 
document.getElementById("Main-Canvas").style.width = maincansize; 
 
document.getElementById("Main-Canvas").style.position = "relative"; 
 
var ize = maincansize * .1; 
 

 
for (var a = 0; a < 10; a++) { 
 
    for (var b = 0; b < 10; b++) { 
 
    var c = document.createElement("div"); 
 
    c.onclick = function(ev) { 
 
     myFunction(ev.currentTarget); 
 
    }; 
 

 
    function myFunction(el) { 
 
     console.log("A square was clicked..."); 
 
     el.style.backgroundColor = "red"; 
 
    } 
 
    c.style.height = ize+'px'; 
 
    c.style.width = ize+'px'; 
 
    c.style.left = (b * ize)+'px'; 
 
    c.style.top = (a * ize)+'px'; 
 
    c.style.borderColor = "green"; 
 
    c.style.borderStyle = "outset"; 
 
    c.style.position = "absolute"; 
 
    document.getElementById('Main-Canvas').appendChild(c); 
 
    } 
 
}

#Main-Canvas { 
 
    background-color: #DDDDDD; 
 
}

<div id="Main-Canvas" style="height:400;width:400;"> 
 

 
</div>

Answer 2

Hier ist eine Lösung mit größeren Umbauten. Da Sie eine festgelegte Breite für das Containerelement Ihrer Board-Zellen verwenden, können Sie die Zellen schweben lassen und sie werden in die nächste Zeile eingefügt. Absolute Positionierung neigt dazu, ein bisschen ein bugger zu sein. Wenn Sie 10 Stück pro Zeile wollen dann ist es so einfach wie:

<container width>/<items per row> = <width>

Dokumentfragmente zu verwenden ist schneller als jedes einzelne Element Anfügen einer nach dem anderen auf den tatsächlichen DOM. Stattdessen hängen Sie die Elemente an ein Dokumentfragment an, das nicht Teil des DOM ist, bis Sie es anhängen. Auf diese Weise machst du eine einzelne Einfügung für alle Zellen anstelle von 100.

Ich habe etwas vom Styling in CSS verschoben, könnte aber leicht zurück in JS verschoben werden, wenn du es wirklich brauchst.

function onCellClick() { 
 
    
 
    this.style.backgroundColor = 'red'; 
 
    
 
    console.log('selected'); 
 
    
 
} 
 

 
var main = document.getElementById('board'), 
 
    frag = document.createDocumentFragment(), 
 
    i = 0, 
 
    len = 100; 
 

 
for (; i < len; i++) { 
 

 
    div = document.createElement('div'); 
 
    
 
    div.addEventListener('click', onCellClick, false); 
 
    frag.appendChild(div); 
 
    
 
} 
 

 
main.appendChild(frag);

#board { 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
#board div { 
 
    float: left; 
 
    box-sizing: border-box; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #ccc; 
 
}

<div id="board"></div>