Использование jQuery для обновления элемента span с входными данными формы, но это не обновление

Question

У меня есть элемент h2, у которого есть стилизованное содержимое (css), у меня также есть элемент span, называемый highlight. Я хочу обновить это с помощью ввода текста при нажатии кнопки отправки.

результат, который я получаю (при нажатии), - исходный текст очищается, затем снова обновляется в промежутке, поэтому он по-прежнему показывает «Джон» Смит ".

//index.html
<span id="highlight">John Smith</span>
<form action="" class="form-inline">
   <input id="name" type="text" placeholder="Enter name" size="35">
   <input type="submit" value="Submit" class="button-btn">
</form>

//app.js 
$(function(){
    let name = $('#name').val();
    $('.button-btn').click(function(){
        $('#highlight').text(name);
    });
});

Это расстраивает, поскольку я думаю, что делаю это правильно, но, очевидно, нет. Заранее спасибо за разрешение.

Answer 1

Причина в том, что вы берете значение элемента ввода при загрузке страницы, и оно пустое. Вы должны взять значение из ввода внутри функции обработчика события щелчка:

$(function(){
  console.log($('#name').val() === ""); //true
  $('.button-btn').click(function(e){
    let name = $('#name').val();
    $('#highlight').text(name);
    e.preventDefault(); // prevented the submission of the form for demo
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="highlight">John Smith</span>
<form action="" class="form-inline">
   <input id="name" type="text" placeholder="Enter name" size="35">
   <input type="submit" value="Submit" class="button-btn">
</form>