Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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

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