Notationen an den Rand eines Schachbrettes

tklustig

Erfahrenes Mitglied
Hallo Leute.
folgender Code stellt ein Schachbrett visuell auf dem Bildschirm da.
Meine Intention ist es, mit JavaScript die grau unterlegten Bereiche mit den Feldbezeichnungen A bis H und 1 bis 8 aufzufüllen.
Das A und die 8 habe ich durch eine CSS-Anweisung statisch eingefügt. Wie bekomme ich es auf die Kette, die Buchstaben B bis H bzw. 2-8 dynamisch über JavaScript einzufügen, anstatt für jeden Buchstaben/Zahl eine eigene CSS-Regel aufzustellen?
Code:
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title> Schachbrett mit Drag&Drop </title>
    <!-- Hier ggf. CSS-Link einfügen, z.B.: <link href="css/selektoren.css" rel="stylesheet"> -->
<style>
.notationX{
position:absolute;
top:49.50%;
right:60.75%;
}
.notationY{
position:absolute;
top:8%;
right:37.75%;
}
.row {
border:2px solid blue;
width: 420px;
height: 420px;
background-color:gray;
}

.box1 {
width: 50px;
height: 50px;
background-color: black;
float: left;
}

.box2 {
width: 50px;
height: 50px;
background-color: green;
float:left;
}
</style>
</head>
<body> <!-- ab hier HTML-Code einfügen -->
<script>
function ZeichneBrettWhite(){
var x=0;
    for(i=1;i<=8;i++){
        if(i%2==1)
            x=1;     
    else if(i%2==0)
            x=2;     
    document.write("<div class='box"+x+"'>");
    document.write("</div>");
    }
}
function ZeichneBrettBlack(){
var x=0;
    for(i=1;i<=8;i++){
        if(i%2==1)
            x=2;
        else if(i%2==0)
            x=1;         
    document.write("<div class='box"+x+"'>");
    document.write("</div>");
    }
}
</script>
<form id="formular" name="formular" action="" method="post"></form>
<center>
<h3>Schachbrett mit Drag&Drop</h3>
<div class="row">
<script>
var aufrufe=0;
while(aufrufe<4){
ZeichneBrettWhite();
document.write("<div class='notationY'>8</div>");
ZeichneBrettBlack();
document.write("<div class='notationX'>A</div>");
aufrufe++;
}
</script>
</div>
</center>
  
<?php
?>
</body>
</html>

<?php
?>
</body>
</html>[/code]
 
Zuletzt bearbeitet:
Hallo,

ich hab deinen Code mal ein bisschen aufgeräumt ;)
https://codepen.io/philipp-doblhofer/pen/pVwKRX
Die Funktionen ZeichneBrettWhite/Black hab ich zusammengefasst, da sie sowieso den selben Code enthalten, als auch nicht das tun, was der Funktionsname sagt ;)

Im codepen siehst du auch, wie die Beschriftung über JavaScript erzeugt werden könnte.
Es wird einfach eine Zählvariable entweder als Zahl 1-8 bzw. als Buchstabe A-H ausgegeben

Liebe Grüße
Philipp
 
Ohhh, da trennen uns Welten! Sehr elegant, beide Lösungsansätze! Der meinigen himmelweit überlegen. An diesem Code werde ich lernen. Danke dafür!
 
Zurück