JavaScript JavaScript and the DOM Making Changes to the DOM Getting and Setting Text with textContent and innerHTML

Ed Bundy
Ed Bundy
5,407 Points

button doesn't work to change heading. Not finding difference in code.

const input = document.querySelector('input');
const p = document.querySelector(‘p.description’); const button = document.querySelector(‘button’);

button.addEventListener(‘click’, () => {
    p.textContent = input.value;   
})

<!DOCTYPE html> <html> <head> <title>JavaScript and xxxthe DOM</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 id="myHeading">JavaScript and the DOM</h1> <p>Making a web page interactive</p>
<p class="description">Things that are purple:</p> <input type="text" class="description"> <button class="description">Change list</button> <ul> <li>grapes</li> <li>amethyst</li> <li>lavender</li> <li>plums</li> </ul> <script src="app.js"></script> </body> </html>


PS: I have no idea why some code formats nicely in this post and the rest doesn't. Wouldn't it be cool if there was some kind of website that specialized in videos that taught things, and posted a simple video on how to get code to format well in these questions?


EDIT - ok here is the snapshot link: https://w.trhou.se/el55eohafa

Abubakr Alhaj
Abubakr Alhaj
4,297 Points

Hi

Your code is very difficult to read :( .

I recommend you to check out Markdown course here in Treehouse

The course will help you to know how to format nicely your code and text.

Markdown Course

by the way I used to have your same issue before LOL but after the course everything changed .

Happy Coding

Gabbie Metheny
Gabbie Metheny
33,675 Points

Learning Markdown is definitely worth the effort! There's a great forum post specifically on posting code to the Treehouse forum, and one here on Treehouse-flavored Markdown in general. Nick also has a video on taking a snapshot of your workspace :)

The Markdown Cheatsheet works for most simple code snippets, too!

Ed Bundy
Ed Bundy
5,407 Points

EDIT- problem solved by using mac keyboard for quote marks

1 Answer

Gabbie Metheny
Gabbie Metheny
33,675 Points

It looks like you're using the wrong type of quotes for most of your strings in app.js: you should use either standard straight single '' or double "" quotes, or even backticks ``, but you're using curly quotes ‘’ on every line except the first one. Replace those with straight single quotes, and your code should work!

Ed Bundy
Ed Bundy
5,407 Points

Before posting, i tried replacing all of them with double quotes and it still didn't work (saving both files multiple times, refreshing multiple times, to be sure. i've not had a problem with my double quotes in the past, but it may be because I am using a microsoft bluetooth keyboard this time instead of macbook, or that I am using El Capitan this time. Will try again with the mac keyboard.

Gabbie Metheny
Gabbie Metheny
33,675 Points

Copying and pasting the code you posted, I was able to get it to work by changing only the quotes, so I'm not sure what else the problem might be. Since the code you posted wasn't formatted properly, it's possible there's a problem with line breaks, indentation, etc. that I can't see. I also don't know your file structure, so I'd check to make sure your app.js and style.css are linked correctly.

If you're getting any error messages, can you share those?

Ed Bundy
Ed Bundy
5,407 Points

Yeah, when I switched to the mac keyboard and rekeyed all the quotes it worked. Thanks! Never realized the microsoft keyboard would be a problem

Gabbie Metheny
Gabbie Metheny
33,675 Points

That's so strange, but I'm glad you got it working!