jQuery addClass example

Change class name on click in jQuery

by D S

HTML

<button class="increase">increase</button>
<button class="decrease">decrease</button>
<p class="text">value</p>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color:white
}

JavaScript

var tracks = ["Music1", "Music2", "Music3", "Music4"];
var currentTrackIndex  = 0;

$(".increase").on('click tap', nextMusic);
$(".decrease").on('click tap', previousMusic);

function nextMusic() {
  //It will move to the next track. If it's over the array length, it will reset to 0
  changeTrack((currentTrackIndex + 1) % tracks.length)
}

function previousMusic() {
  //It will move to the previous song. If it's below zero, it will reset to the last track index
  changeTrack((currentTrackIndex + tracks.length - 1) % tracks.length)
}

function changeTrack(newTrackIndex) {
  currentTrackIndex = newTrackIndex;
  var currentTrack = tracks[currentTrackIndex];
  console.log(currentTrackIndex);
  $(".text").text(currentTrackIndex);
}