How can I make an HTML Button do two different things on two separate clicks?

Question

I've tried looking through previously asked questions, but they all seem to be a bit too complicated for my level, or using jquery which I haven't learned yet and do not understand.

Here's what I want to do:

I have this html:

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

<button type="button" onclick="fontFunction()">Click Me!</button>

<script src="scripts/lightbulb.js"></script>

and I have this JS linked:

function fontFunction() {
  if (document.getElementById("demo").style.fontSize = "16px") {
      document.getElementById("demo").style.fontSize="32px";
      } else {
      document.getElementById("demo").style.fontSize="16px"
  }
}

All I want to do, is click the button, and it changes the font size to 32px (which WORKS!), and then click it again, and have the font size change BACK to 16px (THIS DOES NOT WORK).

I thought making a JS script that checks the fontsize, and changes it based on if the font size is 16 (in which case it makes it 32, but if it's not 16 it will make it 16) would work.

My apologies, I am BRAND NEW to javascript, so if at all possible please direct me to a place that can explain how to do this as if i were 5 years old (or explain it in such a manner).

Thank you so much!

Replace the `=` with `===` in the line with the `if`. One equal sign is an assignment but you want a comparison which is `===` (and in rare cases just `==`). — Guido Flohr, Aug 03 '20 at 19:26
Looks like a typo. `=` is for assignment, `==` is for comparison. When using assignment like this in the `if` check, the condition is always `true`. — David, Aug 03 '20 at 19:26
`if (document.getElementById("demo").style.fontSize = "16px") {` , the single `=` is the assignment operator, use either the `==` or `===` operator based on use case. — c_anirudh, Aug 03 '20 at 19:27

ray · Accepted Answer · 2020-08-03T19:33:30.980

The single equals sign is an assignment operator, not a comparison operator. So when you do:

if (document.getElementById("demo").style.fontSize = "16px")

You're assigning the font size, not verifying it. Use double or triple equals instead:

if (document.getElementById("demo").style.fontSize === "16px")

The reason this still works on the first click is that javascript assignment expressions return the new value:

const foo = 4; // assigns foo the value 4, and the expression returns/evaluates to 4

So in your case—with the single equals sign—what you're actually testing is "16px", the equivalent of:

if ("16px") {
  ...
}

In javascript non-empty strings are truthy, so "16px" is true for the purposes of the if statement, so the "32px" block executes every time this is called.

Scott Marcus · Answer 2 · 2020-08-03T19:34:22.433

Your problem is that you are using a single = to compare values, but a single = in JavaScript is for assignment, so your code always evaluates to true and goes into the true branch of your if statement. Instead, use == (comparison with conversion) or better yet === (strict comparison) to compare values.

But, the very simple way to do this is to not use inline styles (which is never a desired approach) or if statements at all. Just make a CSS class that you can just toggle on and off using the classList API:

function fontFunction() {
  document.getElementById("demo").classList.toggle("bigger");
}

.bigger { font-size:32px; }

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

<button type="button" onclick="fontFunction()">Click Me!</button>

Also, you really should not be using inline HTML event attributes like onclick. Event binding should be done in JavaScript, not HTML. So, the best solution would be:

// Get DOM references just once
let demo = document.getElementById("demo");

// Do event binding in JavaScript, not HTML
document.querySelector("button").addEventListener("click", fontFunction);

function fontFunction() {
  demo.classList.toggle("bigger");
}

.bigger { font-size:32px; }

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

<button type="button">Click Me!</button>

score 0 · Answer 3 · answered Aug 03 '20 at 20:08

You are using the assign operator in your if statement. Isequal(=) sign is used to assign value to the variable. Use a double Isequal (==) sign to compare the condition. Three Isequal (===) sign is used to compare datatype as well as the values between the variables.

Try this:

function fontFunction() {
 if (document.getElementById("demo").style.fontSize === "16px") {
  document.getElementById("demo").style.fontSize="32px";
  } else {
  document.getElementById("demo").style.fontSize="16px"
  }
  }

How can I make an HTML Button do two different things on two separate clicks?

3 Answers3