0

este es un script para actualizar la cantidad de un item de carrito de compra pero mi duda radica en el parametro obj me imagino que se refierea un objeto pero que funcion tiene

<script>
    function updateCartItem(obj,id){
        $.get("cartAction.php", {action:"updateCartItem", id:id, qty:obj.value}, function(data){
            if(data == 'ok'){
                location.reload();
            }else{
                alert('Cart update failed, please try again.');
            }
        });
    }
</script>

aqui esta la llamada a la funcion y mi duda aqui es porque en el argumento donde puso obj coloca this a que se refiere

<input type="number" class="form-control text-center" value="<?php echo $item["qty"]; ?>" onchange="updateCartItem(this, '<?php echo $item["rowid"]; ?>')">

1 respuesta 1

1

Es justo como dices, si observas la función que estás llamando desde el elemento:

onchange="updateCartItem(this, '<?php echo $item["rowid"]; ?>')"

Se están pasando dos parámetros, this que sería el elemento actual, y el valor que tendría $item["rowid"].

Ahora bien, estás observando una mala práctica al programar de este modo. En el apartado titulado Separation of structure and behaviour - Separación de estructura y comportamiento, w3.org recomienda que no se usen funciones in-line, como tu onchange, escrito in-line dentro del mismo elemento HTML. Esto hace el contenido HTML dependiente del código Javascript, dificultando el mantenimiento. Imagina una aplicación con cientos o miles de funciones in-line y que esa función debe evolucionar, necesitando manejar otros parámetros. Te quiero ver hurgando entre todos los HTML para encontrar en qué archivos declaraste esa función in-line.

Para evitar eso, se recomienda programar en base a eventos. Y colocar en el elemento aquellos valores que necesites. Para este caso, vamos a usar el atributo id del elemento para poner en él el valor que tendría $item["rowid"], y usaremos ese mismo atributo (el id) para escuchar los cambios de ese input y llamar a la función. Y, si necesitaras pasar más datos aparte del id, puedes recurrir a los atributos data-, o ponerlos en otro elemento.

Verás que ahora la función recibe un parámetro e que sería el evento, y a partir de él puedes obtener cualquier valor que haya en ese elemento al momento de haber cambiado: su id, su value, o cualquier otro dato que ese elemento tuviese y que te pueda ser útil en ese contexto.

Aquí implementamos una escucha por el id del elemento, pero puedes escuchar eventos por otro tipo de selectores: clases, tipo de elemento, etc.

Intenta cambiar el valor del input y verás en consola un objeto mData que sería lo que enviarías al servidor. Los valores de ese objeto se construyen usando e.target que sería el objeto desde el cual se lanzó el evento (sería parecido a this, pero más preciso).

/*Se recomienda verificar siempre la carga del DOM*/
document.addEventListener("DOMContentLoaded", function(e) {

  var elInput = document.getElementById("valorID");
  elInput.addEventListener("change", updateCartItem, false);

  function updateCartItem(e) {
    var mData = {
      action: "updateCartItem",
      id: e.target.id,
      qty: e.target.value
    };
    console.log(mData);
    /*Omito el get para fines de prueba*/
    /*
    $.get("cartAction.php", {
      action: "updateCartItem",
      id: id,
      qty: obj.value
    }, function(data) {
      if (data == 'ok') {
        location.reload();
      } else {
        alert('Cart update failed, please try again.');
      }
    });
    */
  }
});
<input type="number" class="form-control text-center" id="valorID" value="999" />

6
  • Muy buena respuesta, como siempre, orientada a las buenas prácticas. Solo queda el detalle de "e.target que sería el objeto desde el cual se lanzó el evento (sería parecido a this, pero más preciso)", porque el evento lo asignas con función por nombre y, por tanto, this es el contexto que lanzó el evento, es decir, el input. Fuera de eso, debo insistir, es muy buena respuesta.
    – Triby
    Commented el 28 abr. 2021 a las 15:41
  • @Triby, sobre this y e.target, me he basado en las respuestas a esta pregunta.
    – A. Cedano
    Commented el 28 abr. 2021 a las 16:10
  • Ciertamente this puede ser complicado, pero experimentar ayuda a comprender mejor. Dentro de la función haz un console.log(this, e.target); ¿Ves alguna diferencia? De hecho, e.target puede ser más impreciso que this, dependiendo del contexto, algunas veces será mejor el uso de e.currentTarget
    – Triby
    Commented el 28 abr. 2021 a las 16:19
  • @Triby la verdad es que siempre he tenido confusión entre esos conceptos. Si no recuerdo mal, leí en una respuesta del sitio en inglés que era mejor referirse al evento directamente. Debido a esa confusión plantee la pregunta antes referida, pero las respuestas no terminan de aclarar todas mis dudas. ¿Podrías aportar alguna respuesta al respecto (en aquella pregunta)?
    – A. Cedano
    Commented el 28 abr. 2021 a las 16:37
  • Me tomé la libertad de responder esa pregunta para agregar un par de ejemplos que ayudan a ver el comportamiento de this y el evento.
    – Triby
    Commented el 28 abr. 2021 a las 16:41

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.