.val返回未定义

Question

尝试制作购物清单应用，只需要它，因此当您在按钮中输入任何文本时，它将返回到购物清单中，但此刻它返回“未定义”

我制作了const listItem，并使用列表中的选择器将其设置为.val。但是当我用$ {listItem}调用它时，它似乎不起作用

$(document).ready(function() {
  $('#js-shopping-list-form').on('submit', function(event) {
    const listItem = $('#js-shopping-list-entry').val();

    $('.shopping-list').append(
      `<li>
        <span class="shopping-item">${listItem}</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>`);

    $('#shopping-list-entry').val('');
    event.preventDefault();
  });

  $('.shopping-list').on('click', '.shopping-item-delete', function(event) {
    $(this).closest('li').remove();
  });

  $('.shopping-list').on('click', '.shopping-item-toggle', function(event) {
    $(this).closest('li').find('.shopping-item').toggleClass('shopping-   item__checked');
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Shopping List</h1>
  <form id="js-shopping-list-form">
    <label for="shopping-list-entry">Add an item</label>
    <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
    <button type="submit">Add item</button>
  </form>

我希望它只说出您在“购物清单条目”中输入的内容