Javascript kodu çalışmıyor fakat hata da vermiyor

William Crusader

Hectopat
Katılım
11 Kasım 2020
Mesajlar
5.043
Makaleler
1
Çözümler
12
Daha fazla  
Cinsiyet
Erkek
Meslek
Yok
Normalde kodda ilk olarak bir butona basıldığında o butonun resmi değişmeli. Bu çalışıyor, fakat sıra iki butonluğa geldiğinde çalışmıyor. Ayrıca herhangi bir hata da almıyorum.

HTML:

CSS:
CSS:
/*
  Keyframes kısmını sallamayın.
  Ne olduğunu bir ben bir de ben biliyorum.
*/

@keyframes onethatgetbigger{
   from{top:55px; left: 55px; width: 380px; height: 430px; opacity: 0.5; position: absolute;}
   to{top:55px; left: 55px; width: 440px; height: 470px; opacity: 1; position: absolute;}
}

@keyframes onethatgetsmaller{
   from{top:55px; left: 55px; width: 440px; height: 470px; opacity: 1; position: absolute;}
   to{top:55px; left: 55px; width: 380px; height: 430px; opacity: 0.5; position: absolute;}
}

@keyframes onethatgetbigger2{
   from{top:55px; left: 955px; width: 380px; height: 430px; opacity: 0.5; position: absolute;}
   to{top:55px; left: 855px; width: 440px; height: 470px; opacity: 1; position: absolute;}
}

@keyframes onethatgetsmaller2{
   from{top:55px; left: 855px; width: 440px; height: 470px; opacity: 1; position: absolute;}
   to{top:55px; left: 955px; width: 380px; height: 430px; opacity: 0.5; position: absolute;}
}

img{
   width: 52px;
   height: 58px;
   position: relative;
   cursor: pointer;
}

/*DOKUNMAYIN*/

.thirtysix{
   top: 400px;
   left: 425px;
   position: absolute;
}
.thirtyfive{
   top: 400px;
   left: 363px;
   position: absolute;
}
.thirtyfour{
   top: 400px;
   left: 301px;
   position: absolute;
}
.thirtythree{
   top: 400px;
   left: 239px;
   position: absolute;
}
.thirtytwo{
   top: 400px;
   left: 175px;
   position: absolute;
}
.thirtyone{
   top: 400px;
   left: 113px;
   position: absolute;
}
.thirty{
   top: 330px;
   left: 425px;
   position: absolute;
}
.twentynine{
   top: 330px;
   left: 363px;
   position: absolute;
}
.twentyeight{
   top: 330px;
   left: 301px;
   position: absolute;
}
.twentyseven{
   top: 330px;
   left: 239px;
   position: absolute;
}
.twentysix{
   top: 330px;
   left: 175px;
   position: absolute;
}
.twentyfive{
   top: 330px;
   left: 113px;
   position: absolute;
}
.twentyfour{
   top: 265px;
   left: 425px;
   position: absolute;
}
.twentythree{
   top: 265px;
   left: 363px;
   position: absolute;
}
.twentytwo{
   top: 265px;
   left: 301px;
   position: absolute;
}
.twentyone{
   top: 265px;
   left: 239px;
   position: absolute;
}
.twenty{
   top: 265px;
   left: 175px;
   position: absolute;
}
.nineteen{
   top: 265px;
   left: 113px;
   position: absolute;
}
.eighteen{
   top: 196px;
   left: 425px;
   position: absolute;
}
.seventeen{
   top: 196px;
   left: 363px;
   position: absolute;
}
.sixteen{
   top: 196px;
   left: 301px;
   position: absolute;
}
.fifteen{
   top: 196px;
   left: 239px;
   position: absolute;
}
.fourteen{
   top: 196px;
   left: 175px;
   position: absolute;
}
.thirteen{
   top: 196px;
   left: 113px;
   position: absolute;
}
.twelve{
   top: 130px;
   left: 425px;
   position: absolute;
}
.eleven{
   top: 130px;
   left: 363px;
   position: absolute;
}
.ten{
   top: 130px;
   left: 301px;
   position: absolute;
}
.nine{
   top: 130px;
   left: 239px;
   position: absolute;
}
.eight{
   top: 130px;
   left: 175px;
   position: absolute;
}
.seven{
   top: 130px;
   left: 113px;
   position: absolute;
}
.six{
   top: 63px;
   left: 425px;
   position: absolute;
}
.five{
   top: 63px;
   left: 363px;
   position: absolute;
}
.four{
   top: 63px;
   left: 301px;
   position: absolute;
}
.three{
   top: 63px;
   left: 237px;
   position: absolute;
}
.two{
   top: 63px;
   left: 175px;
   position: absolute;
}
.one{
   top: 63px;
   left: 113px;
   position: absolute;
}

/*DOKUNMAYIN*/

