Нажмите enter и покажите еще один абзац

Question

Как сделать кодировку javascript, когда я нажимаю «ENTER» тоже вход type="text", он покажет еще один абзац p.

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

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

Answer 1

Working fiddle.

Это будет лучше использовать class скрытый, например, чтобы скрыть/показать свой элемент:

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>

---

Но вы также можете использовать встроенный в стиле display, чтобы показать/hide, проверьте базовый пример ниже.

Надеюсь, это поможет.

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

Вы можете создать динамически пункт и добавить текст внутри него:

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>