Çözüldü JavaScript Koddaki hata nerede?

Fleure · 17 Temmuz 2023

HTML:

<html>
<head>
    <script type="text/javascript">

        var s =0;
        function artir(){
            deger= document.getElementById("sayi");
            deger.value=s
            s++;
        }
        function azalt(){
            deger= document.getElementById("sayi");
            deger.value=s
            s--;
        }
    </script>

</head>
<body>
    <button type="button" onclick="azalt()">-</button>
    <input type="text" value="0" size="5" id="sayi" name="sayi">
    <button type="button" onclick="artir()">+</button>
</body>
</html>

Böyle bir kod yazdım. Fakat ilk + ya basışımda -1, ilk - ye basışımda +1 kalanlarında ise + basınca +1 , - basınca -1 oluyor. İlk basışta neden öylede öbürlerinde normal ?

533388 · 17 Temmuz 2023

Hocam hemen 1 dk bekleyin size kodu atayim.

@Fleure hocam anladığım kadarıyla böyle istiyorsunuz.

JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <button id="at">arttır</button>
 <button id="az">alat</button>
 <h1 id="deger"></h1>
 <hr>
 <h1 style="color: red;" id="deger2"></h1>
 <script>
 let at = document.getElementById("at")
 let az = document.getElementById("az")
 let deger = document.getElementById("deger")
 let deger2 = document.getElementById("deger2");
 let value = 0
 at.addEventListener("click",function(e){
 value++
 deger.innerHTML = value.
 deger2.innerHTML = value.

 e.preventDefault();
 })
 az.addEventListener("click",function(e){
 value--
 deger.innerHTML = value.
 deger2.innerHTML = value.

 e.preventDefault();
 })
 </script>
</body>
</html>

@533388 hocam muhtemelen kod çalışmıyacak çünkü Value'ların yanındaki noktalrı silin.

Fleure · 17 Temmuz 2023

Şimdi anlamışsındır umarım bastık yazıyor.

Nizel G · 17 Temmuz 2023

533388 dedi:
@Nizel G

Hocam a etiketinin bildiğiniz gibi href özellği var bu preventdefault yapılmadan önce sizi başka bir sayfaya yönlendiriyor ama bu özellği yazınca yönlendirme olmuyor.

Çalışmaması ilginç gerçekten.

533388 · 17 Temmuz 2023

Nizel G dedi:
preventdefault nedir hocam?

Örnek olarak ise mesela bir tane todo-App'imiz olsun onda da todoları silmek için sil butonunu JavaScript tarafında oluşturduğumuzu varsayalım bu butonu bizim todomuzun yanına eklememiz ve ona basılınca yönlendirme olmaması lazım YouTube'dan todo-App örneklerini incelerseniz kullanıldığını görürsünüz.

@Fleure yani kaç defa bastığımızı mı yazacak.

@Fleure ayrıca altta çıkması için yeni bir div açıp Value değerini ona appenchild olarak ekleyebiliriniz.

Fleure · 17 Temmuz 2023

533388 dedi:
Örnek olarak ise mesela bir tane todo-App'imiz olsun onda da todoları silmek için sil butonunu JavaScript tarafında oluşturduğumuzu varsayalım bu butonu bizim todomuzun yanına eklememiz ve ona basılınca yönlendirme olmaması lazım YouTube'dan todo-App örneklerini incelerseniz kullanıldığını görürsünüz.

@Fleure yani kaç defa bastığımızı mı yazacak.

@Fleure ayrıca altta çıkması için yeni bir div açıp Value değerini ona appenchild olarak ekleyebiliriniz.

alttaki dediğini kod diziniyle açıklar mısın ?

Nizel G · 17 Temmuz 2023

Fleure dedi:
Eki Görüntüle 1865243
Şimdi anlamışsındır umarım bastık yazıyor.

Yazıyı gösteren iki elemente de aynı id'yi verip güncelleme yaparken şöyle yapmalısınız:
İşin görüntü kısmı CSS'ye girer, JS kısmında şu örnek olur umarım.

Kod:

const kucuk = document.getElementById('id1');
const buyuk = document.getElementById('id2');

kucuk.innerHTML = sayı;
buyuk.innerHTML = sayı;

533388 · 17 Temmuz 2023

@Fleure ya siz mesela sayının butonların altında büyük fontla mı çıkmasını istiyorsunuz.

Fleure · 17 Temmuz 2023

Nizel G dedi:
Yazıyı gösteren iki elemente de aynı id'yi verip güncelleme yaparken şöyle yapmalısınız:
İşin görüntü kısmı CSS'ye girer, JS kısmında şu örnek olur umarım.

Kod:

const kucuk = document.getElementById('id1'); const buyuk = document.getElementById('id2'); kucuk.innerHTML = sayı; buyuk.innerHTML = sayı;

olmadı
@533388 evet

533388 · 17 Temmuz 2023

Hocam hemen 1 dk bekleyin size kodu atayim.

@Fleure hocam anladığım kadarıyla böyle istiyorsunuz.

JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <button id="at">arttır</button>
 <button id="az">alat</button>
 <h1 id="deger"></h1>
 <hr>
 <h1 style="color: red;" id="deger2"></h1>
 <script>
 let at = document.getElementById("at")
 let az = document.getElementById("az")
 let deger = document.getElementById("deger")
 let deger2 = document.getElementById("deger2");
 let value = 0
 at.addEventListener("click",function(e){
 value++
 deger.innerHTML = value.
 deger2.innerHTML = value.

 e.preventDefault();
 })
 az.addEventListener("click",function(e){
 value--
 deger.innerHTML = value.
 deger2.innerHTML = value.

 e.preventDefault();
 })
 </script>
</body>
</html>

@533388 hocam muhtemelen kod çalışmıyacak çünkü Value'ların yanındaki noktalrı silin.

Fleure · 17 Temmuz 2023

533388 dedi:

Hocam hemen 1 dk bekleyin size kodu atayim.

@Fleure hocam anladığım kadarıyla böyle istiyorsunuz.

JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <button id="at">arttır</button>
 <button id="az">alat</button>
 <h1 id="deger"></h1>
 <hr>
 <h1 style="color: red;" id="deger2"></h1>
 <script>
 let at = document.getElementById("at")
 let az = document.getElementById("az")
 let deger = document.getElementById("deger")
 let deger2 = document.getElementById("deger2");
 let value = 0
 at.addEventListener("click",function(e){
 value++
 deger.innerHTML = value.
 deger2.innerHTML = value.

 e.preventDefault();
 })
 az.addEventListener("click",function(e){
 value--
 deger.innerHTML = value.
 deger2.innerHTML = value.

 e.preventDefault();
 })
 </script>
</body>
</html>

@533388 hocam muhtemelen kod çalışmıyacak çünkü Value'ların yanındaki noktalrı silin.

kanka yok çok saçma bir şey oldu böyle.

533388 · 17 Temmuz 2023

@Fleure istediğiniz gibi CSS verebilirsiniz yanına da sayı yazın ben en basit haliyle yaptım devamı sizin yaratıcılığınıza kalmış.

Çözüldü JavaScript Koddaki hata nerede?

Ayrıntılı düzenleme

Fleure

Decapat

533388

Fleure

Decapat

Nizel G

Megapat

533388

Hectopat

Fleure

Decapat

Nizel G

Megapat

533388

Hectopat

Fleure

Decapat

533388

Hectopat

Fleure

Decapat

533388

Hectopat

Benzer konular