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 Jara larapez
Jara larapez
109 Points

myTextInput is not defined

I have declared the const but the console is saying:

VM323:1 Uncaught ReferenceError: myTextInput is not defined
    at <anonymous>:1:1

Here is the code: 

<!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 headline color</button>
    <script src="app.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 = 'red';
                           });

Which is the problem with mytextInput that makes the console say it's not defined?

Thanks!

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

I checked your code, and it's the good code. My console was clean. I don't have idea why told to you "it's not defined".

Ps.: Use the Markdown Cheatsheets

Code

Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

      ```html
      <p>This is code!</p>
      ```
Antonio De Rose
Antonio De Rose
20,885 Points
Antonio De Rose
Antonio De Rose
20,885 Points

@Adam the suggestion, is a good enough suggestion to go into the answer area, so the other people will also would benefit.

3 Answers

kols
kols
27,007 Points
kols
kols
27,007 Points

The code itself is good. The only thing that raised a similar kind of error that I could replicate (I'm testing in Google Chrome) was when I put the app.js file in its own directory (i.e., a folder named js) and didn't update the link to it in the <script> tags in the html file to reflect this change.

So, since we can't see your file structure here, that may be something else to double check. :white_check_mark:

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

It looks like "myTextInput" is only defined in this code. I don't see any reference to it where that kind of error might be generated. Perhaps there's more of the code than is shown here?

To share the complete project, you can use the "snapshot" function in the workspace and provide the link it creates.

Steve Kryworuka
Steve Kryworuka
8,339 Points
Steve Kryworuka
Steve Kryworuka
8,339 Points

I ran into this error. I had previously taken this part of the course but wanted to re-watch and follow along.

I ended up deleting the line in index.html, saving, re-creating, saving again and it worked. There were no typos. Just in case someone else runs into that and can't find any other options.