2

Estoy intentando hacer un contador, de manera que al presionar al botón de Add Button me permita agregar un contador independiente, sin embargo no entiendo cómo puedo hacer para que este me pueda funcionar de manera independiente, o sea, quiero poder hacer que los dos contadores al darle Increase o Decrease se reduzca o incremente ÚNICAMENTE en ese contador. ¿Cómo podría hacerlo? Lo intenté con el cloneNode() pero no se me ocurre cómo hacer para que funcionen de manera independiente.

valueCounter = 0;
function updateValueCounter() {
    document.getElementById("valueCounter").innerHTML = valueCounter;
}
function increaseCounter() {
    updateValueCounter(++valueCounter);
}
function decreaseCounter() {
    updateValueCounter(--valueCounter);
}
function resetCounter() {
    updateValueCounter(valueCounter = 0);
}
function addCounter() {
    let counter = document.getElementById("counter")
    let cloneCounter = counter.cloneNode(true);
  document.getElementById("counterContainer").appendChild(cloneCounter);
}
function removeCounter() {
    let counter = document.getElementById("counterContainer");
    counter.removeChild(counter.lastChild);
}
<div class="container-fluid text-center principalContainer">

        <!-- Add & Remove -->
        <div class="row">
            <div class="col-12">
                <button type="button" class="btn btn-primary m-2" onclick="addCounter()">
                    Add Counter
                </button>
                <button type="button" class="btn btn-danger m-2" onclick="removeCounter()">
                    Remove Last Counter
                </button>
            </div>
        </div>

        <!-- Counters Container-->
        <div class="d-flex flex-row justify-content-evenly" id="counterContainer">

            <div class="borderedCounter m-3" id="counter">
                <h5 class="card-title">Counter JavaScript - #<span id="numCounter">1</span></h5>
                <div class="container-fluid mt-4">
                    <h1 class="text-success" id="valueCounter">0</h1>
                </div>
                <div class="row mt-4">

                    <div class="col-12 mt-2">
                        <button type="button" class="btn btn-outline-primary" onclick="increaseCounter()">
                            <i class="fa-solid fa-plus"></i> Increase
                        </button>
                        <button type="button" class="btn btn-outline-primary" onclick="resetCounter()">
                            <i class="fa-solid fa-arrows-rotate"></i> Reset
                        </button>
                        <button type="button" class="btn btn-outline-primary" onclick="decreaseCounter()">
                            <i class="fa-solid fa-minus"></i> Decrease
                        </button>
                    </div>

                </div>
            </div>

        </div>

    </div>

1 respuesta 1

3

Yo en lugar de usar eventos onClick en los botones, añadiría eventListeners a cada botón para luego con el event.target, sepas que botón se pulso y modificar el valor de dicho contador.

En el html estaría casi igual, solo que para poder seleccionar los botones les he añadido una clase.

let counters = 1;
const addCounter = document.getElementById("add-counter");
const removeCounter = document.getElementById("remove-counter");

addCounter.addEventListener("click", addNewCounter);
removeCounter.addEventListener("click", removeLastCounter);

generateEventListeners();

function generateEventListeners() {
    const increaseButtons = document.getElementsByClassName("increase-button");
    const resetButtons = document.getElementsByClassName("reset-button");
    const decreaseButtons = document.getElementsByClassName("decrease-button");
    for (let i = 0; i < increaseButtons.length; i++) {
        increaseButtons[i].addEventListener("click", increaseValue);
        resetButtons[i].addEventListener("click", resetValue);
        decreaseButtons[i].addEventListener("click", decreaseValue);
    }
}

function deleteEventListeners(deleteLast) {
    const increaseButtons = document.getElementsByClassName("increase-button");
    const resetButtons = document.getElementsByClassName("reset-button");
    const decreaseButtons = document.getElementsByClassName("decrease-button");
    if (deleteLast) {
        increaseButtons[increaseButtons.length - 1].removeEventListener("click", increaseValue);
        resetButtons[increaseButtons.length - 1].removeEventListener("click", resetValue);
        decreaseButtons[increaseButtons.length - 1].removeEventListener("click", decreaseValue);
    } else {
        for (let i = 0; i < increaseButtons.length; i++) {
            increaseButtons[i].removeEventListener("click", increaseValue);
            resetButtons[i].removeEventListener("click", resetValue);
            decreaseButtons[i].removeEventListener("click", decreaseValue);
        }
    }
}

function increaseValue(e) {
    e.preventDefault();
    const counter = e.target.parentNode.parentNode.parentNode.children[1].firstElementChild;
    console.log(counter, counter.text)
    counter.innerHTML = Number(counter.textContent) + 1;
}

function resetValue(e) {
    e.preventDefault();
    const counter = e.target.parentNode.parentNode.parentNode.children[1].firstElementChild;
    counter.innerHTML = 0;
}

function decreaseValue(e) {
    e.preventDefault();
    const counter = e.target.parentNode.parentNode.parentNode.children[1].firstElementChild;
    counter.innerHTML = Number(counter.textContent) - 1;
}

function addNewCounter() {
    counters++;
    deleteEventListeners(false);
    let counter = document.getElementById("counter");
    let cloneCounter = counter.cloneNode(true);
    cloneCounter.firstElementChild.firstElementChild.textContent = counters;
    document.getElementById("counterContainer").appendChild(cloneCounter);
    generateEventListeners();
}

function removeLastCounter() {
    counters--;
    deleteEventListeners(true);
    let counter = document.getElementById("counterContainer");
    counter.removeChild(counter.lastChild);
}
<div class="row">
    <div class="col-12">
        <button type="button" class="btn btn-primary m-2" id="add-counter">
            Add Counter
        </button>
        <button type="button" class="btn btn-danger m-2" id="remove-counter">
            Remove Last Counter
        </button>
    </div>
</div>

<!-- Counters Container-->
<div class="d-flex flex-row justify-content-evenly" id="counterContainer">

    <div class="borderedCounter m-3" id="counter">
        <h5 class="card-title">Counter JavaScript - #<span id="numCounter">1</span></h5>
        <div class="container-fluid mt-4">
            <h1 class="text-success" id="valueCounter">0</h1>
        </div>
        <div class="row mt-4">

            <div class="col-12 mt-2">
                <button type="button" class="btn btn-outline-primary increase-button">
                    <i class="fa-solid fa-plus"></i> Increase
                </button>
                <button type="button" class="btn btn-outline-primary reset-button">
                    <i class="fa-solid fa-arrows-rotate"></i> Reset
                </button>
                <button type="button" class="btn btn-outline-primary decrease-button">
                    <i class="fa-solid fa-minus"></i> Decrease
                </button>
            </div>

        </div>
    </div>

</div>

Cuando se genera un nuevo contador, los seleccionamos todos y borramos los listeners, luego, despues de crearlo, añadimos los listeners nuevamente, para no andar duplicando. También se podía crear uno solo para el elemento nuevo en la función de crearlo.

Luego, al hacer click en el boton de sumar, restar o reset accedemos al elemento donde está el resultado y obtenemos el valor y sumamos, restamos o ponemos a cero según la acción que se pulsara.

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.