CODEWITHSUNDEEP
javascriptjqueryvariables
John Dong
John Dong

Reputation: 57

Multiply javascript variable

Why do I get 0 when I multiply a variable by 2 and assign the value to another variable? Basically, I'm trying to incrementally show/hide blocks every time I press the button. However, it works when I do count++ * 2.

Please see code below for reference.

var count = 0,
    num = count * 2;

$('.load').on('click', function() {
   $('.blocks').show();
   $('.blocks').slice(num).hide();
    count++;
});

console.log(num); // num is = to 0
.load {
    display: block;
    margin: 40px 0 0 0;
}

.blocks {
    width: 30px;
    height: 30px;
    background: #000;
    display: inline-block;
    margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="load">Load this</button>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>

Upvotes: 0

Views: 1832

Answers (2)

omikes
omikes

Reputation: 8553

make num a simple function instead:

function num() { return count * 2; }

Upvotes: 0

Oli Soproni B.
Oli Soproni B.

Reputation: 2800

// initial variable initialization
var count = 0,
num = count * 2;

$('.load').on('click', function() {
    $('.blocks').show();
    $('.blocks').slice(num).hide();
    // increment the count value
    count++;
    // re assign a new num value
    num = count * 2;
    console.log(num);
    // num is 0,2,4,6
});

console.log(num); // num is = to 0

Upvotes: 1

Related Questions