JSFiddle - React, Tailwind, and code Playground

HTML

<button class="atk_btn">Attack</button>
<label><input type="checkbox" class="rapid_fire"><span>Rapid Fire</span></label>


<div class="atks_made">Attacks made: <span class="count">0</span></div>

CSS

* {
  font-family: "Arial", sans-serif;
  color: #555;
}
.atk_btn {
  background: #ff0000;
  color: #fff;
  border: none;
  padding: 10px 30px;
  border-radius: 5px;
}

label {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

label span {
  padding-left: 5px;
}

.atks_made {
  margin-top: 20px;
}

JavaScript

const $atk_btn = document.querySelector(".atk_btn");
const $rapid_fire = document.querySelector(".rapid_fire");
const $counter = document.querySelector(".atks_made > .count");

const ATTACK = 0;
const RAPID_ATTACK = 1;

const attack_types = ["Attack", "Hold Down to Keep Attacking"];
let current_atk_type = 0;
let attack_state = false;

$rapid_fire.addEventListener("change", () => {
	current_atk_type = !current_atk_type ? RAPID_ATTACK: ATTACK;
	$atk_btn.innerText = attack_types[current_atk_type];
});

const attack = () => setTimeout(() => {
		if (!attack_state || current_atk_type === ATTACK) return;
    $counter.innerText = Number($counter.innerText) + 1;
    attack();
}, 500);

$atk_btn.addEventListener("mousedown", () => {
		$counter.innerText = Number($counter.innerText) + 1;
		if (!attack_state) {
      attack_state = true;
      attack();
    }
});

$atk_btn.addEventListener("mouseup", () => {
		attack_state = false;
});