JavaScript 小测验9
做一个新增商品的功能
已知：有输入框，按钮.
<html>
<style>
.input{
height:50px;
width:250px;
font-size: 10px;
border-color: beige;
}
</style>
<body>
<input class="user-input" name="userinput" type="text" placeholder="请输入名称">
<button onclick="
display();">新增</button>
<div class="wocao">
</div>
</body>
<script>
//创建空数组
let a = [];
//显示新增的商品
function display(){
a.push(`${document.querySelector('.user-input').value}`);
//每次点击按钮后情况b变量
let b=" ";
//遍历循环
for(let i=0;i<a.length;i++){
b += `<p>${a[i]}</p>`;
console.log(i);
console.log(b);
};
//插入HTML
document.querySelector(".wocao").innerHTML=b;
document.querySelector('.user-input').value="";
};
</script>
</html>
添加删除功能
<html>
<style>
.input{
height:50px;
width:250px;
font-size: 10px;
border-color: beige;
}
</style>
<body>
<input class="user-input" name="userinput" type="text" placeholder="请输入名称">
<input class="user-input1" name="userinput1" type="text" placeholder="请输入价格">
<button onclick="
display();">新增</button>
<div class="wocao">
</div>
</body>
<script>
//创建空数组
let a = [];
let c =[];
//显示新增的商品
function display(){
c.push(`${document.querySelector('.user-input1').value}`);
a.push(`${document.querySelector('.user-input').value}`);
//每次点击按钮后情况b变量
let b=" ";
//遍历循环
for(let i=0;i<a.length;i++){
f =`<button onclick="delect(${i});">删除</button>`;
b += `<p>${a[i]} ${c[i]} ${f}</p>`;
console.log(i);
console.log(b);
};
//插入HTML
document.querySelector(".wocao").innerHTML=b;
document.querySelector('.user-input').value="";
};
function delect(value){
a.splice(value,1);
let b=" ";
for(let i=0;i<a.length;i++){
f =`<button oonclick="delect(${i})"></button>`;
b += `<p>${a[i]}</p>`;
console.log(i);
console.log(b);
};
document.querySelector(".wocao").innerHTML=b;
document.querySelector('.user-input').value="";
}
</script>
</html>
