Learning JavaScript, Day 7 – If and Else and Else If

30 Apr, 2026

It's April 30th, which means that, tomorrow, yes, it's gonna be May.

(It also means I have to update my blog's home page, because breaking everything into months is a slightly manual process, but I like that it's a manual process, dammit.

I also like making bad *NSync jokes. IT'S GONNA BE MAY.)

The JavaScript If Statement

if is pretty straightforward. But the examples did show me that if I'm using getElementById, I can put things into the original HTML element.

The other tutorial made it seem like I couldn't, because it wasn't working if I had a space in there, but maybe that was just something about it not being right, because it works a treat here:

<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
  document.getElementById("demo").innerHTML = 
  "Good day!";
}
</script>

That means, of course, it's time for:

<p id="demo">PREPARE YOURSELF!</p>
<script>
  let mood1 = "cattle";
  let mood2 = "loveplay";
  if (mood1 == "cattle") {
    document.getElementById("demo").innerHTML = 
    "You can be in a mood.";
    }
</script>

Yessssss, Gurney Halleck is back in business.

Nested ifs are pretty cool too.

<p id="demo">PREPARE YOURSELF!</p>
<script>
  let mood1 = "cattle";
  let mood2 = "loveplay";
  if (mood2 == "loveplay") {
    if (mood1 == "cattle") {
      document.getElementById("demo").innerHTML = 
     "You can be in a mood.";
     }
    }
</script>

But obviously, because "mood is for cattle and loveplay", it should be:

<p id="demo">PREPARE YOURSELF!</p>
<script>
  let mood1 = "cattle";
  let mood2 = "loveplay";
  if (mood1 == "cattle" && mood2 == "loveplay") {
    document.getElementById("demo").innerHTML = 
    "You can be in a mood.";
    }
</script>

The JavaScript Else Statement

'else' is pretty straightforward too.

<p id="demo"></p>
<script>
  let paulAtreides = "Mood"
  let mood1 = "cattle";
  if (paulAtreides == mood1) {
    document.getElementById("demo").innerHTML = 
    "You can be in a mood.";
    } else {
      document.getElementById("demo").innerHTML = 
      "PREPARE YOURSELF";
    }
</script>

And 'else if' makes sense too.

<p id="demo"></p>
<script>
  let paulAtreides = "Mood"
  let mood1 = "cattle";
  let mood2 = "loveplay";
  if (paulAtreides == mood1) {
    document.getElementById("demo").innerHTML = 
    "You can be in a mood.";
    } else if (paulAtreides == mood2) {
      document.getElementById("demo").innerHTML = 
      "I'll leave you to it.";
    } else {
      document.getElementById("demo").innerHTML = 
      "PREPARE YOURSELF!";
    }
</script>

I really do love this demo they have:

<p id="demo"></p>

<script>
let text;
if (Math.random() < 0.5) {
  text = 
  "<a href='https://w3schools.com'>Visit W3Schools</a>";
} else {
  text = 
  "<a href='https://wwf.org'>Visit WWF</a>";
}
document.getElementById("demo").innerHTML = text;
</script>

Which means I want to spend all my time making the stupidest coin flip link program. And since my W3Schools subscription gives me a tiny little place to build stupid little websites...

BEHOLD THE MYSTERY LINK!

I am amusing myself. Deal with it.

(I spent more time deciding on the CSS than I did actually writing the JavaScript. Yes, you can make fun of me.)

JavaScript Ternary Operator

Okay, this is kinda hard for me to figure out just looking at it, but I think I get it.

Instead of doing all of this:

<p id="demo"></p>
<script>
  let paulAtreides = "Mood"
  let mood1 = "cattle";
  if (paulAtreides == mood1) {
    document.getElementById("demo").innerHTML = 
    "You can be in a mood.";
    } else {
      document.getElementById("demo").innerHTML = 
      "PREPARE YOURSELF";
    }
</script>

I do this:

<p id="demo"></p>
<script>
  let paulAtreides = "Mood"
  let mood1 = "cattle";
  let mood = (paulAtreides == mood1) ? 
  "You can be in a mood" : "PREPARE YOURSELF!";
  document.getElementById("demo").innerHTML = mood;
</script>

Which is tidier, but I do kinda find it harder to read. But it's definitely good to have, because I can totally see that, at some point, all those of those if and else commands get incredibly complicated.

And it's a little easier to read if I put in line breaks, which helps.

Day 7 — Results

• You can have stuff inside whatever element you're grabbing by getElementById.
• if says that if the condition you set is true, then it executes the code.
• You can nest your ifs, but it's a bit neater to do condition1 && condition2
• else says that if the condition you set is false, then it executes this other code.
• else if says that if the condition you set is true, or this other condition you set is true, it will execute your code.
• Click the Mystery Link...
• The Ternary Operator is ? :, where it goes "condition" ? "code-if-true" : "code-if-false".

I think I'm going to quit it there, because while I totally get if and else and else if, the ternary operator is kinda hard for me to get my head around, and the next bit is all about Switch Statements, which will definitely be a lot more work for me.

So let's leave that, Booleans, and Logical Operators for tomorrow, okay?

Today's Sticker

Today is not a sticker, just because when I was experimenting with my tiny thermal printer, I didn't have my sticker roll in there.

But enjoy a tiny Gurney Halleck from the 1984 Dune Coloring Book, playing his baliset, looking like he would love to be in a mood. Or enjoy him playing the baliset for 10 hours because what else was YouTube meant for?

#kate learns javascript #kate learns web development #programming