Code Fix #1: JavaScript, HTML Elements, and Variable Assignments

Welcome to the first post in my new series, Code Fix! In this series, I'll be reviewing code from people and answering, "Why doesn't my code work?"

In today's post, I'll be going over the concept of variable assignments and manipulating the DOM!

The Task

The person was given the following HTML:

<!-- index.html -->
<section>
    <h1>My Opinion on Avocadoes</h1>
    <p>Avocadoes? I think they're <span>delicious</span>!</p>
</section>

The task was to change the text within the span to "disgusting" through JavaScript using document.querySelector().

The Problem

The person tried the code below which wasn't getting the expected results:

// index.js
let span = document.querySelector("span").innerText;
span = "digusting";

We can debug this with console.log() to see what's going on.

Why It Doesn't Work

For context, document.querySelector() returns the first instance of a specified HTML element, which is a span in this case.

// showing what document.querySelector() returns
let span = document.querySelector("span");
console.log(span); // <span>delicious</span>

You'll see that document.querySelector() returns the actual element itself. In this example, we're storing it in a variable called span.

Now, innerText is a property of the HTML element that represents the rendered text:

// showing what innerText returns
let span = document.querySelector("span");
console.log(span); // <span>delicious</span>
console.log(span.innerText); // "delicious"

You can see what's going on now if we go back to the initial code:

// initial code
let span = document.querySelector("span").innerText;
console.log(span); // "delicious"
span = "disgusting";
console.log(span); // "disgusting"

In the first line, only the text of the HTML element is being stored into the variable span - not the element itself.

Then in the next line, the string "disgusting" gets stored into the variable span, but it doesn't affect what you see on the screen since you're not changing the properties of the HTML element itself.

A Note on the DOM

It's important that you actually change the properties of the elements when trying to manipulate the Document Object Model (DOM).

For instance, you won't get the desired result if you forget to access the innerText property:

let span = document.querySelector("span");
console.log(span); // <span>delicious</span>
span = "digusting"; // the string "digusting" is stored in the span
console.log(span); // "disgusting"

You'll get the same result as the initial code, which is replacing whatever is in the variable span with the string "disgusting".

The Solution

const span = document.querySelector("span");
span.innerText = "disgusting";
console.log(span); // <span>disgusting</span>

You'll notice that I used const instead of let. You can do this since the HTML element doesn't change, only its properties do. I think it's easier when reading code because you can be assured that the value doesn't change.

If you wanted to solve this in one line you can do it without any variables:

document.querySelector("span").innerText = "disgusting";

I personally like the variable approach. In complex projects, you'd write purposeful variable names so other developers could quickly understand what it is.

I hope this helped, stay tuned for more!