Creating paragraphs based on user input

Question

I'm having trouble, grabbing the user input, and having the onclick operator create additional paragraphs with each click.

Here is my HTML code.

    <!DOCTYPE html>

    <html lang='en'>
    <head>
    <title>Add Paragraph </title>
    <meta charset='utf-8' >
    <script src="../js/addPara.js" type="text/javascript"></script>
    </head>  
    <body>
    <div>
    <input type='text' id='userParagraph' size='20'>
    </div>

    <div id="par">

    <button id='heading'> Add your paragraph</button> 
    </div>
    </body>
    </html>

Here is Javascript code: 

window.onload = function() {
  document.getElementById("addheading").onclick = pCreate;
};

    function pCreate() {
      var userPar= document.createElement("p");
      var parNew = document.getElementById('userParagraph').value;
      userPar.innerHTML = par;
      var area = document.getElementById("par");
      area.appendChild(userPar);
}

Delan Azabani · Accepted Answer · 2011-08-02 23:42:34Z

1

userPar.innerHTML = par;

should be

userPar.innerHTML = parNew;

answered Aug 2, 2011 at 23:42

Delan Azabani

81.8k30 gold badges174 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shi Over a year ago

There are more issues, for example document.getElementById("addheading").onclick should refer to heading.

RobG · Accepted Answer · 2011-08-03 00:48:06Z

In your code:

> window.onload = function() {  
>   document.getElementById("addheading").onclick = pCreate;
> };

Where it is possible (perhaps likely) that an element doesn't exist, best to check before calling methods:

    var addButton = document.getElementById("addheading");

    if (addButton) {
      addButton.onclick = pCreate;
    }

Also, there is no element with id "addheading", there is a button with id "heading" though.

> function pCreate() {
>   var userPar= document.createElement("p"); 
>   var parNew = document.getElementById('userParagraph').value;  
>   userPar.innerHTML = par;

I think you mean:

    userPar.innerHTML = parNew;

if you don't want users inserting random HTML into your page (perhaps you do), you can treat the input as text:

    userPar.appendChild(document.createTextNode(parNew));

.

>   var area = document.getElementById("par"); 
>   area.appendChild(userPar);
> }

Your variable names and element ids don't make a lot of sense, you might wish to name them after the data or function they represent.

i dont know who i am · Accepted Answer · 2020-05-16 21:44:23Z

0

I did it and it worked.


   <html lang='en'>
   <head>
   <title>Add Paragraph </title>
   <meta charset='utf-8' >
   <script>
    window.onload = function() {
  document.getElementById("heading").onclick = pCreate;
}

    function pCreate() {
      var userPar= document.createElement("p");
      var parNew = document.getElementById('userParagraph').value;
      userPar.innerHTML = parNew;
      var area = document.getElementById("par");
      area.appendChild(userPar);
}
   </script>
   </head>
   <body>
   <div>
   <input type='text' id='userParagraph' size='20'>
   </div>

   <div id="par">

   <button id='heading'> Add your paragraph</button>
   </div>
   </body>
   </html>```

answered May 16, 2020 at 21:44

i dont know who i am

1

1 Comment

radovix Over a year ago

Please, add brief explanation of what you did there. The goal here is to make people learn something new and not just copy paste your code.

Collectives™ on Stack Overflow

Creating paragraphs based on user input

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related