Search code examples
javascripthtmlarraysbuttondays

change day by clicking on button


I want that each time I'm clicking on button that I see the Next day from day array list

The only way that I could get an answer is Math.random() to have different result each time I am clicking on button, but I want that show me the next day each time I am clicking on it.

function day() {
  var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
  document.getElementById("demo").innerHTML = days[Math.floor(Math.random() * 7)];
}
<button onclick='day()'>Click to see</button>
<span id="demo"></span>


Solution

  • You could keep an array representing the days in the week while also keep an index to show the current day current.

    On each click you will increment current value. The innerHtml value will be the current index (the % is being added to prevent out of bounce)

    var days =['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
    let current = 0;
    function day(){
        document.getElementById("demo").innerHTML = days[current++ % days.length];
    }
    <button onclick='day()'>Click to see</button>
    <div id="demo">
    
    </div>