Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Select a Page Element By Its ID

Posted by Sam Allen
Sam Allen
7,176 Points

MyHeading worked ... then added myButton and neither work, even when I comment out myButton-related lines ... HELP!

Neither Visual Studio Code nor Chrome Dev Tools nor about an hour of side-by-side comparison with the tutorial and the workspace have shown me the error in my ways. I suspect there's a simple typo somewhere and would appreciate a second set of eyes.

JavaScript:

/* The command below creates a CONSTant that I've defined as "myHeading" ... then the document.getElementById method is used to reference the ID, "MyHeading", from html. */
const myHeading = document.getElementById('myHeading'); /* document = global variable, representing entire webpage ... getElementById method belongs to document object, getElementById looks through entire document for MyHeading and returns it if it exists. */
/* The command above references myHeading and stores it in the constant, MyHeading. This sets you up for easier manipulation, using the commands below. */

const myButton = document.getElementById('myButton'); /* This sets me up to call addEventListenter on a button that I just created in html. */

/* The command below tells the browser to start listening for mouse events -- keystrokes, clicks, etc. Lots of events. Commenting out the code, though, as I added a button to turn the heading red versus the user possibly clicking on the title -- better UX. :-) */
//myHeading.addEventListener(); <-- This is just the basic structure of the argument, not actual code I wanted to pass.
myHeading.addEventListener('click', () => {
    myHeading.style.color = 'red';
});
/* Above, you've told the browser to LISTEN for clicks to the heading, then MANIPULATING THE EVENT by executing a function to turn the heading red upon click. Tested and it works! */

myButton.addEventListener('click', () => {
    myHeading.style.color = 'red';
});

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the 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>
    <button id="myButton">Make heading red!</button> <!-- Created this so a const in JavaScript would be able to reference it. -- >
  <script src="js/app.js"></script>
  </body>
</html>
Sam Allen
Sam Allen
7,176 Points

I even re-wrote the JavaScript without any comments, hooking HTML up to JS properly, and still get no solution:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the 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>
    <input type="text" id="myTextInput">
    <button id="myButton">Change heading color</button> <!-- Created this so a const in JavaScript would be able to reference it. -- >
  <script src="js/app2.js"></script>
  </body>
</html>

const myHeading = document.getElementById('myHeading');
const myButton = document.getElementById ('myButton');
const myTextInput = document.getElementById('myTextInput');

myButton.addEventListener('click', () => {
    myHeading.style.color = myTextValue.input; 
});

Strange. I have to be missing something simple here. Hopefully a fresh set of eyes can spot the problem. Thanks, if so!

1 Answer

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

Looks like you just have a space in one of your comment flags that is causing the line where you link your JavaScript to be commented out! Here's the offending line:

<button id="myButton">Change heading color</button>    <!-- Created this so a const in JavaScript would be able to reference it. -- >
<!-- space between the two dashes and the closing angle bracket ^ -->
  <script src="js/app2.js"></script>
  <!-- Since your comment isn't properly closed, it comments out the code after it -->

Your button should work once you get rid of that rogue space, but let me know if you're still having problems!

Sam Allen
Sam Allen
7,176 Points

OK. That's scary because VSC didn't catch that at all. It also showed the next line of code as if everything were OK. Eek!

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

I'm using VSC, too, and yes, the code highlighting didn't catch it in mine, either! I only noticed because looking at the source code in Chrome devtools, the <script> tags linking app.js were gone, so I knew there must be a problem around that line in the html.

And Connor was right about you needing .value rather than .input for the next change, but you declare your variable as myTextInput, so it actually needs to be myTextInput.value. You probably just flipped input and value when you were typing. I know Guil is one of the quicker-speaking teachers, don't feel bad about pausing or slowing down the video speed if you're having trouble matching his pace! I pause his videos constantly ?

Sam Allen
Sam Allen
7,176 Points

Oh, I pause everyone's videos constantly. That's why the 40 hours assigned to me by Code Louisville is really more like 80-120 hours. ?

The end will justify the means, however, so I'm trying to stay focused on that!

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

Totally! Keep up the good work, and the pausing ?