Add a click event function to a button which creates a new paragraph in box layout when onclicks on it

Question

I've been trying to create this click event the way I described it but what I keep getting is a prompt message instead of a paragraph inside the box layout provided underneath the button.

Answer 1

Add a div for the box. Add an input textarea for the paragraph you will add. And a button to actually add your paragraphs.

const btn = document.getElementById("btn"); 
  const clr = document.getElementById("clr"); 
  const paragraph = document.getElementById("paragraph"); 
  const will_add = document.getElementById("will_add"); 
  var the_paragraph = "";

  btn.addEventListener("click", function() { 

    the_paragraph = the_paragraph + will_add.value; 
    paragraph.innerHTML = the_paragraph; 
  });

  clr.addEventListener("click", function() { 
    will_add.value = "";
    the_paragraph = ""; 
    paragraph.innerHTML = ""; 
  });

.box {
  height: 200px;
  width: 400px;
  border: 1px solid red;
  border-radius: 4px;
}

textarea {
  height: 50px;
  width: 400px;
}

<div class="box">
  <p id="paragraph"></p>
</div>

<textarea id="will_add" type="textarea" placeholder="Add your paragraph here..."></textarea>
<br/>
<button id="btn">Add</button>
<button id="clr">Clear</button>