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