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.
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;
}
.joystick path:hover {
fill: red;
}
.joystick path:active {
fill: black;
}
<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>
Intentaba iniciar los botones de esta forma pero no puedo
window.onload = function () {
const panel = document.querySelectorAll('.joystick path');
for (var i = 0; i < 8; i++) {
var cc= panel[i].addEventListener('mousedown', () => {
intervalId[i] = setInterval(function(){ mientrasPresione(i); }, 100);
});
panel[i].addEventListener('mouseup', () => {
clearInterval(intervalId[i]);
});
}
};
i
utilizandolet
(novar
) vas a obtener el resultado esperado. Más info aquí. Así mismo ¿por que8
? Deberías iterar el arreglopanel
para evitar controlar de mas.function () { mientrasPresione(i); }
no se va a ejecutar hasta que el intervalo "salte", y solo en ese momento se evaluará cuánto valei
. Otra manera de solucionar tu problema es utilizar este código:(function (n) { return function () { mientrasPresione(n); }; })(i)
. De esta forma estarás creando 8 funciones diferentes, cada una con un valor den
.