Question

我目前正在开发一个应用程序来计算书籍数量以及将书籍编号从最低到最高。我有一个用户输入框，我试图找出如何在用户输入书号后清除它。我已经尝试过$（'#input'）。val（''）;但是，这不允许我输入两个数字，如“23”。

我的代码：

// global variables
var array = new Array();

$(document).ready(function() {
  // on enter submit values
  $(document).on('keypress', function(e) {
    if (e.which == 13) {
      // grabs user's input
      var $input = $('#input').val();
      // stores in the array and sorts from lowest to highest
      array.push(parseInt($input));
      array.sort(function(a, b) {
        return a - b
      });
      // displays user's inputs
      $('#output').text(array.join(", "));
    }
    // to prevent refresh on enter for forms
    $(function() {
      $("form").submit(function() {
        return false;
      });
    });
    // display values in js console
    console.log(array);
    // counter for number of books
    $('#numOfBooks').text(array.length);
    // clears input field
    // $('#input').prop("selected", false);
  });

  // on click submit values
  $('#btn').on('click', function() {
    // grabs user's input
    var $input = $('#input').val();
    // stores in the array and sorts from lowest to highest
    array.push(parseInt($input));
    array.sort(function(a, b) {
      return a - b
    });
    // displays user's inputs
    $('#output').text(array.join(", "));
    // display values in js console
    console.log(array);
    // counter for number of books
    $('#numOfBooks').text(array.length);
    // clears input field
    // $('#input').prop("selected", false);
  });
  // reset
  $("#resetButton").on("click", function() {
    setTimeout(function() {
      location.reload();
    }, 300);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="header"> Sort Your Books </h1>
<form id="wrapper">
  <span> Enter Book Numbers: </span> <input type="text" id="input" placeholder="Enter a Number...">
  <input type="button" id="btn" value="Enter">
</form>

<div class="flex_NumOfBooks">
  <h2 id="header_NumOfBooks"> Number of Books: </h2>
  <div id="numOfBooks"> </div>
</div>

<div id="wrapper1">
  <h2 id="header-books"> Book Numbers: </h2>
  <div id="output"></div>
</div>

<button id="resetButton"> Reset </button>

Answer 1

请不要使用jq。：）

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>App</title>
</head>

<body>
    <div class="userGetBookID">
        <div class="inputGroup">
            <label>Input book id:</label>
            <input type="text" class="bookID" placeholder="e.g. esbn-123-abfgd">
            <input type="button" class="addBookByID" value="add">
        </div>
    </div>

    <div class="books">
        <div class="listGroup">
            <p class="books__list-header">list:</p>
            <div class="books__list"></div>
        </div>
        <div class="amountGroup">
            <p class="books__amount-header"> amount: </p>
            <p class="books__amount"> 0 </p>
        </div>
        <button class="listReset"> reset </button>
    </div>

    <script>
        const userInput = document.querySelector('.bookID')
        const userList = document.querySelector('.books__list')
        const userSubmit = document.querySelector('.addBookByID')
        const userReset = document.querySelector('.listReset')
        const userListAmount = document.querySelector('.books__amount')



        const getUserInput = () => userInput.value
        const getUserList = () => userList.innerText.split(', ')
        const resetUserInput = () => userInput.value = ""
        const resetUserList = () => userList.innerText = ""
        const addToUserList = (value) => getUserList()[0] == ""
            ? userList.innerText += value
            : userList.innerText += (', ' + value)

        const getUserListLength = () => getUserList()[0] == ""
            ? 0
            : getUserList().length
        const updateUserListAmount = () => userListAmount.innerText = getUserListLength()

        userSubmit.addEventListener('click', (event) => {
            addToUserList(getUserInput())
            resetUserInput()
            updateUserListAmount()
            event.preventDefault()
        })

        userReset.addEventListener('click', (event) => {
            resetUserList()
            updateUserListAmount()
        })

    </script>
</body>

</html>

＆＃13;

输入值后如何清除输入字段？

1 个答案: