Bu örneğimizde Javascript’te appendChild, createTextNode, createElement fonksiyonlarını kullanıyoruz.
Kaynak Kodları
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
}
#buyuk_div_style {
width: 480px;
height: 480px;
border-style:double;
background-color: bisque;
margin: auto;
}
.kucuk_div_style {
width: 52px;
height: 52px;
border-style: double;
border-color:darkgoldenrod;
background-color:cornsilk;
color: brown;
float: left;
margin: 1px;
line-height: 52px;
text-align: center;
}
.kirmizi_zemin {
background-color: brown;
color: cornsilk;
}
</style>
<script>
function olustur() {
var buyuk_div = document.createElement("DIV");
buyuk_div.id = "buyuk_div_style";
renk_sayaci=0;
for (let satir = 1; satir < 9; satir++) {
for (let sutun = 1; sutun < 9; sutun++) {
var kareler = document.createElement("DIV");
kareler.className = "kucuk_div_style";
kareler.id = "kare" + satir+""+sutun;
var yazi = document.createTextNode(satir + "/" + sutun);
renk_sayaci++;
if (renk_sayaci % 2 == 0) { kareler.className += " kirmizi_zemin"; }
kareler.appendChild(yazi);
buyuk_div.appendChild(kareler);
}
renk_sayaci++;
}
document.body.appendChild(buyuk_div);
}
</script>
</head>
<body>
<input type="button" value="Dama Tahtası" onclick="olustur()">
</body>
</html>
Bir yanıt bırakın Cevabı iptal et