Change the class of div based on that value's position in array

Question

If I have an array of numbers split out like this:

var list = ['one', 'two', 'three', 'four, 'five', 'six', 'seven'];

And I have a div with class "four" and a pair of buttons:

<button id="buttonOne"></button>
<div class="four"></div>
<button id="buttonTwo"></button>

How can I make buttonOne reduce the class to "three" and buttonTwo increase it to "five"? I know this is probably kids stuff but any explanation would be very much appreciated.

Does this answer your question? [Javascript: Words to numbers](https://stackoverflow.com/questions/11980087/javascript-words-to-numbers) — evolutionxbox, Aug 04 '21 at 20:29
Please see [ask]. You need to make an effort and show your code. — isherwood, Aug 04 '21 at 21:07

Spectric · Answer 1 · 2021-08-04T20:34:17.257

Get the index of the element's className in the array, add/subtract 1, then get the item at the index of the result:

var list = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];

const div = document.querySelector('div');
buttonOne.addEventListener('click', function(){
  var newClass = list[list.indexOf(div.className)-1]
  div.className = newClass;
  console.log(newClass);
})
buttonTwo.addEventListener('click', function(){
  var newClass = list[list.indexOf(div.className)+1]
  div.className = newClass;
  console.log(newClass);
})

<button id="buttonOne">reduce</button>
<div class="four"></div>
<button id="buttonTwo">increase</button>

If you want the class names to cycle (e.g, if the div has the seven class and clicking the 'increase' button causes the class name to become one), simply check whether the index is equal to 0 or the length of the array minus 1:

var list = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];

const div = document.querySelector('div');
buttonOne.addEventListener('click', function() {
  var index = list.indexOf(div.className);
  var newClass = list[index == 0 ? list.length-1 : index - 1]
  div.className = newClass;
  console.log(newClass);
})
buttonTwo.addEventListener('click', function() {
  var index = list.indexOf(div.className);
  var newClass = list[index == list.length - 1 ? 0  : index + 1]
  div.className = newClass;
  console.log(newClass);
})

<button id="buttonOne">reduce</button>
<div class="four"></div>
<button id="buttonTwo">increase</button>

It would be better to use `this.nextElementSibling` and `this.previousElementSibling`. In a real application there won't be a single `div` element. — Barmar, Aug 04 '21 at 20:29

Salamon J · Answer 2 · 2021-08-04T21:12:02.373

Here handled some UX cases also, like disabling a button, when there is no action.

var list = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];
var listlength = list.length-1;
var ele = document.getElementsByClassName("four")[0];
var btnOne = document.getElementById("buttonOne");
var btnTwo = document.getElementById("buttonTwo");
btnOne.addEventListener("click", function(){
  var eleIndex = list.indexOf(ele.getAttribute("class"));
  var classname = list[--eleIndex];
      ele.setAttribute("class", classname);
      ele.innerHTML =classname;
      if(eleIndex == 0){this.disabled=true;return false};
      btnTwo.disabled = false;
});

btnTwo.addEventListener("click", function(){
  var eleIndex = list.indexOf(ele.getAttribute("class"));
  var classname = list[++eleIndex];
      ele.setAttribute("class", classname);
      ele.innerHTML = classname;
      if(eleIndex ==listlength){this.disabled=true;return false};
      btnOne.disabled = false;
});

<button id="buttonOne" style="float:left;margin-right:10px;">Prev</button>
<div class="four" style="float:left;">four</div>
<button id="buttonTwo" style="float:left;margin-left:10px;">Next</button>

score 0 · Answer 3 · answered Aug 05 '21 at 03:23

I would do it like this

var list = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];

//  create variables for the DOM nodes you care about
const div = document.querySelector('div.four');
const buttonOne = document.getElementById('buttonOne');
const buttonTwo = document.getElementById('buttonTwo');

//  a function that returns the current class and its position in the array
const currentClass = () => {
    const className = div.className;
    const index = list.indexOf(className);
    return {className, index};
};

const setClass = (index) => {
    div.className = list[index];
};

buttonOne.addEventListener('click', ev => {
    setClass( currentClass()['index'] -1 );
});

buttonTwo.addEventListener('click', ev => {
    setClass( currentClass()['index'] +1 );
});

button::before {
  content: attr(id);
}

div::before {
  content: attr(class);
}

<button id="buttonOne"></button>
<div class="four"></div>
<button id="buttonTwo"></button>

Change the class of div based on that value's position in array

3 Answers3