Why doesn't this code update "All is well" to "Red Alert: hit by phaser fire!"?
What is wrong with it? I did it like the book's instruction, but don't get the expected result.
<!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>Planets</title>
<script>
var planet;
function init() {
var Planet = document.getElementById("greenplanet");
planet.innerHTML = "Red Alert: hit by phaser fire!";
}
window.onload= init;
</script>
</head>
<body>
<h1>greenplanet</h1>
<p id="greenplanet">All is well</p>
<h1>redplanet</h1>
<p id="redplanet">Nothing to report</p>
<h1>blueplanet</h1>
<p id="blueplanet">All system A-OK</p>
</body>
</html>
A couple of reasons.
You've spelled planet two different ways, planet and Planet. Javascript is case sensitive.
You declared planet twice. You should be able to do var planet; and then assign it on the next line like planet = document.getElementById("greenplanet");
Using a nice IDE like Visual Studio Code with a spell checker installation can help you root out issues like this in the future.