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) Making Changes to the DOM Getting and Setting Text with textContent and innerHTML

Posted by steven swensen
steven swensen
7,926 Points

Why is my JavaScript not changing the 'p.descrtiption'

HTML

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>JavaScript Practice</title>
        <meta charset = 'UTF-8'>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="app.js"></script>
    </head>
    <body>
        <header><h1>JavaScript Practice</h1></header>
        <nav>
        </nav>
        <main>
            <div id="pro1">
                <h1>Latin Translator</h1>
                <!--<button type="button" id = "dexter">Dexter</button>
                <button type="button" id = "medium">Medium</button>-->
                <p class="description">answer</p>
                <input type="text" class="description">
                <button class="description">Sinister</button>
            </div>
            </main>
        <footer><em>Created by Steven Swensen.</em></footer>
    </body>
</html>

JAVASCRIPT

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

button.addEventListener('click', () => {
    p.textContent = input.value + ':';
});

Moderator Edited: Markdown added so the code renders properly in the forums.

4 Answers

Erick Amezcua
Erick Amezcua
21,826 Points
Erick Amezcua
Erick Amezcua
21,826 Points

I tried it on a workspace and I made it work simply by changing the script position.

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>JavaScript Practice</title>
        <meta charset = 'UTF-8'>
        <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>
    <body>
        <header><h1>JavaScript Practice</h1></header>
        <nav>
        </nav>
        <main>
            <div id="pro1">
                <h1>Latin Translator</h1>
                <!--<button type="button" id = "dexter">Dexter</button>
                <button type="button" id = "medium">Medium</button>-->
                <p class="description">answer</p>
                <input type="text" class="description">
                <button class="description">Sinister</button>
            </div>
            </main>
        <footer><em>Created by Steven Swensen.</em></footer>
        <script src="app.js"></script>
    </body>
</html>

Remember, whenever the DOM is edited, the script must be imported to the last one to make sure that the entire DOM has been loaded

steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

oh and thank you for your help. sorry where are my manners.

steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

Yeah why is that? does it just have to be in the body?

Erick Amezcua
Erick Amezcua
21,826 Points
Erick Amezcua
Erick Amezcua
21,826 Points

It is a good practice to put it before the body, but it can really be anywhere, as long as it is before the </ html> tag.

In your first code it does not work because it first loads the script and then loads the page content, then the script does nothing because it loads before any button exists. In any case, if you want to make sure the DOM is fully loaded you can use:

window.onload= function(){
 //Your code here

};

Or with jQuery: 

$('document').ready(function(){
  //Your code here
});
steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

okay cool. I have one more question for you do you know how to section your code? for instance if i had

JavaScript

//Clickable Number Images const one = document.querySelector('input[name="one"]'); const two = document.querySelector('input[name="two"]'); const three = document.querySelector('input[name="three"]'); const four = document.querySelector('input[name="four"]'); const five = document.querySelector('input[name="five"]'); const h2Spelling = document.querySelector('h2.spelling'); one.addEventListener('click', () => { h2Spelling.textContent = 'One'; }); two.addEventListener('click', () => { h2Spelling.textContent = 'Two'; }); three.addEventListener('click', () => { h2Spelling.textContent = 'Three'; }); four.addEventListener('click', () => { h2Spelling.textContent = 'Four'; }); five.addEventListener('click', () => { h2Spelling.textContent = 'Five'; });

and I wanted to be able to collapse and open this like how you can do with a function, how would you go about doing that, so I can read the note and then click to open the section if I wanted to see or change the code. thanks again for all your help.