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