Блог

Я хочу сделать это, введя свое имя во вводе, затем нажав кнопку, и под вводом появится тег h1: Привет (мое имя)! Я не знаю, как это решить.

Вот мой html-код и код jQuery:

 <form>
    <label for="Name">Name</label>
    <input type="text" id="Name">
    <button id="button" type="button">Click</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('#button').click(function () {
        $('body').append('<h1></h1>')
        $("h1").append('Hello')//  my name
    })
</script>
 

Вам нужно получить значение из #Name входных данных. Если у вас нет конкретной причины для выполнения этого в несколько этапов, вы можете добавить html в целом следующим образом:

 <form>
  <label for="Name">Name</label>
  <input type="text" id="Name">
  <button id="button" type="button">Click</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $('#button').click(function () {
    if ($('#Name').val()) { //make sure the user entered something
      $('body').append(`<h1>Hello ${$('#Name').val()}!</h1>`);
    }
  });
</script> 

Обратные ссылки ` являются шаблонным литералом, они позволяют создавать строки без связывания.

`Hello ${my_name}!` против 'Hello ' my_name '!'

Чтобы получить значение input поля, вы можете использовать: $('input#Name').val(); Вместо добавления его к h1 элементу, вы можете просто установить его текст в нужное значение, в вашем случае: .text('hello ' getName) .

В случае, если посетитель допустит ошибку, вам нужно всего лишь изменить внутренний текст h1 , вместо того чтобы снова добавлять его в текст. $('h1').text();

 $('#button').click(function () {
  let getName = $('input#Name').val();
  if(!$('h1').length){
    $('body').append('<h1 class="greeting-title"></h1>');
  }
  $("h1").text('Hello ' getName)//  my name
}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <label for="Name">Name</label>
    <input type="text" id="Name">
    <button id="button" type="button">Click</button>
</form>