How to use javascript to change the current variable?

Question

I have a small html page, where if the user clicks on one of the buttons, it will change the day. I have a function where it says what day it is today, but I want the user to be able to press ">", which will change the day from today to the next day. And the previous day if you press "<". I am no fully sure on how I should proceed now.

var date = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("todayField").innerHTML = days[date.getDay()];

function next() {
  var date = new Date();
  var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  document.getElementById("todayField").innerHTML = days[date.getDay()];

  if (btnNext.click) {
    days++;
    document.getElementById("todayField").innerHTML = days[date.getDay()];
  }
}

function prev() {
  var date = new Date();
  var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  document.getElementById("todayField").innerHTML = days[date.getDay()];

  if (btnNext.click) {
    days--;
    document.getElementById("todayField").innerHTML = days[date.getDay()];
  }
}

<p>Click to change day</p>
<button type="button" name="btnPrev" onclick="next()"><</button>
<button type="button" name="btnNext" onclick="prev()">></button>
<p id="todayField"></p>

All help is appreciated!

The term you're looking for is circular linked-list. You could probably do that with modulo division here. — Wayne Werner, Feb 01 '18 at 14:58
you have a lot of errors in your code, please check my answer — JPRLCol, Feb 01 '18 at 15:04

messerbill · Accepted Answer · 2018-02-01T15:24:27.790

3

i prepared a fiddle for you: https://jsfiddle.net/k8g1mros/

logic behind this is:

var date = new Date();
var index = date.getDay();

function prev() {
  var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  var nextIndex = index - 1 < 0 ? 6 : index-1;
  index = nextIndex
  console.log(nextIndex)
  document.getElementById("todayField").innerHTML = days[nextIndex];
}
document.getElementById("prev").addEventListener("click", function() {
  prev();
})

some explanation:

at first you get your actual day using var index=date.getDay(). By clicking next or prev this index will be count up / down. Once arrived at 0 (Sunday) or 6 (Saturday) the index will be reset to 0 / 6.

This happens here (for prev):

var nextIndex = index - 1 < 0 ? 6 : index-1;

This is called inline condition. Further reading:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

How to write an inline IF statement in JavaScript?

This is an equivalent of:

var nextIndex = 0
if (index - 1 < 0 ) {
  nextIndex = 0
} else {
  nextIndex = index - 1
}

Do you understand the logic behind now?

edited Feb 01 '18 at 15:24

answered Feb 01 '18 at 15:08

messerbill

5,499
1
27
38

1

Thanks for the help! It worked, but can you please explain some tings for me? I am bit unsure of what these statments do: index = nextIndex document.getElementById("todayField").innerHTML = days[nextIndex]; and: console.log(nextIndex) – Alison Feb 01 '18 at 15:18
These two lines make it hard for me to understand it: var nextIndex = index - 1 < 0 ? 6 : index-1; and console.log(nextIndex) – Alison Feb 01 '18 at 15:30
`var nextIndex = index - 1 < 0 ? 6 : index-1;` i explained this code line in my answer. You can read more about `inline conditions` in the links i posted in my answer. `console.log(nextIndex);` does nothing but logging `nextIndex`'s value to the console – messerbill Feb 01 '18 at 15:32
you can also remove `console.log(nextIndex)` - this has no effect to your logic at all – messerbill Feb 01 '18 at 15:33
1

@Alison if this answer help you out to resolve your issue, you should accept it. – Jose Rojas Feb 01 '18 at 15:38

JPRLCol · Answer 2 · 2018-02-01T15:09:22.647

2

you would like to do something like this:

var date = new Date();
var currentDay = date.getDay();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("todayField").innerHTML = days[date.getDay()];

function next() {
  currentDay++;
  document.getElementById("todayField").innerHTML = days[currentDay];
}

function prev() {
  currentDay = currentDay - 1;
  document.getElementById("todayField").innerHTML = days[currentDay];

}

<p>Click to change day</p>
<button type="button" name="btnPrev" onclick="next()"><</button>
<button type="button" name="btnNext" onclick="prev()">></button>
<p id="todayField"></p>

please check

edited Feb 01 '18 at 15:09

answered Feb 01 '18 at 15:04

JPRLCol

