Javascript'de Çözemediğim Bir Sorun Var

01-09-2022, 13:31:40

Herkese Merhabalar, yeni yeni javascript öğreniyorum ve önüme gelen her projeyi yapmaya çalışıyorum. Çünkü ancak böyle öğrenilebildiğini anladım yazılımın

Sorun şu. Bu uygulamayı yapan kişi kodları tek bir sayfaya yazıp çalıştırmış. Ama ben style.css ve app.js dosyaları açıp bu dosyalarda çalıştırmak istedim. Kodlar şu şekilde. Bu bir sayaç uygulaması

HTML Sayfası

<!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="java.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>

</body>
</html>

CSS Sayfası

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  width: 150px;
  height: 150px;
  background-color: #185ad8;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  border-radius: 15px;
}
.counter {
  font-size: 4rem;
  font-family: sans-serif;
}
.headling {
  font-family: sans-serif;
}
button {
  width: 40px;
  height: 40px;
  position: absolute;
  cursor: pointer;
  font-size: 1.2em;
  background: white;
  color: rgb(34, 34, 34);
  box-shadow: 0 0 10px rgb(51, 51, 51, 0.158);
  border: none;
  border-radius: 50px;
}
.decr {
  bottom: -15%;
  right: 10%;
}
.incr {
  bottom: 10%;
  right: -15%;
}

Javascript Sayfası

<script>
  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;
            };
</script>

Hata buradaki koddan kaynaklanıyor şuanda

 function updateDisplay(){
                counter.innerHTML = count;
            };

Bu sorunu nasıl çözebilirim ?

01-09-2022, 13:36:15

#2

VoisMedia

Tam hata nedir

01-09-2022, 13:36:47

#3

Canozkan

script tagınızı (<script src="java.js"></script>)
</body> bitmeden önce ekler misiniz?

<!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>
 
  <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>

01-09-2022, 13:36:51

#4

Wenny

Hocam sorununuzu çözer mi bilmiyorum ama html'de script tagını bodynin en alt kısmına yazmanız gerekiyor.

01-09-2022, 13:36:54

#5

Albay_X

app.js dosyasına ayrıca açmak istemişim yazmışsın fakat code tarafında java.js diye bir yol göstermişsin yol doğru mu kontrol et. Birde console da ne hatası veriyor artırmak istediğinde ?

01-09-2022, 13:37:35

#6

umutcankilic

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

Tam hata nedir

01-09-2022, 13:38:44

#7

blap

Javascript dosyasında script tagı olmaz

01-09-2022, 13:39:21

#8

VoisMedia

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

script kodlarınızı

<script>
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;
};
</script> şekilde düzeltip tekrar dener misiniz ve .js dosyasına yazıyorsanız başına ve sonuna script koymayın

01-09-2022, 13:39:49

#9

Caesar

JS dosyasının içine <script> diye başlarsan çalışmaması npormaldir. js dosyalarına script tagı aç kapa yapmazsın direk kodlarını girersin. ayrıca aşağı yukarı denmiş gerek yok async tanımlayın src yi çalışır ondan sonra.