如何将值从一个输入框添加到数组?如果我在输入字段中输入数字,我该如何得到这些数字的总和?

时间:2018-04-24 02:14:01

标签: javascript jquery

如何将输入值从一个输入字段存储到数组中。如果我输入数字,那么如何得到这些数字的总和呢?这是我的代码。 我真的很感谢你们的帮助。

我的css

        <style>
        .item-check {
            display: inline-block;
            position: absolute;
            width: 22px;
            height: 21px;
            cursor: pointer;
          background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-a034ea6672b3%2Fincomplete.png?1495684448133');
        }

        .complete {
            background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-a034ea6672b3%2Fcomplete.png?1495684439106');
        }

        .item-text {
            margin-left: 2em;
            width: 22px;
            height: 21px;
        }

        .item-remove {
          float: right;
            cursor: pointer;
          width:20px;
          height:20px;
          background-size:cover;
          background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-`a034ea6672b3%2Fremove.png?1495684443965');`
        }
        </style>

我的HTML

   <html>
      <head>
        <meta charset="UTF-8">
        <title>My To-do List</title>
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <link rel="stylesheet" href="/style.css" type="text/css">
      </head>  
  <body>
    <div class="container">
      <header>
        <h1>My To-do List</h1>
      </header>

      <!--   Key Section of App    -->
      <form class="list-content">

        <label>
          <input type="text" class="item-input">
        </label>
        <h4 id="message"></h4>
        <ul class="shopping-list">
          <!-- <li>Sample Item</li> -->
        </ul>

        <button class="add-item">Add    Item</button>
      </form>
      <!--   Key Section of App    -->

    </div>
   </body>
  </html>

我的Javascript代码

//第1步  //当有人点击&#34;添加项目&#34;按键  //在购物项目的右上角  // -------------------

   <script>
    $(function() {
      $(".add-item").on('click', function(event) {
          if ($('.item-input').val() == "") {
              alert ('Please enter some text!');
              return false;
          } else {
              var listItem = $(".item-input").val();
              var itemHtml = "<li><span class='item-check'></span><span class='item-text'>" + listItem + "</span><span class='item-remove'></span></li>";
              $(".shopping-list").append(itemHtml);

            //Remove the text the user entered from item-input   
              $('.item-input').val();
              $('.item-input').val('');

            //Count items entered
            var addedItem = $('.item-text').length;
            document.getElementById("message").innerHTML=("You have entered " + addedItem + " items in your list");

              event.preventDefault();
          };    
      });         

    // -------------------

    // This code is executed when someone clicks the "X" button
        $(".shopping-list").on('click', '.item-remove', function(event) {
        $(event.currentTarget).parent().remove();

        });

    // -------------------

    // This code is executed when someone clicks the checkbox in the shopping-item section
        $(".shopping-list").on('click', '.item-check', function(event) {
        $(event.currentTarget).toggleClass('complete');

      });

    });
    </script>

0 个答案:

没有答案