按Enter键并显示另一段

Question

如何进行javascript编码，当我也按“ ENTER”输入type="text" ，它将显示另一段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

工作提琴 。

最好使用隐藏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来显示/隐藏元素，请查看下面的基本示例。

希望这可以帮助。

 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>