JSFiddle - React, Tailwind, and code Playground

by mahny

HTML

<div>数量: <span id="quantity">0</span></div>
<button onclick="add(1)">+</button>
<button id="decButton" onclick="add(-1)" disabled="true">-</button>

JavaScript

let quantity = 0;
let quantityElement = document.getElementById('quantity');
let decButtonElement = document.getElementById('decButton');

function add(q) {
  // 加減処理
  quantity += q;

  // 最低値抑制
  if (quantity < 0) {
  	quantity = 0;
  }
  
  // ボタン制御
	decButtonElement.disabled = quantity < 1;
  
  // 画面更新
  quantityElement.innerHTML = quantity;
}