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?
<?php
?>
</body>
</html>[/code]
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: