Как сделать, чтобы значение ввода отображало каждый ввод при нажатии кнопки, не удаляя предыдущий ввод?

$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").html(getVal);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p></p>
</div>
1
bu246 4 Сен 2016 в 03:02

4 ответа

Лучший ответ

У вас есть два варианта:

  1. Добавьте контент к предыдущему контенту:
$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").html($("p").html() + " " + getVal);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p></p>
</div>
  1. Используйте append вместо html:
$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val();
    $("p").append(getVal);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p></p>
</div>

Использование вами html переопределяет содержание элемента p.

3
Dekel 4 Сен 2016 в 00:06

Используйте append вместо html

$(document).ready(function(){
    $("#btn").click(function(){
        var getVal = $("#inputValue").val();
        $("p").append(getVal); <--- CHANGE HERE
    });
});

добавить html

1
Hugolpz 24 Сен 2020 в 11:30

Вы имели в виду, добавить значение как историю значений?

Если да, то ответ будет append().

$(document).ready(function() {
    $("#btn").click(function() {
        var getVal = $("#inputValue").val();
        $("p").append(getVal);
    });
});

Узнайте больше об этом здесь, http://api.jquery.com/append/.

2
Andrew Li 4 Сен 2016 в 00:09

Рекомендуется добавлять идентификатор в тег p и разделять значения пробелом.

$(document).ready(function(){
  $("#btn").click(function(){
    var getVal = $("#inputValue").val() + " " ;
    $("#showInputValue").append(getVal);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <p id="showInputValue"></p>
</div>
0
MMezlini 24 Сен 2020 в 13:26