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.