0

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>
8
  • Te aconsejo usar JavaScript para poner evento en los botones de la misma clase: 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 use var porque acabo de tener problema con ese operador, por lo que cambié a let.
    – DABL03
    Commented el 22 sept. 2021 a las 10:57
  • No entendí el comentario @DanielBriceño pues me fije y en el código que publiqué la función deletebtns( ) hace referencia a la misma clase btn btn-primary y de hecho no sé si ese código que me pasaste es para consumirlo de cual o qué manera o que parte hay que eliminar en el código y sustituirlo por este... es confuso para mi la verdad... si puedes ser más profundo y detallista en tu comentario te lo agradecería Commented el 22 sept. 2021 a las 12:48
  • comienza separando el código php, html, css y javascript en archivos diferentes. tu codigo php no tiene los tag de apertura y cierre.
    – user46896
    Commented el 22 sept. 2021 a las 14:59
  • cual es el contenido de main.js???
    – user46896
    Commented el 22 sept. 2021 a las 14:59
  • main.js es justo el código que he publicado al principio de post, es decir, acá hay dos códigos: el de javascript que es el del archivo main,js por el que me preguntas y el de html que es el archivo index.tml Commented el 22 sept. 2021 a las 15:13

1 respuesta 1

1

He hecho varios cambios a tu codigo JavaScript y conseguí este resultado:

<!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">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">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">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">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">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>
    <div id="container">
        <!--Generado por JavaScript.-->
    </div>
    <script>
          class Producto {
              constructor( id,cantidad,name,precio ){
                  this.id=id;
                  this.cantidad=cantidad;
                  this.name=name;
                  this.precio=precio;
            }
          }
        // Vars global and contans.
        var prods;
        var price = 0;
        var prodNum;
        const id_father="container";
        //Insertamos el evento a todos los botones de la clase btn btn-primary.
        window.onload=function(){
            let btn=document.getElementsByClassName("btn btn-primary");
            for ( let i=0; i<btn.length; i++ ){
                btn[i].onclick=function(){
                   addToCart(prods,i);
                }
             }
             //Iniciamos la variable prods con una lista de la clase Producto();
             prods= arraySet();
          }
        
        /*------------------------------------ FUNCIONES ------------------------------------*/
        function arraySet() {
            const prods = [];
            for (let i = 0; i < 5; i++) {
                prods[i] = new Producto(i,
                                                              0,
                                                              document.getElementById(i).innerHTML,
                                                               parseInt(document.getElementById("p" + i).innerHTML)
                                                              );
            }
            return prods;
        }

        function addToCart(prods, btn) {
            let prod = document.createElement("div");
            let btn_this=document.getElementsByClassName("btn btn-primary")[btn]
            let father=document.getElementById(id_father);
    
            prod.innerHTML = `<h4>${prods[btn].name}</h4>
                                                <h5> ${prods[btn].precio}</h5>`;
            //Le mostramos al usuario que tiene la opcion de quitar el elemento del carrito.
            btn_this.innerHTML="Quitar elemento del carrito.";
            
            father.appendChild(prod);
            
            //Cambiamos la llamada al evento para poder eliminar el elemento del carrito.
            btn_this.onclick=function(){
                deletecOfCart( prod,btn );
            }
        }
        function deletecOfCart( element,btn ){
            let this_btn=document.getElementsByClassName("btn btn-primary")[btn];
            //Eliminamos el elemento de la lista que no se quiere.
            document.getElementById( id_father ).removeChild( element );
            
            this_btn.innerHTML="añadir al carrito.";
            this_btn.onclick=function(){
                 addToCart(prods,btn);
            }
        }
        function confirm() {
            let priceView = document.createElement("div");
            let price = setPrice();
            deletebtns();
            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 (var j of prs) {
                finalp += parseInt(j.innerHTML);
             }
             finalp += (finalp * 0.05);
             return finalp;
        }
    </script>
</body>

</html>

Los cambios que hice:

Hice que cuando se precione el boton de complar se cambie el texto del boton: btn_this.innerHTML="Quitar elemento del carrito.";. Nota: btn_this es el boton actualmente pulsado.

Tambien le cambié la funcion que el boton ya pulsado va a llamar: btn_this.onclick=function(){deletecOfCart( prod,btn );}. La funcion deletecOfCart(element,btn);. Hace lo contrario a la funcion: addToCart(prods,btn);. Lo que hace es: Eliminar el elemento pasado y cambia el texto del boton para retaurarlo, tambien regresa el evento del boton seleccionado a la funcion por defecto:

addToCart:

function addToCart(prods, btn) {
     let prod = document.createElement("div");
     let btn_this=document.getElementsByClassName("btn btn-primary")[btn]
     let father=document.getElementById(id_father);
    
     prod.innerHTML = `<h4>${prods[btn].name}</h4>
                       <h5> ${prods[btn].precio}</h5>`;
     //Le mostramos al usuario que tiene la opcion de quitar el elemento del carrito.
     btn_this.innerHTML="Quitar elemento del carrito.";
     
     father.appendChild(prod);
      
     //Cambiamos la llamada al evento para poder eliminar el elemento del carrito.
    btn_this.onclick=function(){
        deletecOfCart( prod,btn );
    }
}

deletecOfCart:

function deletecOfCart( element,btn ){
    let this_btn=document.getElementsByClassName("btn btn-primary")[btn];
    //Eliminamos el elemento de la lista que no se quiere.
    document.getElementById( id_father ).removeChild( element );
    this_btn.innerHTML="añadir al carrito.";
            
    this_btn.onclick=function(){
        addToCart(prods,btn);
    }
}

Tambien hice cambios extra: La clase le coloque los atributo dentro del constructor:

class Producto {
    constructor( id,cantidad,name,precio ){
        this.id=id;
        this.cantidad=cantidad;
        this.name=name;
        this.precio=precio;
    }
}

Tambien cambie el operador let por var para las variables globales.

Agregé los eventos a los botones de clase btn btn-primary en JavaScript para darle el trabajo al navegador de ponerle los eventos en vez de hacerlo a mano:

window.onload=function(){
    //Obtenemos todos los botones de poner al carrito
    let btn=document.getElementsByClassName("btn btn-primary");
    for ( let i=0; i<btn.length; i++ ){
        //Y les ponemos el evento que queremos:
        btn[i].onclick=function(){
            addToCart(prods,i);
        }
    }
    //Iniciamos la variable prods con una lista de la clase Producto();
    prods= arraySet();
}

A cosecuencia de esta funcion pude eliminar los eventos del codigo HTML y obtener los mismos resultados.
No me acuerdo que mas hice. Si tienes alguna duda no dudes en dejar un comentario.

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.