0

Iré al grano, este es mi código :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

    <script src="js/script.js"></script>
</head>
<body>
    <h1>CATÁLOGO</h1>

    <div class = "catalogo">
        <div class="articulo" onclick="anyade(this)" id="a1">
            <img src="images/articulo1.jpg"/>
            <p>Precio: 500€</p>
        </div>

        <div class="articulo" onclick="anyade(this)" id="a2">
            <img src="images/articulo2.jpg"/>
            <p>Precio: 350€</p>
        </div>

        <div class="articulo" onclick="anyade(this)" id="a3">
            <img src="images/articulo3.jpg"/>
            <p>Precio: 300€</p>
        </div>

        <div class="articulo" onclick="anyade(this)" id="a4">
            <img src="images/articulo4.jpg"/>
            <p>Precio: 600€</p>
        </div>
    </div>

    <h1>CARRITO</h1>
    <p> </p> <input type="button" value="vaciar carrito" onclick="vaciarTodo()"/>
    <hr>

    <div class="carrito">

    </div>
    
</body>
</html>

Dentro del div cuya clase es carrito, voy metiendo divs con productos, estos divs con productos tienen un boton asociado que sirve para borrar uno sólo, pues estos productos pueden ser clickados y por tanto añadidos varias veces.

Esto lo realizo así :

function anyade(producto){


   //SACAR DATOS DE CATÁLOGO ----------------------------
   let rutaImagen = producto.getElementsByTagName("img")[0].src;
   let precioSin = producto.getElementsByTagName("p")[0].firstChild.nodeValue; // saca elemento p del div y de ahi obtiene el valor del primer p
   let cadenas = precioSin.split(" "); // divide el texto de p en trozos y lo almacena en un Array
   let precio = cadenas[1].split("€")[0]; // se queda con el segundo elemento que es el precio + € y le quita el € para poder operar con el precio.
   let id = "c"+producto.id;
   precioTotal += parseInt(precio); // gets total price
   //----------------------------------------------------


   let carrito = document.getElementsByClassName("carrito")[0]; // catch the carrito element
   let productosPresentes =carrito.getElementsByTagName("div"); // obtains divs from carrito

   if(productosPresentes != null){
       for (let i = 0; i < productosPresentes.length; i++) {
           let element = productosPresentes[i];

           if(element.id == id){
                yaEsta = true;
                modificarExistente(precio, carrito, id);
                
           }
       }

   }


   if(!yaEsta){

    let div = crearNuevoElemento(rutaImagen, precio, id);
    carrito.appendChild(div); // attach product to shopping cart element

   } 

   yaEsta = false; // reset the comprobation of if you are using the same product or not.
    
   document.body.getElementsByTagName("p")[4].textContent = "Precio total: "+ precioTotal + " euros"; // shows total price


}

A la hora de añadir el producto al carrito, el evento onclick tiene asociado este método :

function crearNuevoElemento(rutaImagen, precio, id){

   let div = document.createElement("div"); // creates a div
   let newImage = document.createElement("img"); // creates an img
   let paragraphPrice = document.createElement("p"); // creates a p for price
   let paragraphUnits = document.createElement("p"); // creates a p for units
   paragraphUnits.textContent = "1 unidad";

   /* BUTTON THAT DELETES ONLY ONE */
   let butBorrarUno = document.createElement("BUTTON"); // creates a button
   let buttonTextoUno = document.createTextNode("Borrar uno"); // creates text for button
   butBorrarUno.appendChild(buttonTextoUno); // adds the text to the button

   butBorrarUno.onclick = function (id){

        div = document.getElementById(id);
        modificarExistente(-500, div, id, -1);

   }

   /* BUTTON THAT DELETES ALL */
   let butBorrarTodos = document.createElement("BUTTON"); // creates a button
   let buttonTextoTodo = document.createTextNode("Borrar todos"); // creates text for button
   butBorrarTodos.appendChild(buttonTextoTodo); // adds the text to the button

   /*butBorrarTodos.onclick = function(this){
        div = this.parentNode;
        modificarExistente(-500, div, div.id, -1); 
   };*/

    newImage.src = rutaImagen;
    div.className = "articulo"; // attach css class to the div node (product)
    paragraphPrice.textContent = precio + '€';
    div.appendChild(newImage); // attach an image to a div, and returns the img node
    div.appendChild(paragraphPrice); // attach price to a div
    div.appendChild(paragraphUnits);

    /* Adding buttons to the div */

    div.appendChild(butBorrarUno);
    div.appendChild(butBorrarTodos);
    div.id = id;

    return div;
}

borrarUno() es donde tengo el problema, pues su .onclick necesita como parámetro el div del cual cambiar los datos de la cantidad de unidades y del precio, pues modificarExistente lo requiere.

Pero claro, creando el botón y asociándole al evento onclick la función anónima, la consola del navegador me dice que el div pasado como parametro y obtenido por su id, es nulo.

He de añadir que necesito realizar esto sin el uso de objetos.

