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

William Crusader · 30 Kasım 2022

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:

JustPaste.it - Share Text & Images the Easy Way

justpaste.it

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 · 30 Kasım 2022

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.

William Crusader · 1 Aralık 2022

00PARZIVAL00 dedi:
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 · 1 Aralık 2022

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.

William Crusader · 1 Aralık 2022

bitwise dedi:
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.

JustPaste.it - Share Text & Images the Easy Way

justpaste.it

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

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

Ayrıntılı düzenleme

William Crusader

Hectopat

JustPaste.it - Share Text & Images the Easy Way

00PARZIVAL00

Picopat

William Crusader

Hectopat

bitwise

Megapat

William Crusader

Hectopat

JustPaste.it - Share Text & Images the Easy Way

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz