Making array elements change with JavaScript and buttons

Question

Code:

var pictures = ["url(bildes/unity.png)", "url(bildes/xna.png)", "url(bildes/bge.png)"];
var countthearray = pictures.length;
var i = 0;
function MoveOneUp(){
    i++;
    document.getElementById("slaideris").style.backgroundImage=pictures[i];
    if (i == countthearray-1) {
        i =-1;
    }
}
function MoveOneDown(){
    --i;
    document.getElementById("slaideris").style.backgroundImage=pictures[i];
    if (i<0){
        i=countthearray;
    }
}

I'm trying to change the backgroundImage of a element via buttons, which have JS attached. If I use function MoveOneUp() everything works alright, but function MoveOneDown() seems to have some kind of problem that I don't understand.

Whenever I reach the last item of array, I have to click 2 times and only then it returns the array length value. Can someone explain me please where is the problem and how can I fix it?

With this code, both functions can access invalid positions of the array pictures depending on the sequence of calls. For example, if MoveOneDown sets i = countthearray, then the function MoveOneUp is called, you will access position countthearray + 1 — Hilder Vitor Lima Pereira
– Hilder Vitor Lima Pereira, Commented Dec 6, 2014 at 17:46
What do you mean " only then it returns the array length value" - you are not accessing the array length in those functions. — T J
– T J, Commented Dec 6, 2014 at 17:50

T J · Accepted Answer · 2014-12-06 18:04:12Z

1

Try checking for boundaries before actually using the value to set the background:

var pictures = ["url(bildes/unity.png)", "url(bildes/xna.png)", "url(bildes/bge.png)"],
countthearray = pictures.length,
i = 0,
slider = document.getElementById("slaideris"); // cache the element

function MoveOneUp(){
  if (i == countthearray)
    i = 0;
  slider .style.backgroundImage=pictures[i];
  i++;
}
function MoveOneDown(){
  if (i<0)
    i=countthearray -1;
  slider .style.backgroundImage=pictures[i];
  --i;
}

edited Dec 6, 2014 at 18:04

answered Dec 6, 2014 at 17:56

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

Comments

Niet the Dark Absol · Accepted Answer · 2014-12-06 17:49:26Z

0

Remove the if blocks.

Then define this helper function:

function clamp(i, c) {
    return (i % c + c) % c;
}

You can then access pictures[clamp(i,c)] when needed.

answered Dec 6, 2014 at 17:49

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Collectives™ on Stack Overflow

Making array elements change with JavaScript and buttons

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related