Блог

Главная - Вопросы по программированию - Нажмите enter и покажите другой абзац

Нажмите enter и покажите другой абзац

#javascript #html

#javascript #HTML

Вопрос:

Как создать кодировку на 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">

Комментарии:

1. посмотрите на скрипку jsfiddle.net/wyoym85a/1 Вам нравится этот метод

2. почему вы вводите входные данные и вам нужно видеть абзац при нажатии enter? Похоже, что это было бы проблемой удобства использования. Вы также показываете этот абзац при отправке формы?

3. Я создаю простую текстовую игру.. с помощью html, js, css (присвоение) .. Я мало что знаю о javascript, поэтому здесь я

4. @prasad этого достаточно.. но я бы хотел, чтобы он скрывал мой текущий параметр и показывал другой абзац .. Я пытаюсь создать простую текстовую игру.. Я уже получил ответ, спасибо 😉

Ответ №1:

Рабочая скрипка.

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

 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>

Ответ №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>

Комментарии:

1. Будьте осторожны, OP спрашивает, как показать другой абзац p … не как создать динамически абзац и добавить текст внутри него .