js实现购物车加减操作


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 211px;
            height: 101px;
            
            margin: 200px auto;
            border: 2px solid #939090;
            display: flex;
        }
        input{
            height: 100px;
            outline: none;
            border: none;
            text-align: center;
        
          
        }
        button{
            width: 50px;
            height: 50px;
            outline: none;
            font-size: 30px;
            
            
        }
        .bottom{
            display: flex;
            flex-direction: column;
            border: 1px solid #939090;
        }
    style>
head>
<body>
    <div class="box">
        <input type="text" value="7">
        <div class="bottom">
              <button>+button>
        <button>-button>
        div>
      
    div>
 
    <script>
        //先获取元素
        const input=document.querySelector('input')
 
        const btn=document.querySelectorAll('button')
        //给加号添加事件
       btn[0].addEventListener('click',function() {
       input.value++
       btn[1].disabled=false
 
       })
        //给减号添加事件
       btn[1].addEventListener('click',function() {
        input.value--
        if(input.value<=1){
            btn[1].disabled=true
        }
       })
       
    script>
body>
html>

相关阅读:
求三维坐标绕坐标轴旋转后的坐标值
用指向指针的指针方法对5个字符串排序并输出
ALOS2 PALSAR2 数据ID命名规则
vue实现在线预览office文件
大数据Doris（十二）：扩容缩容
git 更换远程地址的方法
Java八股文
LeetCode75——Day15
【研0自学100天 —— Day 8 函数定义和声明】
solidworks导入stl保持为曲面且可编译的注意项

原文地址：https://blog.csdn.net/m0_56713342/article/details/134489178