CODEWITHSUNDEEP
javascripthtml
Leon de Kraker
Leon de Kraker

Reputation: 13

++ in my function does not add right number

In this code i want to make the 3 div's count up by one when you scroll up and count down when you scroll down. For some reason the first time you scroll it doesnt do it for all the div's, and they don't add up properly. Can someone help?

var Value = 1;

function show() {
    if (Value === null) {
        Value = 1;
    }
    document.getElementById("ValueCenter").innerHTML = Value;
    document.getElementById("ValueCenter").addEventListener('wheel', function (e) {
        if (e.deltaY < 0) {
            add();
        }
        if (e.deltaY > 0) {
            decrease();
        }
    });

}
function showRest() {
    document.getElementById("ValueUpper").innerHTML = Value - 1;
    document.getElementById("ValueDown").innerHTML = Value + 1;
}

function add() {
    document.getElementById("ValueCenter").innerHTML = Value++;
    document.getElementById("ValueUpper").innerHTML = Value++;
    document.getElementById("ValueDown").innerHTML = Value++;
}
function decrease() {
    document.getElementById("ValueCenter").innerHTML = Value--;
    document.getElementById("ValueUpper").innerHTML = Value--;
    document.getElementById("ValueDown").innerHTML = Value--;
}
#ValueUpper, #ValueCenter, #ValueDown{
  font-size: 20pt;
}
<!DOCTYPE html>
<head>
    <title>1</title>
<link rel="stylesheet" type="text/css" href="css/wheel.css">
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/wheel.js"></script>
</head>
<body onload="show(); showRest();">
        <div id="ValueUpper"></div>
        <div id="ValueCenter"></div> 
        <div id="ValueDown"></div>
</body>

Upvotes: 1

Views: 90

Answers (2)

Kapil Tiwari
Kapil Tiwari

Reputation: 334

var Value = 1;

        function show() {
            if (Value === null) {
                Value = 1;
            }
     document.getElementById("ValueCenter").innerHTML = Value;
           document.getElementById("ValueCenter").addEventListener('wheel', function (e) {
                if (e.deltaY < 0) {
                  
                       add();
                }
                if (e.deltaY > 0) {
                    decrease();
                  
                }
            });

        }
        function showRest() {
            document.getElementById("ValueUpper").innerHTML = Value-1;
            document.getElementById("ValueDown").innerHTML = Value+1;
        }

        function add() {
       document.getElementById("ValueCenter").innerHTML = ++Value;
            showRest();
        }
        function decrease() {
       document.getElementById("ValueCenter").innerHTML = --Value;
        showRest()
       }
#ValueUpper{
          font-size: 20pt;
        }

        #ValueCenter{
          font-size: 20pt;
        }

        #ValueDown{
          font-size: 20pt;
        }
<!DOCTYPE html>
    <head>
        <title>1</title>
     
    </head>
    <body onload="show(); showRest();">
            <div id="ValueUpper"></div>
            <div id="ValueCenter"></div> 
            <div id="ValueDown"></div>
    </body>

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386680

You may use prefix notation of the increment operator ++, which increments the value first and then returns that new value instead of using postfix notation (same for the decrement operator --.

document.getElementById("ValueCenter").innerHTML = ++Value;
//                                                 ^^       prefix

Upvotes: 1

Related Questions