i swear i can do this an it must just be a machine error. I have the same thing working in over programs but within a method. I was simply coping someone elses working code. I cant update the score from 0 to 1. Can anyone take a look? must be the tiniest logic error ever or something. Yes im calling my css and js. Thanks in advance
<!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">
<title>Clicker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="game.js"></script>
<h1>CLICKER</h1>
<p id="score">Score: 0</p>
<img id="algae" src="/images/algaepng.png" alt="Image">
</body>
</html>
FROM GAME.JS
let score = 0;
score = score +1;
document.getElementById('score').innerHTML = "Score: " + score;
Your javascript code is executed before the HTML code
Solution 1: Declare the script in the head with the word defer
let score = 0;
score = score + 1;
document.getElementById('score').innerHTML = "Score: " + score;<!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" />
<title>Clicker</title>
<link rel="stylesheet" href="styles.css" />
<script src="game.js" defer></script>
</head>
<body>
<h1>CLICKER</h1>
<p id="score">Score: 0</p>
</body>
</html>Solution 2: declare your javascript at the end of the body
let score = 0;
score = score + 1;
document.getElementById('score').innerHTML = "Score: " + score;<!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" />
<title>Clicker</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>CLICKER</h1>
<p id="score">Score: 0</p>
<script src="game.js"></script>
</body>
</html>