Javascript'de Çözemediğim Bir Sorun Var - Sayfa 2

01-09-2022, 13:39:53

#10

umutcankilic

sorun yine çözülmedi

blap adlı üyeden alıntı: mesajı görüntüle

Javascript dosyasında script tagı olmaz

01-09-2022, 13:40:22

#11

Mekruh

https://easyupload.io/i25h1f buraya upload ettim kontrol edip hatayı nerede yaptığınızı anlayabilirsiniz hocam.

01-09-2022, 13:44:52

#12

VoisMedia

html kodları ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">

<title>Document</title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<p class="heading">Sayaç</p>
<p class="counter" id="counter">0</p>
<button class="incr">+</button>
<button class="decr">-</button>
</div>
<script src="java.js"></script>
</body>
</html>

js kodları

$(document).ready(function(){
let counter = document.getElementById('counter');
let incr = document.querySelector('.incr');
let decr = document.querySelector('.decr');
let count = 0;
incr.addEventListener("click", ()=> {
count++;
updateDisplay();
});
decr.addEventListener("click", ()=> {
count--;
updateDisplay();
});
function updateDisplay(){
counter.innerHTML = count;
};
});

Kütüphane eklemek işinizi kolaylaştırır hocam bu şekilde deneyebilirsiniz

01-09-2022, 13:45:20

#13

eypoffcl

1. <script src="java.js"></script>
Bu kodu <head> </head> etiketlerı arasına alın.

2. Java.js dosyasında <script> </script> etiketleri kullanılmaz.

3. "let count" değil de "var count" şeklinde değiştirir misiniz?

Bir de tüm kodlari buranın arasına eklemeyi deneyin
(function() {
//kodlar
})();

01-09-2022, 13:53:26

#14

Mekruh

Karolinax adlı üyeden alıntı: mesajı görüntüle

html kodları ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">

<title>Document</title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<p class="heading">Sayaç</p>
<p class="counter" id="counter">0</p>
<button class="incr">+</button>
<button class="decr">-</button>
</div>
<script src="java.js"></script>
</body>
</html>

js kodları

$(document).ready(function(){
let counter = document.getElementById('counter');
let incr = document.querySelector('.incr');
let decr = document.querySelector('.decr');
let count = 0;
incr.addEventListener("click", ()=> {
count++;
updateDisplay();
});
decr.addEventListener("click", ()=> {
count--;
updateDisplay();
});
function updateDisplay(){
counter.innerHTML = count;
};
});

Kütüphane eklemek işinizi kolaylaştırır hocam bu şekilde deneyebilirsiniz

Doğru bilinen yanlışı düzeltmek için yazıyorum hocam, zaten örnek kodda VanillaJS kullanılmış, jQuery sayfaya dahil etmeye gerek yok.

01-09-2022, 13:55:22

#15

VoisMedia

Mekruh adlı üyeden alıntı: mesajı görüntüle

Doğru bilinen yanlışı düzeltmek için yazıyorum hocam, zaten örnek kodda VanillaJS kullanılmış, jQuery sayfaya dahil etmeye gerek yok.

Jquery sayfa hazır komutu için eklendi " $(document).ready(function(){ " yanlışım varsa düzeltin hocam

01-09-2022, 13:58:37

#16

Mekruh

Karolinax adlı üyeden alıntı: mesajı görüntüle

Jquery sayfa hazır komutu için eklendi " $(document).ready(function(){ " yanlışım varsa düzeltin hocam

Evet hocam kodu incelediğim de şimdi gördüm doğru document.ready eklenmiş pardon.

01-09-2022, 14:03:11

#17

ErenDemir

Konu tam bir karmaşaya dönmüş.

