++ in my function does not add right number
Clash Royale CLAN TAG#URR8PPP
++ 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>
2 Answers
2
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
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>
That makes the code way more organised and easier to edit thanks a lot!
– Leon de Kraker
20 hours ago
hope it will solve your problem @LeondeKraker
– Kapil Tiwari
18 hours ago
This reads like a game of spot-the-difference rather than an answer. What did you change? Why should it solve the problem? Why does your live demo include broken links to CSS and JS that can't be useful? The live demo editor includes a "Tidy" button, you should use it to fix the awful indentation in your code.
– Quentin
18 hours ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
That did fix the issue of the numbers not adding up correctly Thanks!. But i still have the issue when i scroll up or down it changes 2 of the divs to zero.
– Leon de Kraker
21 hours ago