一个按钮实现两个事件
function clickFn(){
//获取编辑按钮的文本
var text = document.querySelector('#btn1').innerText;
if(text == '编辑'){
document.querySelector('.dsn').style.display ='flex';
document.querySelector('#num').style.display ='none';
//修改编辑按钮的文本
document.querySelector('#count').innerText ='删除';
document.querySelector('#btn1').innerText ='完成';
}else{
document.querySelector('.dsn').style.display ='none';
document.querySelector('#num').style.display ='flex';
document.querySelector('#count').innerText ='结算';
document.querySelector('#btn1').innerText ='编辑';
}
}
点击加号、减号实现数量的改变
function jia(){
var _span = document.querySelector('.span1');
_spanNum = Number(_span.innerText);
_spanNum ++;
_span.innerText =_spanNum ;
}
function jian(){
var _span = document.querySelector('.span1');
_spanNum = Number(_span.innerText);
if(_spanNum === 1){
_span.innerText = 1;
}else{
_spanNum --;
_span.innerText =_spanNum ;
}
}
实际运用至购物车
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
display: flex;
width: 300px;
justify-content: space-around;
margin-top: 100px;
}
.dsn {
display: none;
}
span{
margin: 0 20px;
}
button{
background-color: rgb(192, 206, 33);
border: none;
border-radius: 10px;
}
.dsn {
display: none;
}
</style>
</head>
<body>
<button id="btn1" onclick="clickFn()">编辑</button>
<div>
<span id="num">x1</span>
<div id="num2" class="dsn">
<button onclick="jia()">+</button>
<span class="span1">1</span>
<button onclick="jian()">-</button>
</div>
</div>
<button id="count">结算</button>
<script>
function clickFn(){
//获取编辑按钮的文本
var text = document.querySelector('#btn1').innerText;
if(text == '编辑'){
document.querySelector('.dsn').style.display ='flex';
document.querySelector('#num').style.display ='none';
//修改按钮文本
document.querySelector('#count').innerText ='删除';
document.querySelector('#btn1').innerText ='完成';
}else{
document.querySelector('.dsn').style.display ='none';
document.querySelector('#num').style.display ='flex';
document.querySelector('#count').innerText ='结算';
document.querySelector('#btn1').innerText ='编辑';
}
}
//点击加号减号实现数量的改变
function jia(){
var _span = document.querySelector('.span1');
_spanNum = Number(_span.innerText);
_spanNum ++;
_span.innerText =_spanNum ;
}
function jian(){
var _span = document.querySelector('.span1');
_spanNum = Number(_span.innerText);
if(_spanNum === 1){
_span.innerText = 1;
}else{
_spanNum --;
_span.innerText =_spanNum ;
}
}
</script>
</body>
</html>