1- JS dosyasında script tagı kullanamazsınız onları silmeniz gerekiyor.
2- addEventListener{ şeklinde fonksiyonu kullanmaya çalışmızsınız ondan dolayı hata veriyor. Javascript'te fonksiyonları () ile kullanmanız gerekiyor.
3- Javascript dosyanızı sayfa başına yazmışsınız bundan dolayı sayfanız daha tamamen tarayıcı tarafından indexlenmediğinden dolayı elementleri querySelectorle almaya çalıştığınızda null değeri geliyor ve event listener ekleyemiyorsunuz bunu çözmek için iki yol var ya js dosyasını body kısmının en sonuna ekleyin ya da head kısmına alıp defer attr'si ekleyin.

Deferli kullanım örneği:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="style.css" />
      <script src="java.js" defer></script>
      <title>Document</title>
   </head>
   <body>
      <div class="container">
         <p class="heading">Sayaç</p>
         <p class="counter" id="counter">0</p>
         <button class="incr">+</button>
         <button class="decr">-</button>
      </div>
   </body>
</html>

Düzeltilmiş Javascript kodu:

let counter = document.getElementById("counter");
let incr = document.querySelector(".incr");
let decr = document.querySelector(".decr");
let count = 0;
incr.addEventListener("click", () => {
   count++;
   updateDisplay();
});
decr.addEventListener("click", () => {
   count--;
   updateDisplay();
});
function updateDisplay() {
   counter.innerHTML = count;
}

01-09-2022, 14:28:36

#18

umutcankilic

Arkadaşlar yardımlarınız için teşekkür ederim. JS dosyamda şuanda sorun yok ama sayaçdaki + veya - butonuna bastığımda fonksiyonlar çalışmıyor

Hata üstüne hata

Karolinax adlı üyeden alıntı: mesajı görüntüle

html kodları ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">

<title>Document</title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<p class="heading">Sayaç</p>
<p class="counter" id="counter">0</p>
<button class="incr">+</button>
<button class="decr">-</button>
</div>
<script src="java.js"></script>
</body>
</html>

js kodları

$(document).ready(function(){
let counter = document.getElementById('counter');
let incr = document.querySelector('.incr');
let decr = document.querySelector('.decr');
let count = 0;
incr.addEventListener("click", ()=> {
count++;
updateDisplay();
});
decr.addEventListener("click", ()=> {
count--;
updateDisplay();
});
function updateDisplay(){
counter.innerHTML = count;
};
});

Kütüphane eklemek işinizi kolaylaştırır hocam bu şekilde deneyebilirsiniz

eypoffcl adlı üyeden alıntı: mesajı görüntüle

1. <script src="java.js"></script>
Bu kodu <head> </head> etiketlerı arasına alın.

2. Java.js dosyasında <script> </script> etiketleri kullanılmaz.

3. "let count" değil de "var count" şeklinde değiştirir misiniz?

Bir de tüm kodlari buranın arasına eklemeyi deneyin
(function() {
//kodlar
})();

Mekruh adlı üyeden alıntı: mesajı görüntüle

Doğru bilinen yanlışı düzeltmek için yazıyorum hocam, zaten örnek kodda VanillaJS kullanılmış, jQuery sayfaya dahil etmeye gerek yok.

Karolinax adlı üyeden alıntı: mesajı görüntüle

Jquery sayfa hazır komutu için eklendi " $(document).ready(function(){ " yanlışım varsa düzeltin hocam

Mekruh adlı üyeden alıntı: mesajı görüntüle

Evet hocam kodu incelediğim de şimdi gördüm doğru document.ready eklenmiş pardon.

ErenDemir adlı üyeden alıntı: mesajı görüntüle

Konu tam bir karmaşaya dönmüş.

1- JS dosyasında script tagı kullanamazsınız onları silmeniz gerekiyor.
2- addEventListener{ şeklinde fonksiyonu kullanmaya çalışmızsınız ondan dolayı hata veriyor. Javascript'te fonksiyonları () ile kullanmanız gerekiyor.
3- Javascript dosyanızı sayfa başına yazmışsınız bundan dolayı sayfanız daha tamamen tarayıcı tarafından indexlenmediğinden dolayı elementleri querySelectorle almaya çalıştığınızda null değeri geliyor ve event listener ekleyemiyorsunuz bunu çözmek için iki yol var ya js dosyasını body kısmının en sonuna ekleyin ya da head kısmına alıp defer attr'si ekleyin.

Deferli kullanım örneği:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="style.css" />
      <script src="java.js" defer></script>
      <title>Document</title>
   </head>
   <body>
      <div class="container">
         <p class="heading">Sayaç</p>
         <p class="counter" id="counter">0</p>
         <button class="incr">+</button>
         <button class="decr">-</button>
      </div>
   </body>
</html>

Düzeltilmiş Javascript kodu:

let counter = document.getElementById("counter");
let incr = document.querySelector(".incr");
let decr = document.querySelector(".decr");
let count = 0;
incr.addEventListener("click", () => {
   count++;
   updateDisplay();
});
decr.addEventListener("click", () => {
   count--;
   updateDisplay();
});
function updateDisplay() {
   counter.innerHTML = count;
}