CODEWITHSUNDEEP
javascriptjquery
EasyCode
EasyCode

Reputation: 13

Whats the issue in reset button of JS counter?

This is the script, it work fine as you can see but this reset functionality have some issue, it turns the value to 0 but when again increase the value it starts from the last stored value, whats the issue?

This is the CSS of the counter application this we help you to run this file.

Ans this is the html file is pretty much good but just in issue with script 

   
    var counter = 0;
    $("#box").text(counter);

    function reset() {
        counter = 0;
        $("#box").text(counter);
    }

    function inc() {
        counter = counter + 1;
        $("#box").text(counter);

    }

    function dec() {
        counter = counter - 1;
        $("#box").text(counter);

    }
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    height: 100vh;
}

.main {
    background: #efefef;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 30px;
}

.main h1 {
    margin-bottom: 50px;
}

#box {
    height: 50px;
    line-height: 50px;
    background: #efefef;
    text-align: center;
    margin-top: 40px;
    box-shadow: 1px 1px 5px #000;
    font-size: 30px;
}

.btn {
    display: flex;
}

.inc,
.dec {
    margin: 10px;
    padding: 10px;
    background: #fcfbfc;
    margin-top: 30px;
    text-transform: uppercase;
    cursor: pointer;
}

.reset {
    background: orange;
    padding: 5px;
    margin-top: 10px;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="counter.css" type="text/css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <title>Counter</title>
</head>

<body>
    <div class="main">
        <h1 style="font-family: sans-serif;">Counter App</h1>

        <div id="box">

        </div>
        <div class="btn">
            <div class="inc" id="inc" onclick="inc();">
                Increase
            </div>
            <div class="dec" id="dec" onclick="dec();">
                Decrease
            </div>
        </div>

        <div class="reset" onclick="reset();">
            RESET
        </div>
    </div>

</body>
</html>

Upvotes: 0

Views: 78

Answers (2)

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

Added reset counter variable to 0 in reset() function.

var counter = 0;
    $("#box").text(counter);

    function reset() {
    counter = 0;
        $("#box").text(0);
    }

    function inc() {
        counter = counter + 1;
        $("#box").text(counter);

    }

    function dec() {
        counter = counter - 1;
        $("#box").text(counter);

    }
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    height: 100vh;
}

.main {
    background: #efefef;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 30px;
}

.main h1 {
    margin-bottom: 50px;
}

#box {
    /* width: 50px; */
    height: 50px;
    line-height: 50px;
    background: #efefef;
    text-align: center;
    margin-top: 40px;
    box-shadow: 1px 1px 5px #000;
    font-size: 30px;
}

.btn {
    display: flex;
}

.inc,
.dec {
    margin: 10px;
    padding: 10px;
    background: #fcfbfc;
    margin-top: 30px;
    text-transform: uppercase;
    cursor: pointer;
}

.reset {
    background: orange;
    padding: 5px;
    margin-top: 10px;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="counter.css" type="text/css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <title>Counter</title>
</head>

<body>
    <div class="main">
        <h1 style="font-family: sans-serif;">Counter App</h1>

        <div id="box">

        </div>
        <div class="btn">
            <div class="inc" id="inc" onclick="inc();">
                Increase
            </div>
            <div class="dec" id="dec" onclick="dec();">
                Decrease
            </div>
        </div>

        <div class="reset" onclick="reset();">
            RESET
        </div>
    </div>

</body>
</html>

Upvotes: 1

EasyCode
EasyCode

Reputation: 13

Now i have write a new script for it. Check it out all!

    var a = 0;
    var displayValue = document.getElementById('box');

    var updateValue = function() {
        displayValue.innerHTML = a;
    };

    var add = function(valueToAdd) {
        a += valueToAdd;
        updateValue();
    };
    var sub = function(valueToAdd) {
        a -= valueToAdd;
        updateValue();
    };

    var reset = function() {
        a = 0;
        updateValue();
    };
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    height: 100vh;
}

.main {
    background: #efefef;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 30px;
}

.main h1 {
    margin-bottom: 50px;
}

#box {
    height: 50px;
    line-height: 50px;
    background: #efefef;
    text-align: center;
    margin-top: 40px;
    box-shadow: 1px 1px 5px #000;
    font-size: 30px;
}

.btn {
    display: flex;
}

.inc,
.dec {
    margin: 10px;
    padding: 10px;
    background: #fcfbfc;
    margin-top: 30px;
    text-transform: uppercase;
    cursor: pointer;
}

.reset {
    background: orange;
    padding: 5px;
    margin-top: 10px;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="counter.css" type="text/css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <title>Counter</title>
</head>

<body>
    <div class="main">
        <h1 style="font-family: sans-serif;">Counter App</h1>

        <div id="box">

        </div>
        <div class="btn">
            <div class="inc" id="inc" onclick="add(1);">
                Increment
            </div>
            <div class="dec" id="dec" onclick="sub(1);">
                Decrement
            </div>
        </div>

        <div class="reset" onclick="reset();">
            RESET
        </div>
    </div>

</body>
</html>

Upvotes: 0

Related Questions