Как поместить значение ввода в название карты и текст карты

Question

Я новичок в мире сценариев, извините за мой плохой заводской кодЯ пытаюсь сделать так, чтобы значение ввода отображалось в поле "название карты" и "текст карты" моей переменной "карты"

Вот код:

<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">
<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">
<button class="btn btn-success" id="create">Create</button>

<script>
  $(document).ready(function(){
    $("#create").click(function(){   
      let cards = '<div class="card" style="width: 18rem;">' +
        '<div class="card-body">' + 
        '<h5 class="card-title"></h5>' +
        '<p class="card-text"></p>' +
        '<button class="btn btn-primary">Go somewhere</button>' +
        '</div>' +
        '</div>';

      $(document.body).append(cards);
    });
  });  
</script>

Спасибо всем за помощь!

Answer 1

$(document).ready(function(){

$("#create").click(function(){   

let cards = '<div class="card" style="width: 18rem;">' +
            '<div class="card-body">' + 
            '<h5 class="card-title">'+ $('#input1').val() +'</h5>' +
            '<p class="card-text">'+ $('#input2').val() +'</p>' +
            '<button class="btn btn-primary">Go somewhere</button>' +
            '</div>' +
            '</div>';

$(document.body).append(cards);

    });

});  

Answer 2

Попробуйте следующее:

$(document).ready(function() {
  $("#create").click(function() {
    var cardtitle = $('#input1').val();
    var cardtext = $('#input2').val();
    let cards = '<div class="card" style="width: 18rem;">' +
      '<div class="card-body">' +
      '<h5 class="card-title">'+cardtitle+'</h5>' +
      '<p class="card-text">'+cardtext+'</p>' +
      '<button class="btn btn-primary">Go somewhere</button>' +
      '</div>' +
      '</div>';
    $(document.body).append(cards);
  });
});

Демо

$(document).ready(function() {

  $("#create").click(function() {
    var cardtitle = $('#input1').val();
    var cardtext = $('#input2').val();
    let cards = '<div class="card" style="width: 18rem;">' +
      '<div class="card-body">' +
      '<h5 class="card-title">'+cardtitle+'</h5>' +
      '<p class="card-text">'+cardtext+'</p>' +
      '<button class="btn btn-primary">Go somewhere</button>' +
      '</div>' +
      '</div>';

    $(document.body).append(cards);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">


<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">


<button class="btn btn-success" id="create">Create</button>

Answer 3

Вы можете достичь этого следующим образом:

$(document).ready(function() {
    $("#create").click(function() {
        let cards =
            '<div class="card" style="width: 18rem;">' +
            '<div class="card-body">' +
            `<h5 class="card-title">${$('#input1').val()}</h5>` +
            `<p class="card-text">${$('#input2').val()}</p>` +
            '<button class="btn btn-primary">Go somewhere</button>' +
            "</div>" +
            "</div>";

        $(document.body).append(cards);
    })