如何使用javascript更改当前变量？答案

【问题标题】：How to use javascript to change the current variable?如何使用javascript更改当前变量？
【发布时间】：2018-07-11 22:46:48
【问题描述】：

我有一个小的 html 页面，如果用户单击其中一个按钮，它将改变日期。我有一个功能，它说明今天是星期几，但我希望用户能够按“>”，这会将日期从今天更改为第二天。如果您按“

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>

感谢所有帮助！

【问题讨论】：

您要查找的术语是循环链表。您可以在这里使用模除法来做到这一点。
你的代码有很多错误，请查看我的回答

标签： javascript html

【解决方案1】：

我为你准备了小提琴：https://jsfiddle.net/k8g1mros/

这背后的逻辑是：

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();
})

一些解释：

首先，您使用var index=date.getDay() 获得您的实际一天。通过单击next 或prev，该索引将向上/向下计数。一旦到达0（周日）或6（周六），索引将重置为0 / 6。

这发生在这里（上一页）：

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

这称为inline condition。延伸阅读：

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

How to write an inline IF statement in JavaScript?

这相当于：

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

你现在明白背后的逻辑了吗？

【讨论】：

感谢您的帮助！它奏效了，但你能帮我解释一下吗？我有点不确定这些语句的作用： index = nextIndex document.getElementById("todayField").innerHTML = days[nextIndex];和：console.log(nextIndex)
这两行让我很难理解： var nextIndex = index - 1
var nextIndex = index - 1 < 0 ? 6 : index-1; 我在回答中解释了此代码行。您可以在我在我的答案中发布的链接中阅读更多关于 inline conditions 的信息。 console.log(nextIndex); 只会将nextIndex 的值记录到控制台
您也可以删除 console.log(nextIndex) - 这对您的逻辑完全没有影响
@Alison 如果这个答案可以帮助您解决问题，您应该接受它。

【解决方案2】：

你想做这样的事情：

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

【讨论】：

如果您点击next 或prev 超过一周，则会导致未定义
@messerbill true，但这不是问题的范围

【解决方案3】：

当心：您将“prev”功能链接到“btnNext”按钮。
不需要重写相同的代码，所以我清除了next()和prev()函数。
modulo operation 是您正在寻找的。
在prev() 中你不能使用它，因为-1 % 7 = -1，这将导致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>

【讨论】：

【解决方案4】：

当按下按钮从你的 todayField 中获取工作日时，在你的 days 数组中查找这一天的索引。比下一天/前一天加/减 1。因为一周有 7 天，你需要做这个模 7，所以你得到一个介于 0 和 6 之间的结果。如果你减去并且值是负数，加 7。最后使用您的工作日数组中的这个新工作日更新您的字段。

<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>

【讨论】：

【解决方案5】：

我不知道你为什么在每个函数中都复制相同的代码，你可以重构你的代码，用模除法你可以得到一天：

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];
}

【讨论】：

【解决方案6】：

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);
});

【讨论】：