learn-co-curriculum / js-strings-and-numbers-readme

Modifying The DOM

You have now successfully grabbed elements from the DOM. Congrats! That's a big deal, and the first step to something great. The next step is a bit more fun. Let's modify the DOM. Through DOM modification we will learn a bit about the difference between Strings and Numbers as well as learn some more on variables. Let's get started!

<iframe height='265' scrolling='no' title='OpwrqM' src='//codepen.io/joemburgess/embed/OpwrqM/?height=265&theme-id=0&default-tab=html,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen OpwrqM by Joe Burgess (@joemburgess) on CodePen. </iframe>

Take a look at the code above. It's fairly short. We have a header, two "labels", and two pieces of data. One of them is a name: "Joe Burgess" and one is a height in inches "74". Let's start playing with this to see if we can modify the name and height.

Note: If you are having difficulty accessing the code pen displayed above, open a second browser tab and navigate to the code pen (https://codepen.io/joemburgess/pen/OpwrqM) before following along.

Selecting Elements

Let's do a quick review of how to select elements on the screen. First, right click and choose inspect. Then select "Console". Finally, remember to change your console to the CodePen by selecting the drop down that says top and changing it to "CodePen Preview".

OK, now click the element inspector icon () and select "Joe Burgess". How can we use Javascript to select it? The id looks pretty promising. This is an id so we need to begin our selector with the # character. Therefore, the command to select this element is document.querySelector('#name'). Write that into your console, press Enter and you should get the "Joe Burgess" element.

I'll leave the next one up to you. Go through the same process and then come out on the other end with the appropriate document.querySelector() command that retrieves the height.

Now let's write the JS code in the CodePen to save these selectors into a variable. Variables are just like they were in algebra class. They are simply names for any sort of data. You can re-set them to something else as much as you'd like. In this case, click the JS tab of the CodePen and then type:

var nameSelector = document.querySelector('#name')

Great! You just set the variables nameSelector to be document.querySelector('#name'). Now, whenever you are going to use document.querySelector('#name'), you can use nameSelector instead. Muuuuuch easier. Go ahead and make another variable called heightSelector for the selector for the height element.

Changing Elements

We now have two variables: nameSelector and heightSelector that reference our name and height. All of this you've seen before. Unless you are named Joe Burgess and are 74 inches high, I doubt the information presented in the CodePen is correct. Let's make it right!

If you re-open your Console, change the dropdown to CodePen, type in nameSelector and press Enter you'll get the "Joe Burgess" element again. All selectors have an additional feature called innerHTML. Let's find out what our nameSelector's innerHTML is by typing in the console nameSelector.innerHTML. You should immediately see just the name "Joe Burgess". To re-set this name we are going to think back to something we've done before. We can change the value assigned to the nameSelector variable the same way we originally set it: using the =. On the left of the equal sign will be the thing we are changing -- in this case, nameSelector. On the right is what we are changing it to. So nameSelector.innerHTML = "Avi Flombaum". You'll notice the name changes. Congratulations.

Finally, we can modify the height using our heightSelector variable. You probably guessed what we need to do here. In the console type: heightSelector.innerHTML = "70". Thankfully height just changed. Go ahead and modify the items in the JS tab to be your actual name and height.

Why The Quotes?

Those quotes around Avi Flombaum and 70 are really important. This means that those two phrases are a String. The term String comes from the fact that both are a string of characters. The quotes are important because without the quotes Javascript will think the words Avi Flombaum are some sort of Javascript command. There is not a Javascript command called Avi Flombaum so you'll get an error. Let's see what that error would be. Go ahead and open the console back up, switch to the CodePen in the drop down and then type nameSelector.innerHTML = Avi Flombaum. You'll get an error that says Uncaught SyntaxError: Unexpected identifier. This is because Javascript couldn't find anything within itself called Avi Flombaum. We have to tell Javscript, that this is just some letters and to not really worry about it. That's why we go with "Avi Flombaum".

Quotes and Numbers

Let's say you just put some shoes on with a 2-inch heel. You are now 2 inches taller! You can update the height directly by just doing this in the JS tab of the CodePen heightSelector.innerHTML = "72". That will work if your previous height was 70 inches. What if your height was something else? If you wanted this to be dynamic you could just say "increase the current height by two inches". In code this would look something like this:

heightSelector.innerHTML = heightSelector.innerHTML + 2

On the right of the = we grab the current value of the height (heightSelector.innerHTML) and then add 2 to it. If you write that code in the JS tab of the CodePen, you'll get 702. Woah! That's not right. It just appended the 2 to the end of the 70. That's because we did the " around our 70. This makes our 70 a String. When you add something to a String, it just appends. This is useful for most strings. For example, if your name was just "Joe" and you wanted to add a last name you could do "Joe" + " Burgess" and it would return "Joe Burgess". In this case though, we need to tell Javascript to think of the 70 as a number.

We need to have Javascript convert the string "70" into a number. The way to do that is simply to wrap your string value in a new thing called parseInt(). So if we want the number representation of the height, we just do parseInt(heightSelector.innerHTML). To show you the difference, open up your console, select the CodePen from the drop down and then type heightSelector.innerHTML. You'll get "70". Notice the quotes? That means this is a String. If we now type this: parseInt(heightSelector.innerHTML), you'll still get 70 but notice the lack of quotes. This means that it's a number.

So to finalize everything let's modify our addition line in the JS tab of the CodePen to be:

heightSelector.innerHTML = parseInt(heightSelector.innerHTML) + 2

Now that should work how you planned. Go ahead and play around with setting the initial height in the HTML tab to different values. You'll see it is now dynamic. No matter what you put in as the initial setting, we add 2 to it.

View Strings and Numbers on Learn.co and start learning to code for free.

js-strings-and-numbers-readme's Issues

heightSelector defaults to original variable type

I was just wondering. As going through the lessons I noticed that the specific values are referred to using single quotes and other times they are using single quotes. Is there a difference? I do not see anything different when I was playing around with it.

Also, when I declare var heightSelector = "string" and then parse it into an int. I can only perform one operation on it as int. Subsequent operations default it back to a string. This is normal behavior correct?

Setting a variable isn't setting a variable

I type the code into the JS tab just as the instructions say: var nameSelector = document.querySelector('#name') and my error messages displayed in the Console are "Uncaught SyntaxError: Unexpected end of input" and "Uncaught SyntaxError: Invalid or unexpected token"

I copy and paste the code and I get the same error message. I check to see if the Console is pointed to CodePen and it is.

If I type nameSelector, the variable doesn't pull up the correct information.

This was working last night, but I felt I did not completely understand the lesson so I wanted to go over it again, and now I am just confused that I'm doing something incorrectly.

#name text return

For the first example code: document.querySelector('#name')
--if you the desired return is to JUST be: "Joe Burgess"... shouldn't " .innerHTML " be added to the code?

i.e:
document.querySelector('#name').innerHTML

CodePen Preview

Hi. When I click on "top" in Console, I don't have the CodePen Preview as an option. My only two options are CodePen.io/ and CodePen(index.html). Which one of the two should I be using?

Thanks

Strings and Numbers lesson not working properly

When I follow the lab to update the strings and numbers, it doesn't accept an update on the name and number at the same time. I restart and it gives the same issue again.

CodePen unnecessarily confusing students

Many questions revolve around not understanding how to use the CodePen. They are confused at how to find it in the console and the embedded version doesn't work well all the time. Maybe include instructions on viewing it on its own page here: https://codepen.io/joemburgess/pen/OpwrqM

They usually have zero problems once working there.

GitHub pop up interferes with moving around screen

Hi, no big deal, but as I was doing the first lab, the "Sign up for GitHub" message kept popping up. Even after I closed it, as soon as I moved around the screen it would pop up, interfering with navigation.

I finally bit the bullet and linked a GitHub account - maybe this is the intent of the popup, but IMHO once you close it it should not pop up for the rest of the session...

Variabels are not registering to console - screenshots included

We now have two variables: nameSelector and heightSelector that reference our name and height.

This part I have done under Scratch JS tab with dropdown changed to learn.co/tracks/bootcamp...strings-and-numbers' as follows :

var nameSelector = document.querySelector('#name');
var heightSelector = document.querySelector('#height');

When I then return to Console tab and change that drop down to 'Codepen Preview for OpwrqM'
and then type:

nameSelector

An error is displayed and when I type:

var nameSelector

my output is:

undefined

Something must be unable to communicate the necessary information to console, what piece am I missing?

Screenshots below

Console toggles between CodePen (index.html) and top and CodePen Preview

Why teach InnerHTML?

If you read through the MDN about Element.innerHTML, if im reading it correctly it basically says you open your site up to cross-site scripting if you use .innerHTML.

If all your doing is getting the text why would you not teach students to use .textContent or .innerText?

MDN Element.innerHTML
MDN Node.textContent
MDN Node.innerText

Following the Instructions( Need Help)

Im instructed to modify the variables in the JS tab to be my actual name and height. However, when I get to the instructions about adding 2 to my height, I am first instructed to type heightSelector.innerHTML into the console. This is giving me an error. Should I also have changed my HTML tab as well?