Skip to main content
añadida la respuesta de ID 393148 como contenido suplementario
Origen Enlace
Pikoh
  • 17.5k
  • 9
  • 41
  • 56

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]);
                });
            }
        };

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]);
                });
            }
        };
se eliminaron 1065 caracteres en el cuerpo
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

El código de esta página no funciona porque no consigo llamar a los botones desde javascriptJavascript e indentificaridentificar que acción está haciendo cada uno de ellos. Los botones los llamo desde un addEventListeneraddEventListener para obtener su estado, pero a la hora de iniciar el setIntervalsetInterval para cada botón la variable ii siempre es 88, por tanto no puedo saber que botonbotón es el que he pulsado.

quiero que haga lo mismo que el código de abajo pero llamando las funciones desde javascriptJavascript y simplificandolosimplificándolo al maximomá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;
}
   <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>prueba</title>
            <style type="text/css">
    .joystick path:hover {fill:red;}
    .joystick path:active {fill:black;}
            </style>
            <script>
            
              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;
                    
                }
                

            </script>

        </head>
        <body>
        <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>

        </body>
    </html>

El código de esta página no funciona porque no consigo llamar a los botones desde javascript e indentificar 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 boton es el que he pulsado.

quiero que haga lo mismo que el código de abajo pero llamando las funciones desde javascript y simplificandolo al maximo.

   <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>prueba</title>
            <style type="text/css">
    .joystick path:hover {fill:red;}
    .joystick path:active {fill:black;}
            </style>
            <script>
            
              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;
                    
                }
                

            </script>

        </head>
        <body>
        <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>

        </body>
    </html>

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>
Origen Enlace

Arreglar código para que funcione y simplificar

El código de esta página no funciona porque no consigo llamar a los botones desde javascript e indentificar 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 boton es el que he pulsado.

quiero que haga lo mismo que el código de abajo pero llamando las funciones desde javascript y simplificandolo al maximo.

   <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>prueba</title>
            <style type="text/css">
    .joystick path:hover {fill:red;}
    .joystick path:active {fill:black;}
            </style>
            <script>
            
              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;
                    
                }
                

            </script>

        </head>
        <body>
        <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>

        </body>
    </html>