El código de esta página no funciona porque no consigo llamar a los botones desde Javascript e identificar que acción está haciendo cada uno de ellos. Los botones los llamo desde un `addEventListener` para obtener su estado, pero a la hora de iniciar el `setInterval` para cada botón la variable `i` siempre es `8`, por tanto no puedo saber que botón es el que he pulsado. **quiero que haga lo mismo que el código de abajo pero llamando las funciones desde Javascript y simplificándolo al máximo.** <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> let posImg = 0; let posImg2 = 0; let tiempo = 0; let intervalId; function mover(boton) { intervalId = setInterval(function() { mientrasPresione(boton); }, 100); } function parar() { clearInterval(intervalId); } function mientrasPresione(boton) { switch (boton) { case 1: posImg++; break; case 2: posImg--; break; case 3: posImg2++; break; case 4: posImg2--; break; default: document.getElementById('cont1').innerHTML = "no funciona"; break; } tiempo++; document.getElementById('cont1').innerHTML = posImg2 + " " + posImg + " " + tiempo; } <!-- language: lang-css --> .joystick path:hover { fill: red; } .joystick path:active { fill: black; } <!-- language: lang-html --> <div id="cont1"></div> <svg class="joystick" width="30mm" height="30mm" viewBox="0 0 30 30"> <g fill=blue> <path d="m20 10v-5l-5-5-5 5v5z" onmousedown="mover(3)" onmouseup="parar()" onmouseout="parar()"/> <path d="m20 20v5l-5 5-5-5v-5z" onmousedown="mover(4)" onmouseup="parar()" onmouseout="parar()"/> <path d="m10 10h-5l-5 5 5 5h5z" onmousedown="mover(2)" onmouseup="parar()" onmouseout="parar()"/> <path d="m20 10h5l5 5-5 5h-5z" onmousedown="mover(1)" onmouseup="parar()" onmouseout="parar()"/> </g> </svg> <!-- end snippet -->