Çözüldü JavaScript ile Satranç Tahtası Oluşturma Hatası

muh4333 · 2 Mar 2026

merhaba kendimi denemek amçalı kod yazdım ama çalışmıyor kodumdaki amaç butona tıklayınca satranç tahtası benzeri görüntü ooluşturmasını istiyorum
html kodum

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="tahtacerceve">
  
</div>
<input type="button" value="YAP" onclick="yap()">
<script src="script.js"></script>
</body>
</html>

css kodum

CSS:

#tahtacerceve{
    width: 240px;
    height: 240px;
    border-style: solid;
    border-color: black;
}
.beyaz{
width: 30px;
height: 30px;
background-color: rgb(255, 255, 255);
float: left;
}
.siyah{
    width: 30px;
    height: 30px;
    background-color: rgb(0, 0, 0);
    float: left;
}

javascript kodum

JavaScript:

function yap(){
    document.getElementById("tahtacerceve").innerText="";
    for (var i= 0; i<8;i++) {
        for(var j=0;j<8;i++){
            if((i+j)%2==0)
            {
                document.getElementById("tahtacerceve").innerHTML+="<div class='beyaz'></div>";
              
            }
            else
            {
                document.getElementById("tahtacerceve").innerHTML+="<div class='siyah'></div>";
              
            }
        }
    }
}

zenokx · 2 Mar 2026

Html

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Satranç Tahtası</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="tahtacerceve"></div>
    <input type="button" value="YAP" onclick="yap()">
    <script src="script.js"></script>
</body>
</html>

css

CSS:

#tahtacerceve {
    width: 240px;
    height: 240px;
    border: 2px solid black;
    /* Karelerin dışarı taşmasını engellemek için */
    box-sizing: content-box;
    overflow: hidden;
}

.beyaz {
    width: 30px;
    height: 30px;
    background-color: rgb(255, 255, 255);
    float: left;
}

.siyah {
    width: 30px;
    height: 30px;
    background-color: rgb(0, 0, 0);
    float: left;
}

java

JavaScript:

function yap() {
    var cerceve = document.getElementById("tahtacerceve");
    cerceve.innerHTML = ""; // İçini temizle
    var icerik = ""; // Tüm kareleri burada biriktireceğiz

    for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) { // Hata düzeltildi: i++ yerine j++ yapıldı
            if ((i + j) % 2 == 0) {
                icerik += "<div class='beyaz'></div>";
            } else {
                icerik += "<div class='siyah'></div>";
            }
        }
    }
    cerceve.innerHTML = icerik; // Tek seferde ekrana bas
}

biraz düzenleme yaptım koda

muh4333 · 2 Mar 2026

zenokx' Alıntı:
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Satranç Tahtası</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="tahtacerceve"></div>
<input type="button" value="YAP" onclick="yap()">
<script src="script.js"></script>
</body>
</html>

css

#tahtacerceve {
width: 240px;
height: 240px;
border: 2px solid black;
/* Karelerin dışarı taşmasını engellemek için */
box-sizing: content-box;
overflow: hidden;
}

.beyaz {
width: 30px;
height: 30px;
background-color: rgb(255, 255, 255);
float: left;
}

.siyah {
width: 30px;
height: 30px;
background-color: rgb(0, 0, 0);
float: left;
}

java

function yap() {
var cerceve = document.getElementById("tahtacerceve");
cerceve.innerHTML = ""; // İçini temizle
var icerik = ""; // Tüm kareleri burada biriktireceğiz

for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) { // Hata düzeltildi: i++ yerine j++ yapıldı
if ((i + j) % 2 == 0) {
icerik += "<div class='beyaz'></div>";
} else {
icerik += "<div class='siyah'></div>";
}
}
}
cerceve.innerHTML = icerik; // Tek seferde ekrana bas
}

biraz düzenleme yaptım koda

teşekür ederim artık çalışıyor

zenokx · 2 Mar 2026

rica ederim mutlu oldum çalışmasına

Çözüldü JavaScript ile Satranç Tahtası Oluşturma Hatası

muh4333

Üye

zenokx

zenokx

Üye

muh4333

Üye

zenokx

Üye

Sosyal medya sayfalarımız