749
11
28

1

this results in undefined if you click `next` or `prev` for more than just one week – messerbill Feb 01 '18 at 15:10
@messerbill true, but that was not the scope of the question – JPRLCol Feb 01 '18 at 15:11

Jose Rojas · Answer 3 · 2018-02-01T15:59:11.887

I don't know why you copy the same code in every function, you can refactor your code, with modulo division you can get the day:

var date = new Date();
var currentDay = date.getDay();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", 
"Saturday"];
document.getElementById("todayField").innerHTML = days[date.getDay()];


function next() {
    currentDay = ((currentDay+1) % 7);
    document.getElementById("todayField").innerHTML = days[currentDay];
}

function prev() {
    currentDay = ((currentDay-1) % 7);
    currentDay = (currentDay < 0) ? 6: currentDay;
    document.getElementById("todayField").innerHTML = days[currentDay];
}

Sascha · Answer 4 · 2018-02-01T15:31:46.013

When press the button get the weekday from your todayField, look for the index of this day in your days-array. Than add/subtract 1 for the next/previous day. Because the week has 7 days you need do this modulo 7 so you get a result between 0 and 6. If you subtract and the value is getting negative add 7 to it. Last update your field with this new weekday out of your weekday-array.

<body>
<p>Click to change day</p>
<button type="button" name="btnPrev" onclick="next()"><</button>
<button type="button" name="btnNext" onclick="prev()">></button>
<p id="todayField"></p>
<script>
    var date = new Date();
    var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    document.getElementById("todayField").innerHTML = days[date.getDay()];

    function next() {
      var date = new Date();
      var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

      var actualDay = document.getElementById("todayField").innerHTML;
      var dayNr =  days.indexOf(actualDay);
      dayNr = (dayNr - 1) %7;
      if (dayNr<0)
          dayNr += 7;
      document.getElementById("todayField").innerHTML = days[dayNr];
    }

    function prev() {
        var date = new Date();
        var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

        var actualDay = document.getElementById("todayField").innerHTML;
        var dayNr =  days.indexOf(actualDay);
        dayNr = (dayNr + 1) %7;
        document.getElementById("todayField").innerHTML = days[dayNr];
    }
</script>

score 1 · Answer 5 · answered Feb 01 '18 at 15:22

Beware: you linked the "prev" function to "btnNext" button.
There is no need to rewrite the same code, so I cleared the next() and prev() functions.
The modulo operation is what you're looking for.
In prev() you cannot use it since -1 % 7 = -1, which would lead to undefined.

<body>
    <p>Click to change day</p>
    <button type="button" name="btnPrev" onclick="prev()">&lt;</button>
    <button type="button" name="btnNext" onclick="next()">&gt;</button>
    <p id="todayField"></p>
    <script>
    var date = new Date();
    var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    var selectedDay = date.getDay();
    document.getElementById("todayField").innerHTML = days[selectedDay];

    function next() {
      selectedDay = (selectedDay + 1) % 7;
      document.getElementById("todayField").innerHTML = days[selectedDay];
    }

    function prev() {
      if (--selectedDay < 0)
        selectedDay = 6;
      document.getElementById("todayField").innerHTML = days[selectedDay];
    }
    </script>
</body>

score 0 · Answer 6 · answered Feb 01 '18 at 15:18

jQuery:

var date = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("todayField").innerHTML = days[date.getDay()];

$("button[name='btnNext']").click(function(){
    const displayedDay = $("#todayField").text();
    const dayIndex = days.indexOf(displayedDay);
  let newIndex;
  if(dayIndex < days.length - 1) {
    newIndex = dayIndex + 1;    
  } else {
    newIndex = 0;
  }
  let dayString = days[newIndex];
  $("p#todayField").empty().append(dayString);
});

$("button[name='btnPrev']").click(function(){
    const displayedDay = $("#todayField").text();
    const dayIndex = days.indexOf(displayedDay);
  let newIndex;
  if(dayIndex > 0) {
    newIndex = dayIndex - 1;    
  } else {
    newIndex = 6;
  }
  let dayString = days[newIndex];
  $("p#todayField").empty().append(dayString);
});

How to use javascript to change the current variable?

6 Answers6