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>

相关阅读:
java web程序静/动网页项目部署到tomcat上
python程序将pdf转word
[英雄星球七月集训LeetCode解题日报] 第5日双指针
国内镜像源网址
Qt4中学习使用QtCharts绘图六：绘制动态曲线
学习.NET验证模块FluentValidation的基本用法
（Java）中的数据类型和变量
vue3.0 axios封装
编译期间生成代码（Lombok原理）
Mysql之正则函数REGEXP的使用，适合复杂查询条件

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