El código funciona y al hacer click en confirmar compra los productos se agregan al carrito pero cuando se hace click de nuevo en el mismo botón para eliminar el o los productos seleccionados, salta un error por consola que evita que se haga tal acción.
El error por consola es: Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at deletebtns (main.js:64) at confirm (main.js:46) at HTMLButtonElement.onclick
¿Esto ocurre por ser el mismo botón para agregar/eliminar o por otra causa?
No encuentro la solución para que funcione adecuadamente...
class Producto {
constructor() {
}
}
const prods = arraySet();
let price = 0;
let prodNum;
/*------------------------------------ FUNCIONES ------------------------------------*/
function arraySet() {
const prods = [];
for (let i = 0; i < 5; i++) {
prods[i] = new Producto();
prods[i].id = i;
prods[i].cantidad = 0;
prods[i].nombre = document.getElementById(i).innerHTML;
prods[i].precio = parseInt(document.getElementById("p" + i).innerHTML);
}
return prods;
}
function addToCart(prods, btn) {
let prod = document.createElement("div");
prod.innerHTML = `<h4>${prods[btn].nombre}</h4>
<h5> ${prods[btn].precio}</h5>`;
document.body.appendChild(prod);
}
function confirm() {
let price = setPrice();
deletebtns();
let priceView = document.createElement("div");
priceView.innerHTML = `<h5 style="color: rgb(34, 34, 233)">Precio final (envío incluido): </h5>
<h6 style="color: rgb(34, 34, 233)> $${price}</h6>`;
document.body.appendChild(priceView);
}
function deletebtns() {
btns = document.getElementsByClassName("btn btn-primary");
tds = document.getElementsByClassName("tdb");
for (let i = 0; i < prods.length; i++) {
tds.item(i).removeChild(btns.item(0));
}
}
function setPrice() {
let prs = document.getElementsByTagName("h5");
let finalp = 0;
for (const j of prs) {
finalp += parseInt(j.innerHTML);
}
finalp += (finalp * 0.05);
return finalp;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Ejercicio</title>
</head>
<body>
<h1>Indumentaria Urbana</h1>
<hr>
<table class="table">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Precio ($)</th>
<th scope="col">Carrito</th>
</tr>
</thead>
<tbody>
<tr>
<td id="0">Zapatillas Nike</td>
<td id="p0">100</td>
<td class="tdb"><button type="button" class="btn btn-primary" onclick='addToCart(prods, 0)'>Añadir al
carrito</button></td>
</tr>
<tr>
<td id="1">Botines Air Jordan</td>
<td id="p1">250</td>
<td class="tdb"><button type="button" class="btn btn-primary" onclick='addToCart(prods, 1)'>Añadir al
carrito</button></td>
</tr>
<tr>
<td id="2">Zapatillas Urban Light</td>
<td id="p2">25</td>
<td class="tdb"><button type="button" class="btn btn-primary" onclick='addToCart(prods, 2)'>Añadir al
carrito</button></td>
</tr>
<tr>
<td id="3">Zapatillas Addidas</td>
<td id="p3">60</td>
<td class="tdb"><button type="button" class="btn btn-primary" onclick='addToCart(prods, 3)'>Añadir al
carrito</button></td>
</tr>
<tr>
<td id="4">Gorra Stussy</td>
<td id="p4">20</td>
<td class="tdb"><button type="button" class="btn btn-primary" onclick='addToCart(prods, 4)'>Añadir al
carrito</button></td>
</tr>
</tbody>
</table>
<div></div>
<section>
<h3>Carrito</h3>
<button class="btn btn-danger" id="confirm" onclick='confirm()'>Confirmar compra</button>
</section>
<section>
<p>Nombre</p>
<p>Precio ($)</p>
</section>
<hr>
<script src="main.js"></script>
</body>
</html>
window.onload=function(){var btn=document.getElementsByClassName("btn btn-primary"); for ( let i=0; i<btn.length; i++ ){ btn[i].addEventListener("click",function(){addToCart(prods,i);} );} }
. Para que cuando tengas que añadir mas botones no tengas que añadir el evento con el indice correspondiente. Nota: No usevar
porque acabo de tener problema con ese operador, por lo que cambié alet
.