Skip to main content
Correcciones en redacción, formato agregado, ruido removido
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

Hola soy nuevo en JavaScript y se me ha hecho un poco complicado el aprenderlo. EstoyEstoy 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 comocó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 Lo intenté con el cloneNode()cloneNode() pero no se me ocurre cómo hacer para que funcionen de manera independiente.

Hola soy nuevo en JavaScript y se me ha hecho un poco complicado el aprenderlo. 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 como 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.

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.

HTML

    <!-- 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>

JAVASCRIPT

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>
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);
}
 

HTML

    <!-- 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>

JAVASCRIPT

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);
}

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>
 

Origen Enlace

¿Cómo hago contadores independientes?

Hola soy nuevo en JavaScript y se me ha hecho un poco complicado el aprenderlo. 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 como 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.

HTML

    <!-- 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>

JAVASCRIPT

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);
}