/*Birinci saat (png)*/
.clockone{
   width: 140px;
   height: 70px;
   top: 220px;
   left: 504px;
   position: absolute;
}
/*İkinci saat (png)*/
.clocktwo{
   position: absolute;
   width: 140px;
   height: 70px;
   top: 220px;
   left: 700px;
}
/*Birinci tahta*/
.board1{
   position: absolute;
   top: 5px;
   left: 5px;
   transition: 1s;
}
/*İkinci tahta*/
.board2{
   width: 420px;
   height: 470px;
   position: absolute;
   top: 100px;
   left: 870px;
   transition: 1s;
}
/*Büyüme animasyonu için özel sınıf.*/
.getbigger-class {
   animation: onethatgetbigger 1s;
   animation-fill-mode: forwards;
}
/*Küçülme animasyonu için özel sınıf.*/
.getsmaller-class {
   animation: onethatgetsmaller 1s;
   animation-fill-mode: forwards;
}
/*Aynı şey ama ikinci tahta için.*/
.getbigger2-class {
   animation: onethatgetbigger2 1s;
   animation-fill-mode: forwards;
}

.getsmaller2-class {
   animation: onethatgetsmaller2 1s;
   animation-fill-mode: forwards;
}
/*Bütün yazıları etkileyen düzenleme.*/
text{
   font-family: 'Comfortaa', cursive;
   color: red;
   font-size: 45px;
   transition: 1s;
   z-index: 5;
}
/*Birinci saat (yazı)*/
.clock1text{
   position: absolute;
   top: 236px;
   left: 517px;
}
/*İkinci saat (yazı)*/
.clock2text{
   position: absolute;
   top: 236px;
   left: 715px;
}

Javascript:
JavaScript:
let clock1 = "00:05" //Birinci saat
let clock2 = "00:00" //İkinci  saat
let başlat = false
let onboat = "1"
let boat1 = [firstblock  = ""]
let boat2 = [firstblock2 = "", secondblock2 = ""]
let boat3 = [firstblock3 = "", secondblock3 = "", thirdblock3 = ""]
let boat4 = [firstblock4 = "", secondblock4 = "", thirdblock4 = "", fourblock4 = ""]

window.onload = function(){ //Sayfa yüklendiğinde çalışır.
   clock1 = "00:05"         //Bilmediğim bir sebepten ötürü bu olmadan site çalışmıyor.
   clock2 = "00:00"
   onboat = "1"
   document.getElementById("board1").className = 'getbigger-class'
   document.getElementById("board2").className = 'getsmaller2-class'
}

function putboat(clicked_id){
   if (onboat == "1"){
      document.getElementById(clicked_id).src="1 kare.png"
      boat1[0] = clicked_id
      onboat += 1
   }
   if (onboat == "2"){
      document.getElementById(clicked_id).src="2 kare.png"
      document.getElementById(clicked_id + 1).src="2 kare.png"
      boat2[0] = clicked_id
      boat2[1] = clicked_id + 1
      onboat += 1
   }
}

function clock1load(){ //Birinci saatin çalışması için fonksiyon.
   if (clock1 == "00:05"){
      //Birinci tahta büyür, ikinci tahta küçülür.
      document.getElementById("board1").className = 'getbigger-class'
      document.getElementById("board2").className = 'getsmaller2-class'
      clock1 = "00:04"
   }
   else if (clock1 == "00:04"){
      clock1 = "00:03"
   }
   else if (clock1 == "00:03"){
      clock1 = "00:02"
   }
   else if (clock1 == "00:02"){
      clock1 = "00:01"
   }
   else if (clock1 == "00:01"){
      clock1 = "00:00"  
   }
}

function clock2load(){ //İkinci saatin çalışması için fonksiyon.
   if (clock1 == "00:00" & clock2 == "00:00"){
      clock2 = "00:05"
   }
   else if (clock1 == "00:00" & clock2 == "00:05"){
      //büyüme/küçülme efektlerini çalıştırır.
      //ikince tahta büyür, birinci tahta küçülür.
      document.getElementById("board2").classList.remove("getsmaller2-class")
      document.getElementById("board2").className = 'getbigger2-class'
      document.getElementById("board1").classList.remove("getbigger-class")
      document.getElementById("board1").className = 'getsmaller-class'
      clock2 = "00:04"
   }
   else if (clock1 == "00:00" & clock2 == "00:04"){
      clock2 = "00:03"
   }
   else if (clock1 == "00:00" & clock2 == "00:03"){
      clock2 = "00:02"
   }
   else if (clock1 == "00:00" & clock2 == "00:02"){
      clock2 = "00:01"
   }
   else if (clock1 == "00:00" & clock2 == "00:01"){
      clock2 = "00:00"
      clock1 = "00:05"
   }
}

putboat()

//clock1load ve clock2load fonksiyonlarını her 1 saniyede çalıştırır.
//bunu durdurmak istediğinizde closeInvertal() kullanabilirsiniz.
setInterval(() => {
      document.getElementById("clock1text").innerHTML = clock1
      document.getElementById("clock2text").innerHTML = clock2
      clock1load()
      clock2load()
}, 1000);
 

00PARZIVAL00

