Javascript navigation with array

Question

I'm trying to make a navigation that chagnes the background of a div using the array data.

It isn't working like I would want it.

I'm trying to use if inside addEventListener with 'click' function.

  
var designNextBg = document.getElementById('js-nextbg');
var designBg = document.getElementById('js-designBg');
var designBgArray = [
  'url(images/ipb.png)',
  'url(images/ipg.png)',
  'url(images/ipr.png)',
  'url(images/ipw.png)',
  'url(images/ipy.png)'
];
var positionBg = document.getElementById('js-positionBg');
var i = 0;

designNextBg.addEventListener('click', function(e) {
  if (i = 0) {
    designBg.style.backgroundImage = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else if (i = 4) {
    designBg.style.backgroundImage = designBgArray[i];
    i = 0;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else {
    designBg.style.backgroundImage = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  };
});

<div id="js-designBg" class="design-bg">
  <div class="design-navigation">
    <span id="js-positionBg">01/05</span>
    <p>
      <a id="js-prevbg" class="angle-buttons"><i class="fa fa-angle-left"></i></a>
      <a id="js-nextbg" class="angle-buttons"><i class="fa fa-angle-right"></i></a>
    </p>
  </div>
</div>

With this code when i press the prev button it changes to 04/05 and images/ipy.png. After this when i press the 'next' button the bg doesn't change and the span goes to 01/05 — Moirex Cax
– Moirex Cax, Commented Jan 7, 2018 at 10:29
if (i = 0) should probably be if (i === 0), and else if (i = 4) should probably be else if (i === 4). Might be that will fix your problem. === is a comparison operator whereas = is an assignment operator. — JJWesterkamp
– JJWesterkamp, Commented Jan 7, 2018 at 10:34
@MoirexCax Please edit the desired behavior from your comment into the Question itself. From Review — LW001
– LW001, Commented Jan 7, 2018 at 10:43

Thomas · Accepted Answer · 2018-01-07 11:26:29Z

2

your code is way to complicated. I've added two ways to deal with i and keep it inside the bounds. For once, you can do this in the click-handler (currently commented out), or you can just continuously increment/decrement there and compute the actual index inside the array with a oneliner.

var designBg = document.getElementById('js-designBg');
var designBgArray = [
  'url(images/ipb.png)',
  'url(images/ipg.png)',
  'url(images/ipr.png)',
  'url(images/ipw.png)',
  'url(images/ipy.png)'
];
var positionBg = document.getElementById('js-positionBg');
var i = 0;

var nextButton = document.getElementById('js-nextbg');
var prevButton = document.getElementById('js-prevbg');

nextButton.addEventListener('click', function(e) {
  //if(++i === designBgArray.length) i=0;
  ++i;
  updateView();
});

prevButton.addEventListener('click', function(e) {
  //if(--i < 0) i += designBgArray.length;
  --i;
  updateView();
});


function lz(nr){//a simple leading zero function
  return String(nr).padStart(2, 0);
}

funciton updateView(){
  var len = designBgArray.length;
  //get i back into the boundaries
  //you could also take care of that in the click-handler
  //but this way, it's all in one place
  var index = i%len + (i<0? len: 0);
  
  designBg.style.backgroundImage = designBgArray[index];
  positionBg.textContent = lz(index+1) + "/" + lz(len);
}

<div id="js-designBg" class="design-bg">
  <div class="design-navigation">
    <span id="js-positionBg">01/05</span>
    <p>
      <a id="js-prevbg" class="angle-buttons"><i class="fa fa-angle-left"></i></a>
      <a id="js-nextbg" class="angle-buttons"><i class="fa fa-angle-right"></i></a>
    </p>
  </div>
</div>

edited Jan 7, 2018 at 11:26

answered Jan 7, 2018 at 10:54

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Over a year ago

@MoirexCax, you mean the displayed index, just updated that. It's this line: positionBg.textContent = lz(index+1) + "/" + lz(len);

Monisha Jayabarath · Accepted Answer · 2018-01-07 11:31:42Z

This code works for 'NEXT' button with changing background colours replace backgroundImage as per requirement

  
var designNextBg = document.getElementById('js-nextbg');
var designBg = document.getElementById('js-designBg');
   var designBgArray = [
  'red',
  'green',
  'blue',
  'yellow',
  'cyan'
];    var positionBg = document.getElementById('js-positionBg');
var i = 0;

designNextBg.addEventListener('click', function(e) {
  if (i == 0) {
    designBg.style.background = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else if (i == 4) {
    designBg.style.background = designBgArray[i];
    i = 0;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else {
    designBg.style.background = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  };
});

<div id="js-designBg" class="design-bg">
  <div class="design-navigation">
    <span id="js-positionBg">01/05</span>
    <p>
    
      <input type ='button' value ='NEXT' id="js-nextbg" class="angle-buttons">
    </p>
  </div>
</div>

Vignesh Raja · Accepted Answer · 2018-01-07 10:51:19Z

designNextBg.addEventListener('click', function(e) {
  if (i = 0) {
    designBg.style.backgroundImage = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else if (i = 4) {
    designBg.style.backgroundImage = designBgArray[i];
    i = 0;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else {
    designBg.style.backgroundImage = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  };
});

Here, inside if you must give == or === for comparison. = means assignment operator which always returns true. So i=0 returns true and always the first condition gets passed. So it returns 1. So it changes the span to 01/05.

Paul T. Rawkeen · Accepted Answer · 2018-01-07 11:38:31Z

Taking into account your code and answer posted by Thomas I would provide a working example instead of blank screen and nonexistent background.

Introduced minor code improvements for easier reading, service logic isolation and less letters.

/**
 * List of random images
 * @type {Array}
 */
var designBgArray = [
  'https://picsum.photos/200/300',
  'https://picsum.photos/201/300',
  'https://picsum.photos/202/300',
  'https://picsum.photos/203/300',
  'https://picsum.photos/204/300'
];

var getEl = function(id) {
    return document.getElementById(id);
  },
  addClick = function(el, fn) {
    el.addEventListener('click', fn);
  },
  lz = function(nr) {
    return String(nr).padStart(2, 0);
  };

var designBg = getEl('js-designBg'),
  positionBg = getEl('js-positionBg'),
  nextButton = getEl('js-nextbg'),
  prevButton = getEl('js-prevbg');

var render = function() {
  var len = designBgArray.length,
    index = i % len + (i < 0 ? len : 0);

  console.log('Rendering "i"', i);

  designBg.style.backgroundImage = 'url('+designBgArray[index]+')';
  positionBg.textContent = lz(index+1) + "/" + lz(len);
};

var i = 0;

render(); // Initial background set (if blank bg is not applicable)

addClick(nextButton, function(e) {
  i++;

  if (i === designBgArray.length + 1) {
    i = 0;
  }

  render();
});

addClick(prevButton, function(e) {
  i--;

  if (i < 1) {
    i = designBgArray.length;
  }

  render();
});

.angle-buttons, #js-positionBg {
  background-color: white;
}

<div id="js-designBg" class="design-bg">
  <div class="design-navigation">
    <span id="js-positionBg">01/05</span>
    <p>
      <a id="js-prevbg" class="angle-buttons">&lt;</a>
      <a id="js-nextbg" class="angle-buttons">&gt;</a>
    </p>
  </div>
</div>

Works great. With lz(index+1) the span is displaying correctly.

Collectives™ on Stack Overflow

Javascript navigation with array

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related