1
  • Si lo intentas borrar y todavía no existe es evidente que lo hay es un problema de lógica o de planteamiento en tu código.
    – A. Cedano
    Commented el 11 oct. 2018 a las 14:59

1 respuesta 1

0

El problema es que le handler del boton no recibe el id como parametro sino el evento click. Puedes obtener el id que necesitas usando event.target.parentNode.id. Quedaria asi:

let precioTotal = 0;
let yaEsta = false;
function anyade(producto){

   //SACAR DATOS DE CATÁLOGO ----------------------------
   let rutaImagen = producto.getElementsByTagName("img")[0].src;
   let precioSin = producto.getElementsByTagName("p")[0].firstChild.nodeValue; // saca elemento p del div y de ahi obtiene el valor del primer p
   let cadenas = precioSin.split(" "); // divide el texto de p en trozos y lo almacena en un Array
   let precio = cadenas[1].split("€")[0]; // se queda con el segundo elemento que es el precio + € y le quita el € para poder operar con el precio.
   let id = "c"+producto.id;
   precioTotal += parseInt(precio); // gets total price
   //----------------------------------------------------

   let carrito = document.getElementsByClassName("carrito")[0]; // catch the carrito element
   let productosPresentes =carrito.getElementsByTagName("div"); // obtains divs from carrito

   if(productosPresentes != null){
       for (let i = 0; i < productosPresentes.length; i++) {
           let element = productosPresentes[i];

           if(element.id == id){
                yaEsta = true;
                modificarExistente(precio, carrito, id);
                
           }
       }

   }

   if(!yaEsta){

    let div = crearNuevoElemento(rutaImagen, precio, id);
    carrito.appendChild(div); // attach product to shopping cart element

   } 

   yaEsta = false; // reset the comprobation of if you are using the same product or not.
    
   document.body.getElementsByTagName("p")[4].textContent = "Precio total: "+ precioTotal + " euros"; // shows total price

}

function crearNuevoElemento(rutaImagen, precio, id){

   let div = document.createElement("div"); // creates a div
   let newImage = document.createElement("img"); // creates an img
   let paragraphPrice = document.createElement("p"); // creates a p for price
   let paragraphUnits = document.createElement("p"); // creates a p for units
   paragraphUnits.textContent = "1 unidad";

   /* BUTTON THAT DELETES ONLY ONE */
   let butBorrarUno = document.createElement("BUTTON"); // creates a button
   let buttonTextoUno = document.createTextNode("Borrar uno"); // creates text for button
   butBorrarUno.appendChild(buttonTextoUno); // adds the text to the button

   butBorrarUno.onclick = function (event){

        div = document.getElementById(event.target.parentNode.id);
        console.log(div.id)
        //modificarExistente(-500, div, id, -1);

   }

   /* BUTTON THAT DELETES ALL */
   let butBorrarTodos = document.createElement("BUTTON"); // creates a button
   let buttonTextoTodo = document.createTextNode("Borrar todos"); // creates text for button
   butBorrarTodos.appendChild(buttonTextoTodo); // adds the text to the button

   /*butBorrarTodos.onclick = function(this){
        div = this.parentNode;
        modificarExistente(-500, div, div.id, -1); 
   };*/

    newImage.src = rutaImagen;
    div.className = "articulo"; // attach css class to the div node (product)
    paragraphPrice.textContent = precio + '€';
    div.appendChild(newImage); // attach an image to a div, and returns the img node
    div.appendChild(paragraphPrice); // attach price to a div
    div.appendChild(paragraphUnits);

    /* Adding buttons to the div */

    div.appendChild(butBorrarUno);
    div.appendChild(butBorrarTodos);
    div.id = id;

    return div;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

    <script src="js/script.js"></script>
</head>
<body>
    <h1>CATÁLOGO</h1>

    <div class = "catalogo">
        <div class="articulo" onclick="anyade(this)" id="a1">
            <img src="images/articulo1.jpg"/>
            <p>Precio: 500€</p>
        </div>

        <div class="articulo" onclick="anyade(this)" id="a2">
            <img src="images/articulo2.jpg"/>
            <p>Precio: 350€</p>
        </div>

        <div class="articulo" onclick="anyade(this)" id="a3">
            <img src="images/articulo3.jpg"/>
            <p>Precio: 300€</p>
        </div>

        <div class="articulo" onclick="anyade(this)" id="a4">
            <img src="images/articulo4.jpg"/>
            <p>Precio: 600€</p>
        </div>
    </div>

    <h1>CARRITO</h1>
    <p> </p> <input type="button" value="vaciar carrito" onclick="vaciarTodo()"/>
    <hr>

    <div class="carrito">

    </div>
    
</body>
</html>
 

1
  • Hola, gracias por tu esfuerzo pero seguía dándome error, he probado a realizar esto mediante el método .setAttribute("onclick","borrarUno"); y ha funcionado. Commented el 11 oct. 2018 a las 15:16

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.