1

Estoy empezando a usar javascript en mis proyectos y tengo un problema con los botones para añadir al carrito. Actualmente puedo agregar los productos que quiera, pero deseo que únicamente puedan agregar 1, por lo que pensé en deshabilitar el botón de "Añadir" (cotizar) luego de haberlo apretado.

Primero capturo todos los botones usando getElementsByClassName y luego en mi función de addToCartClicked utilizo un disabled para deshabilitar los botones. El problema que tengo es que úncamente me deshabilita el botón que apreté, no todos los demás. Así como se ve en la foto después del código

const addToShoppingCartButtons = document.querySelectorAll('.addToCart');
addToShoppingCartButtons.forEach(addToCartButton => {
    addToCartButton.addEventListener('click', addToCartClicked);
});

const buttons = document.querySelectorAll('.agregarCarrito');

const vaciarButton1 = document.querySelector('.vaciarButton1');
vaciarButton1.addEventListener('click', vaciarButtonClicked1);
const vaciarButton2 = document.querySelector('.vaciarButton2');
vaciarButton2.addEventListener('click', vaciarButtonClicked2);
const vaciarButton3 = document.querySelector('.vaciarButton3');
vaciarButton3.addEventListener('click', vaciarButtonClicked3);
const vaciarButton4 = document.querySelector('.vaciarButton4');
vaciarButton4.addEventListener('click', vaciarButtonClicked4);
const vaciarButton5 = document.querySelector('.vaciarButton5');
vaciarButton5.addEventListener('click', vaciarButtonClicked5);

const shoppingCartItemContainer = document.querySelector('.shoppingCartItemContainer');

function addToCartClicked(event) {
    const button = event.target;
    const item = button.closest('.cardsita')
    const itemTitle = item.querySelector('.for-checkbox-tools').textContent;
    const itemPrice = item.querySelector('.checkbox-tools').value;
    const titulo_plan = item.querySelector('.titulo_plan').value;
    const prima = item.querySelector('.prima').value;
    const modal_id = item.querySelector('.modal_id').value;

    buttons.forEach(btn => btn.disabled = true);

    addItemToShoppingCart(itemTitle, itemPrice, titulo_plan, prima, modal_id);
}

function addItemToShoppingCart(itemTitle, itemPrice, titulo_plan, prima, modal_id) {
    const shoppingCartRow = document.createElement('div');
    const shoppingCartContent = `
        <div class="row shoppingCartItem">
            <input type="hidden" name="plan" value="${titulo_plan}">
            <input type="hidden" name="equipo" value="${itemTitle}">
            <input type="hidden" name="seguro" value="Plan de protección celular">
            <input type="hidden" name="precio" value="${itemPrice}">
            <input type="hidden" name="prima" value="${prima}">
            <input type="hidden" name="modal_id" value="${modal_id}">
            <table>
                <thead>
                    <tr>
                        <th class="center">Producto</th>
                        <th class="center">Eliminar</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="center shoppingCartItemTitle"${titulo_plan}">${titulo_plan}</td>
                    </tr>
                    <tr>
                        <td class="center shoppingCartItemTitle">Plan de protección celular</td>
                    </tr>
                    <tr>
                        <td class="center shoppingCartItemTitle">${itemTitle}</td>
                        <td class="center shoppingCartItemPrice" style="display: none">${itemPrice}</td>
                        <td class="center"><i class="material-icons red-text buttonDelete" style="cursor: pointer;">close</i></td>
                    </tr>
                    <tr>
                        <td class="center shoppingCartItemTitle">Prima: $ ${prima}</td>
                    </tr>
                </tbody>
            </table>
            <div class="divider"></div>
        </div>
    `;
    shoppingCartRow.innerHTML = shoppingCartContent;
    shoppingCartItemContainer.append(shoppingCartRow);

    shoppingCartRow.querySelector('.buttonDelete').addEventListener('click', removeShoppingCartItem);
    updateShoppingCartTotal()
}

function updateShoppingCartTotal(){
    let total = 0;
    const shoppingCartTotal = document.querySelector('.shoppingCartTotal');
    const shoppingCartItems = document.querySelectorAll('.shoppingCartItem');

    shoppingCartItems.forEach((shoppingCartItem) => {
        const shoppingCartItemPriceElement = shoppingCartItem.querySelector('.shoppingCartItemPrice');
        const shoppingCartItemPrice = Number(shoppingCartItemPriceElement.textContent.replace('$',''));
        total = total + shoppingCartItemPrice;
    });
    shoppingCartTotal.innerHTML = `$${total.toFixed(2)}`;
}

