购物车物品数量的加减操作

241 阅读1分钟
<body>
  <div>
    <input type="text" id="total" value="1" readonly />
    <input type="button" value="+" id="add" />
    <input type="button" value="-" id="reduce" disabled />
  </div>
  <script>
    // 1.获取元素
    let total = document.querySelector('#total')
    let add = document.querySelector('#add')
    let reduce = document.querySelector('#reduce')
    
    // 2.创建(+)单击事件
    add.addEventListener('click', function () {
      // 2.1 声明一个临时变量,获取输入框的数据
      let count = total.value
      // 2.2 数据点击+1
      count++
      // 2.3 将得到+1的数值,重新赋值给输入框
      total.value = count
      //4.2 当数值大于1时,减号(-)恢复使用
      reduce.disabled = false
    })

    // 3.1 创建-单击事件
    reduce.addEventListener('click', function () {
    // 3.1 声明一个临时变量,获取输入框的数据
      let count = total.value
    // 3.2 数据点击-1
      count--
    // 3.3 将得到+1的数值,重新赋值给输入框
      total.value = count
      
      //4. 判断当数值等于1的时候执行
      // 物品数量最小值(默认值)为 1
      if (count == 1) {
      //4.1 减号(-)禁止使用
        reduce.disabled = true
      }
    })

  </script>
</body>