0

Tengo un código simple en html, un button.

<button onclick="data('123456')">btnClick</button>

Si abro el index en Google Chrome o Edge ocurre el siguiente problema:

Al cambiar el parámetro desde el inspector elementos por ejemplo 54321 y al hacer click, me manda por consola el dato modificado y sin modificar, o sea dos datos y no solo el modificado. Es decir tanto 123456 como 54321

Demo:

function data(number) {
  console.log(number)
}
 <button onclick="data('123456')">btnClick</button>

Lo anterior es solo un ejemplo reproducible (mcve), mi intención real es hacer una validación, por ejemplo que el parámetro sea un id encriptado el cual después lo desencripto para luego ver si existe en una base de datos, si está correcto me retornaría un modal y si no está correcto el id desencriptado me retornaría un alert con error. Pero como me está enviado dos datos, el modificado y no modificado, me mandaría tanto el modal como el alert

Este error solo pasa en el navegador Edge y Google Chrome, mas no en Mozilla

6
  • No olvides describir brevemente en el título el problema en cuestión.
    – padaleiana
    Commented el 11 feb. 2023 a las 13:04
  • Hola Carlos, si estoy entendiendo bien, estás editando "en caliente" tu html, y los distintos browsers responden de distinta forma a los cambios, no lo veo como un problema de tu código, sino más bien como limitaciones de las herramientas de depuración de algunos browsers. Commented el 11 feb. 2023 a las 13:33
  • Dices que en chrome y edge se imprime 2 veces el log? A mi no me pasa
    – Pipe
    Commented el 11 feb. 2023 a las 16:43
  • Me atrevo a decir que esta parte de tu lógica no es correcta: "Pero como me está enviado dos datos, el modificado y no modificado, me mandaría tanto el modal como el alert". Si usas ajax o fetch para enviar el id como parámetro, este no estaría "quemado" en el código al crear el DOM y mucho menos tendrías por qué modificarlo en el inspector de código ya que sería una vulnerabilidad. Luego, haces la validación en php y retornas una única respuesta a JavaScript, no hay razón para que se entreguen los dos elementos al DOM.
    – DjCrazy
    Commented el 11 feb. 2023 a las 16:50
  • @Pipe si modificas el parámetro del botón en el inspector de código, se puede observar el comportamiento que indica el OP. Por ejemplo, <button onclick="data('987654')">btnClick</button>, en la consola se imprimen tanto el valor quemado 123456 como el modificado 987654.
    – DjCrazy
    Commented el 11 feb. 2023 a las 16:55

1 respuesta 1

0

Al editar el evento e en el inspector, el navegador agrega otros eventListener al elemento. Es el equivalente a hacer

button.addEventListener("click", a=> data("1234"));
button.addEventListener("click", a=> data("otracosa")); //este lo agrega el navegador cuando lo editas.

¿Tiene sentido?

Para mí no, porque el evento se está editando a través de su propiedad onclick, no a través de addEventListener. Pero que sabe un simple mortal de la magia negra detrás de los navegadores.

Así está el evento cuando se inicia

introducir la descripción de la imagen aquí

Y al hacer un cambio con el inspector:

introducir la descripción de la imagen aquí

Ahora si te fijas en la última imagen hay un botón "quitar", donde puedes remover el evento antiguo para realizar tus pruebas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.