function removeShoppingCartItem(event) {
    const buttonClicked = event.target;
    buttonClicked.closest('.shoppingCartItem').remove();
    updateShoppingCartTotal();
}

function vaciarButtonClicked1() {
    shoppingCartItemContainer.innerHTML = '';
    updateShoppingCartTotal();
}
function vaciarButtonClicked2() {
    shoppingCartItemContainer.innerHTML = '';
    updateShoppingCartTotal();
}
function vaciarButtonClicked3() {
    shoppingCartItemContainer.innerHTML = '';
    updateShoppingCartTotal();
}
function vaciarButtonClicked4() {
    shoppingCartItemContainer.innerHTML = '';
    updateShoppingCartTotal();
}
function vaciarButtonClicked5() {
    shoppingCartItemContainer.innerHTML = '';
    updateShoppingCartTotal();
}

introducir la descripción de la imagen aquí

Alguien podría iluminarme y decirme en qué estoy mal? jaja

De antemano, muchas gracias por la ayuda

2
  • debe de ser por que lo estas declarando como una constante y al hacer eso no puedes cambiar el valor por que como su nombre lo dice es una constante y su valor no puede cambiar, intenta con var o let Commented el 11 mar. 2022 a las 17:00
  • @EdgarVazquez Hola! Acabo de probar con var y let y con ambas hace lo mismo, solamente me deshabilita el botón que presioné, no todos los demás Commented el 11 mar. 2022 a las 17:11

1 respuesta 1

2

Tienes esta línea para declarar la constante globalmente:

const button = document.getElementsByClassName("agregarCarrito"); //Para obtener todos los botones

Pero dentro de la función tienes esto:

// Se crea constante solo disponible dentro de la función
// y no permite acceder a la que declaraste anteriormente
const button = event.target;
/* ... más código ... */
// Se usa la constante interna
button.disabled = true 

Modificas el atributo solo del botón que recibió clic.

Sugerencias:

  • Declara la constante global con nombre en plural: buttons
  • En lugar de getElementsByClassName(), obtén todos los botones con querySelectorAll(), que devuelve una lista de nodos y permite recorrer con forEach(), simplificando un poco el código
  • En lugar de deshabilitar solo el botón que recibió clic, recorre todos los botones y deshabilita uno por uno
// Declarar constante global, obteniendo botones por clase
const buttons = document.querySelectorAll('.agregarCarrito');

Dentro de la función:

const button = event.target;
/* ... más código ... */
// La siguiente línea no funciona, porque no es un elemento simple, sino una lista de nodos
// buttons.disabled = true;
// Se debe recorrer la lista de nodos
buttons.forEach(btn => btn.disabled = true);

Edición

Parece que el problema es por el nombre de clase, que no es agregarCarrito, sino addToCart; al inicio del script tienes esto:

const addToShoppingCartButtons = document.querySelectorAll('.addToCart');

Y después recorres para asignar eventos. Entonces, solo necesitas usar esa misma constante para desactivar todos los botones dentro de la función:

addToShoppingCartButtons.forEach(btn => btn.disabled = true);
5
  • Hola! Gracias por la observación de que tenía otra constante con el mismo nombre, se me pasó por alto eso Acabo de cambiar y lo puse así como muestras tu ejemplo pero ahora no pone ningún botón disabled, alguna idea de qué pueda pasar? Commented el 11 mar. 2022 a las 17:56
  • @RicardoPortillo, por favor edita tu pregunta para actualizar el código, de otra forma no podemos ver el problema.
    – Triby
    Commented el 11 mar. 2022 a las 18:00
  • Gracias, acabo de hacer la edición! Commented el 11 mar. 2022 a las 18:03
  • @RicardoPortillo, revisa la última parte de la respuesta, acabo de modificarla y no necesitas declarar una nueva constante, porque ya tienes todos los botones en addToShoppingCartButtons y es la misma que vas a usar para deshabilitarlos.
    – Triby
    Commented el 11 mar. 2022 a las 18:08
  • Muchas gracias! Ya justo con eso me sirvió, solo agregué la opción también para volver a habilitarlos en caso de que eliminen el que está jaja Gracias de nuevo!! Commented el 11 mar. 2022 a las 18:15

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.