Press enter and show another paragraph

Question

How to make a javascript coding, when I press "ENTER" too the input type="text" , it will show another paragraph p .

 var btn = document.getElementById("key"); btn.onkeypress = function(e){ if(e.keyCode === 13){ e.preventDefault(); } } 

 <input type="text" id="key" placeholder="south"> 

Answer 1

Working fiddle .

It will be better to use a class hidden for example to hide/show your element :

 var btn = document.getElementById("key"); btn.onkeypress = function(e){ if(e.keyCode === 13){ e.preventDefault(); document.getElementById("my-paragraph").classList.remove("hidden"); } } 

 .hidden{ display: none; } 

 <input type="text" id="key" placeholder="south"> <p id="my-paragraph" class='hidden'>Hidden paragraph</p> 

---

But you could also use inline-style display to show/hide elements, check basic example below.

Hope this helps.

 var btn = document.getElementById("key"); btn.onkeypress = function(e){ if(e.keyCode === 13){ e.preventDefault(); document.getElementById("my-paragraph").style.display='block'; } } 

 <input type="text" id="key" placeholder="south"> <p id="my-paragraph" style='display:none'>Hidden paragraph</p> 

Answer 2

You can create dynamically paragraph and add the text inside it:

 var btn = document.getElementById("key"); var div = document.getElementById("paragraphs"); btn.onkeypress = function(e) { if (e.keyCode === 13) { var newParagraph = document.createElement('p'); newParagraph.textContent = btn.value; div.appendChild(newParagraph); } } 

 <input type="text" id="key" placeholder="south"> <div id="paragraphs"> </div>