JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div id="bullet"></div>
<br>
<br>
<button id="btn-fast-fire" data-speed="60">빨르게 발사</button>
<button id="btn-slow-fire" data-speed="300">느리게 발사</button>

CSS

div {
  position: fixed;
  width: 10px;
  height: 10px;
  border: 1px solid red;
}

JavaScript

var bullet = document.getElementById('bullet');
var btnFastFire = document.getElementById('btn-fast-fire');
var btnSlowFire = document.getElementById('btn-slow-fire');
var left = 0;

function fire(event) {
	var time = Number(event.target.dataset.speed);
	setInterval(function(){
  	left += 10;
  	bullet.style.left = left + 'px';
  }, time)
}

btnFastFire.addEventListener('click', fire);
btnSlowFire.addEventListener('click', fire);