Picopat
Katılım
23 Temmuz 2022
Mesajlar
445
Çözümler
1
Daha fazla  
Cinsiyet
Diğer
Bu işlerde çok iyi değilim ama kendimce bir baktım.

Putboat fonksiyonunu bu şekilde değiştirip dener misiniz?

JavaScript:
function putboat(clicked_id){
   if (onboat == "1"){
      document.getElementById(clicked_id).src="1 kare.png"
      boat1[0] = clicked_id
      onboat = 1
      console.log("tıklandı!")
   }
}

Fotoğraflar yüklenmediği için karıştırmış olabilirim başka bir şey ile. JSFiddle, CodePen gibi sitelere yükleyip atabilirseniz fotoğraflı bir halde, daha iyi yardım edebiliriz.

Düzenleme: Şimdi yanlış anlamadıysam benim yaptığım bu şeyde sadece 1 fotoğraf çıkartıyor, ama senin attığın koda göre yine yanlış anlamadıysam her tıkladığında farklı bir fotoğraf veya 2 tane fotoğraf yapıyor. Sonuç olarak böyle ise benim attığım yanlış büyük ihtimal.

Şunu bırakayım bari, console.log ile hata almasanızda, en azından algılıyor mu, napıyor falan diye bakabilirsiniz.
 
Son düzenleme:
KS
KS
William Crusader

William Crusader

Hectopat
Katılım
11 Kasım 2020
Mesajlar
5.043
Makaleler
1
Çözümler
12
Daha fazla  
Cinsiyet
Erkek
Meslek
Yok
Bu işlerde çok iyi değilim ama kendimce bir baktım.

Putboat fonksiyonunu bu şekilde değiştirip dener misiniz?

JavaScript:
function putboat(clicked_id){
   if (onboat == "1"){
      document.getElementById(clicked_id).src="1 kare.png"
      boat1[0] = clicked_id
      onboat = 1
      console.log("tıklandı!")
   }
}

Fotoğraflar yüklenmediği için karıştırmış olabilirim başka bir şey ile. JSFiddle, CodePen gibi sitelere yükleyip atabilirseniz fotoğraflı bir halde, daha iyi yardım edebiliriz.

Düzenleme: Şimdi yanlış anlamadıysam benim yaptığım bu şeyde sadece 1 fotoğraf çıkartıyor, ama senin attığın koda göre yine yanlış anlamadıysam her tıkladığında farklı bir fotoğraf veya 2 tane fotoğraf yapıyor. Sonuç olarak böyle ise benim attığım yanlış büyük ihtimal.

Şunu bırakayım bari, console.log ile hata almasanız da, en azından algılıyor mu, n'apıyor falan diye bakabilirsiniz.
1. resmi algılıyor zaten. Sorun 2. kısımda.
Ayrıca console.log ile test ettim, 2. kısım direkt görmüyor.

@bitwise yardımcı olabilme imkanınız var mı?
 

bitwise

Megapat
Sosyal Tayfı
Katılım
22 Mart 2018
Mesajlar
6.746
Makaleler
1
Çözümler
58
JS cok da guzel dizayn edilmis bir dil olmadigi icin,
Kod:
onboat += 1
Yaptigin satirda "2" sonucuna varmiyorsun.
Cunku "1" + 1 = "11" :)
Muhtemelen bu yuzden 2. if bloguna hic girmiyor, cunku ilk if blogu onboat'i '11' e set ediyor.

Bu tarz incrementasyonlar icin Number(onboat) + 1 seklinde devam et.
Ya da numerik islem yapacaksan "onboat" variable'ini string olarak initialize etme.

Kodundan hicbir sey anlamiyorum bu arada, bir sekilde bu calissa bile tam yagli spagetti olmasina 20 satir kalmis.
 
KS
KS
William Crusader

William Crusader

Hectopat
Katılım
11 Kasım 2020
Mesajlar
5.043
Makaleler
1
Çözümler
12
Daha fazla  
Cinsiyet
Erkek
Meslek
Yok
JS cok da guzel dizayn edilmis bir dil olmadigi icin,
Kod:
onboat += 1
Yaptigin satirda "2" sonucuna varmiyorsun.
Cunku "1" + 1 = "11" :)
Muhtemelen bu yuzden 2. if bloguna hic girmiyor, cunku ilk if blogu onboat'i '11' e set ediyor.

Bu tarz incrementasyonlar icin Number(onboat) + 1 seklinde devam et.
Ya da numerik islem yapacaksan "onboat" variable'ini string olarak initialize etme.

Kodundan hicbir sey anlamiyorum bu arada, bir sekilde bu calissa bile tam yagli spagetti olmasina 20 satir kalmis.
Kodu biraz kurcaladım.
Onboat 2 olmadan önce ilk resmi koymam lazım, fakat olmuyor. 2. fiil varsa direkt ikincisini yapıyor.
Yeni hâli de bu. Bayağı kurcaladım fakat böyle ilerlenemez sanırım.

Ayrıca geç cevap verdiğim için özür dilerim. Mesajınız bildirimlerde gözükmedi.
 
Yukarı