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