CODEWITHSUNDEEP
javascripthtml
Bruno Monteiro
Bruno Monteiro

Reputation: 712

Increase and decrease value in Pure Javascript

I'm trying to develop a very simple carousel with Pure Javascript and CSS. I'm having trouble with the "next" and "previous" button, since they should communicate the with each other, setting the current position of the carousel.

Here is my current code (or JsFiddle: https://jsfiddle.net/kbumjLw2/1/): 

// Slider

var listRecommendations = document.getElementById('list-recommendations');
listRecommendations.style.left = 0;

// Previous button
document.getElementById("btn-prev").onclick = function() {
  // Making sure this functions will not run if it's the 0px of the slider
  if (parseInt(listRecommendations.style.left) != 0) {
    var currentPosition = parseInt(listRecommendations.style.left) + 100;
    listRecommendations.style.left = currentPosition + 'px';
    console.log(currentPosition);
  };
}

// Next button
var num = 100;
var maxValue = 1000 + 120;
console.log(maxValue);

document.getElementById("btn-next").onclick = function() {
  if (num < maxValue) {
    num += 100;
    listRecommendations.style.left = '-' + num + 'px';
    console.log(num);
  };
}
#list-recomendations{
  position: absolute;
}

.wrap-items .item{
  float: left;
}
<div class="recommendation">
  <div id="slider">
    <div id="list-recommendations" class="wrap-items">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
    </div>
  </div>

  <!-- Slider controls -->			
  <button id="btn-prev" class="btn-slider prev">Previous</button>
  <button id="btn-next" class="btn-slider next" title="Ver mais sugestões">Next</button>
</div>

As you can see on the console, the next button increases "100" at each click, and the previous button decreases "100" at each click. The previous button seems to be working fine, but the next button don't get the updated value, it always increase using the latest value it used.

Expected result:

Next button clicked: 100 > 200 > 300...

Prev button clicked: 200 > 100 > 0...

Next button clicked: 100 > 200 > 300...

Current result:

Next button clicked: 100 > 200 > 300...

Prev button clicked: 200 > 100 > 0...

Next button clicked: 400 > 500 > 600...

Any idea on what may be causing this issue?

Upvotes: 1

Views: 1082

Answers (2)

Rayon
Rayon

Reputation: 36599

There is no use of num as you can play with the current position of the element.

Also note, - will concatenate the - symbol the the value, it will not subtract the value.

Ty this:

var maxValue = 1000 + 120;
var listRecommendations = document.getElementById('list-recommendations');
listRecommendations.style.left = 0;
document.getElementById("btn-prev").onclick = function() {
  var val = parseInt(listRecommendations.style.left);
  if (val != 0) {
    val -= 100;
    listRecommendations.style.left = val + 'px';
    console.log(val);
  };
}
document.getElementById("btn-next").onclick = function() {
  var val = parseInt(listRecommendations.style.left);
  if (val < maxValue) {
    val += 100;
    listRecommendations.style.left = val + 'px';
    console.log(val);
  };
}
#list-recomendations {
  position: absolute;
}
.wrap-items .item {
  float: left;
}
<div class="recommendation">
  <div id="slider">
    <div id="list-recommendations" class="wrap-items">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
    </div>
  </div>

  <!-- Slider controls -->
  <button id="btn-prev" class="btn-slider prev">Previous</button>
  <button id="btn-next" class="btn-slider next" title="Ver mais sugestões">Next</button>
</div>

Fiddle here

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68393

check this updated fiddle

// Previous button
    document.getElementById("btn-prev").onclick = function() {
        // Making sure this functions will not run if it's the 0px of the slider
            var currentPosition = parseInt(listRecommendations.style.left) - 100;
            listRecommendations.style.left = currentPosition + 'px';
            console.log(currentPosition);
    }

    // Next button
    var num = 100;
    var maxValue = 1000 + 120;
    console.log(maxValue);

    document.getElementById("btn-next").onclick = function() {
        if (num < maxValue) {
            var currentPosition = parseInt(listRecommendations.style.left) + 100;
            num = currentPosition;
            listRecommendations.style.left =  num + 'px';
            console.log(num);
        };
    }

you basically need to take the left value each time and do plus (+ next) minus (- prev) on it.

Upvotes: 2

Related Questions