1

Quiero llamar un método de mi JS y pasar una variable pero me da Uncaught ReferenceError, como puedo arreglar esto.

PHP/HTML

<div class="col-4 col-md-2 topbutton ">                                        
                            <input  name="cart_id" value=" <?php echo$q["product_id"]; ?>"> 
                            <input type="button" class="btn btn-danger eliminar_cart" value="Elimina" id="<?php echo$q["product_id"]; ?>" onclick="eliminar_cart(this)">                                           
                        </div>

js

function eliminar_cart(id) {
    var cart_id = id.id;
    alert(cart_id);}
12
  • Acabo de correr localmente tu código y funciona bien, si quieres lo coloco como respuesta para que revises el 26 sep. 2018 a las 0:59
  • El archivo JS donde esta la funcion function eliminar_cart(id) esta separada del HTML y si agregue el archivo con el <script>, perdona no haber especificado desde el principio el 26 sep. 2018 a las 1:01
  • ok agregastes o haces referencia a ese archivo JS dentro del html? es decir el archivo js lo llamas dentro del html? el 26 sep. 2018 a las 1:04
  • 1
    Aaron si pones la función Javascript después del código HTML te dará error, debes ponerla antes (en el headpreferiblemente), eso indicará que la función ya fue cargada, ya existe en el DOM, cuando quieras usarla.
    – A. Cedano
    el 26 sep. 2018 a las 1:16
  • 1
    Y los valores de php para es campo y el id si lo esta seteando el php? es decir no te esta colocando esos valores o alguno de ellos en nulo? solo te da el error cuando le das click al botón? intentastes hacer un alert apenas entras a la función? el 26 sep. 2018 a las 1:16

2 respuestas 2

2

Dependiendo del valor que se retorne en $q, sólo es necesario colocar tu código js al inicio de tu archivo html (al inicio del body o en el head), esto entre etiquetas <script> o incluyendo el archivo js.

function eliminar_cart(id) {
    var cart_id = id.id;
    alert("msg:" + cart_id);}
<div class="col-4 col-md-2 topbutton ">          <input  name="cart_id" value="valorRetornadoen$q"> 
 <input type="button" class="btn btn-danger eliminar_cart" value="Elimina" id="idRetornadoen$q" onclick="eliminar_cart(this);">                                           
                        </div>

2

Hay dos prácticas recomendadas que estás olvidando:

  1. El código JS debe estar siempre dentro de un bloque DOMContentLoaded, de modo que no se intente nunca usar elementos del DOM antes de que éste esté totalmente cargado.
  2. Conviene que nuestro código HTML sea lo más independiente posible. Por eso, evita poner funciones dentro de los elementos HTML. En el ejemplo he quitado la función que estaba dentro del botón, cambiándola por un listener en JS. Esto nos dará además la ventaja de this directamente.

Dejo el código, como una posibilidad de resolver el problema aplicando buenas prácticas.

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var btn1 = document.getElementById("btn1");
    btn1.addEventListener("click", function(e) {
        alert(this.id);
    }, false);
  });
</script>

<div class="col-4 col-md-2 topbutton ">
  <input name="cart_id" value="Test...">
  <input type="button" class="btn btn-danger eliminar_cart" value="Elimina" id="btn1">
</div>

2
  • 1
    yo soy estudiante sigo dando mis primeros pasos, por eso suelo preguntar cosas que para algunos son simples, pero el problema del código es que lo que envié fue un fragmento del problema real, la idea del PHP es porque con un foreach me va a dar todos los articulos de la session, ademas no puedo tener un id por que el for los duplicara y no me funciona de esa manera, de esta menara me funciona para enviarla via ajax y termine de hacer lo que necesito. el 26 sep. 2018 a las 1:44
  • @Aaron M Fonseca entiendo, pero en el for puedes tener un contador que se incremente en cada interacción y usarlo para el ID, de ese modo no te los duplicará, algo así: id="btn$i", suponiendo que $i es el valor que se incrementa en 1 a cada paso del for
    – A. Cedano
    el 26 sep. 2018 a las 6:24

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.