总结:点击事件源调用函数,弹出输入框存入数据,将数据保存到变量里面在点击添加的时候将数据存入数组,然后合并数组,通过遍历的方式存入到新的变量当中输出。在删除按钮的制作就是
通过输入的数据去比对原数组中书籍存在的位置,返回一个索引,通过delete关键字去删除(delete具体使用方法如下链接),那么删除后原数组这个地方必定存在一个undefined,我们重新定义一个数组遍历一遍有undefined的数组,改写ID为delete的节点就可以正常的删除了
注意:我们存入的数据都保存在了newsstr变量里面,因此每一次增删改查都需要初始化globe变量否则数据将重叠输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
h2 {
/* font-weight: 800; */
padding: 10px;
}
ul {
margin-left: 44px;
}
li {
list-style: inside;
padding: -5px;
}
button {
width: 100px;
outline: none;
height: 20px;
border-radius: 5px;
font-size: 10px;
margin-right: 10px;
background-image: linear-gradient( to left, #235e0704, #06a3ec, #e9f409, #e1a611c0);
}
</style>
</head>
<body>
<!-- <button type="" onclick="var add=prompt('请添加您喜欢的作品!');">点击增添推荐书籍</button> -->
<script>
var add;
var st = [];
var global = [];
var all = [];
var newStr = '';
var n = 0;
document.write('<h2>中国文学经典作品:</h2>');
var str = ['《浮躁》', '《活着》', '《平凡的世界》', '《野草》', '《呐喊》'];
for (var i in str) {
document.write("<ul><li>" + str[i] + "</li></ul>");
// st.push([i]);
}
//输出底部作品集
document.write('<p id="add">您的作品集:' + str + '</p>');
// 增加后的新变量
var str = str.concat(all);
document.write('<p id="deLet">您相对喜欢的作品:' + str + '</p>');
// 定义添加的书籍并动态改变输入后页面书籍
document.write('<button type="" onclick="add(); ">点击添加书籍</button>');
// 加入到相对喜欢的作品集
document.write('<button type="" onclick="deLet();">点击删除书籍</button>');
function add() {
var input = prompt('请添加您喜欢的书籍!');
// 输入为空不输出
if (Number(input) != 0) {
all.push(input);
//合并数组,完成以后去遍历出新的作品集
var newStr = [];
//我们存入的数据保存在了newStr里面
var newStr = str.concat(all);
// global赋值为空就不会出现累加
global = [];
for (var i in newStr) {
global.push(newStr[i]);
}
document.getElementById('add').innerHTML = '<p id="add">您的作品集:' + global + '</p>';
}
}
function deLet() {
var input = prompt('请输入您不喜欢的书籍!');
if (Number(input) != 0 && input !== str) {
// 找到数组在哪儿
var num = str.indexOf(input);
// 根据索引删除,完成以后去遍历出新的作品集
delete str[num];
global = [];
// var newStr = [];
for (var i in str) {
global.push(str[i]);
}
// 去除逗号
document.getElementById('deLet').innerHTML = '<p id="deLet">您相对喜欢的作品:' + global + '</p>';
}
}
</script>
</body>
</html>