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

Greg Schudel
Greg Schudel
4,090 Points
Posted by Greg Schudel
Greg Schudel
4,090 Points

(JS Newb) Trying to make paragraph making button

I'm struggling trying to make my own JS to the point where I'm almost ready to give up. I'm trying to make self-appointed 'test'. All I want to do below is when you click a button, make a paragraph appear below that says something. This is what I have, but I know I'm missing something, I just don't know what!!!!

<!DOCTYPE html>
<html>


<style type="text/css">


    button{
        font-family: 'Open Sans', sans-serif;
        font-size: 1.2rem;

    }


</style>


<body>

<button class="pushMe" type="button">Click Me!</button>

<div class="paragraph">

</div>


<script>


const buttonPush = document.querySelector('button');

const createParagraph = document.createTextNode("This is a paragraph.");




buttonPush.addEventListener ('click', () => {

   let createParagraph = document.createElement('I still learning javascript!'); 

});





</script>


</body>
</html>

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I received your request for assistance :email: The biggest problem I see so far is that you're trying to create an element named "I still learning javascript!". But when we say createElement we mean any valid HTML element such as <button>, <form>, <p>, <div> etc. And you're trying to create a paragraph, but other than the indication in the variable name that you want a paragraph there is nothing else to indicate it should even be a paragraph at all. Also, once you create the element, it doesn't just appear on the page by magic right then. You've created the element, but now you still have to tell it to attach it to the DOM.

Now, there may be more elegant ways to do this, but this is how I did it. I reworked your code a bit so that it works like I think you're wanting. 

<script>

const buttonPush = document.querySelector('button');  // You did this part yourself

buttonPush.addEventListener ('click', () => {  // You also did this part

   let createParagraph = document.createElement('p');  // Create a paragraph and assign it to a variable
   const createText = document.createTextNode("This is a paragraph.");  // create a text node and assign it to a variable

   createParagraph.appendChild(createText);  // append the text node to the paragraph you just created
   document.body.appendChild(createParagraph);  // append the paragraph to the document
});

</script>

Hope this helps! :sparkles:

Greg Schudel
Greg Schudel
4,090 Points
Greg Schudel
Greg Schudel
4,090 Points

Got it, so first you got to create the element, THAN append it!