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

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

javascript html

如何使用javascript更改当前变量？,javascript,html,Javascript,Html,我有一个小的html页面，如果用户点击其中一个按钮，它将改变一天。我有一个功能，它会显示今天是哪一天，但我希望用户能够按“>”，它会将今天更改为第二天。前一天如果你按“你想做这样的事情： var-date=新日期（）； var currentDay=date.getDay（）；风险值天数=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]； document.getElementById（“todayField”）.innerHTML=days[date.getDay（

我有一个小的html页面，如果用户点击其中一个按钮，它将改变一天。我有一个功能，它会显示今天是哪一天，但我希望用户能够按“>”，它会将今天更改为第二天。前一天如果你按“你想做这样的事情：

var-date=新日期（）；
var currentDay=date.getDay（）；
风险值天数=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
document.getElementById（“todayField”）.innerHTML=days[date.getDay（）]；
函数next（）{
currentDay++；
document.getElementById（“todayField”）.innerHTML=days[currentDay]；
}
函数prev（）{
currentDay=currentDay-1；
document.getElementById（“todayField”）.innerHTML=days[currentDay]；
}

单击以更改日期

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

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

var-date=新日期（）；
var currentDay=date.getDay（）；
var days=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”，
“星期六”]；
document.getElementById（“todayField”）.innerHTML=days[date.getDay（）]；
函数next（）{
当前日期=（（当前日期+1）%7）；
document.getElementById（“todayField”）.innerHTML=days[currentDay]；
}
函数prev（）{
currentDay=（（currentDay-1）%7）；
currentDay=（currentDay<0）？6：currentDay；
document.getElementById（“todayField”）.innerHTML=days[currentDay]；
}

我为你准备了一把小提琴：

这背后的逻辑是：

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 nextIndex = 0
if (index - 1 < 0 ) {
  nextIndex = 0
} else {
  nextIndex = index - 1
}

var nextIndex=0
如果（指数-1<0）{
nextIndex=0
}否则{
nextIndex=索引-1
}

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

当按下按钮从Today字段获取工作日时，在days数组中查找这一天的索引。然后在下一天/前一天加/减1。因为一周有7天，你需要进行模7运算，所以得到的结果介于0和6之间。如果你减去，则值为负add 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>


单击以更改日期

变量日期=新日期（）；
风险值天数=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
document.getElementById（“todayField”）.innerHTML=days[date.getDay（）]；
函数next（）{
变量日期=新日期（）；
风险值天数=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
var actualDay=document.getElementById（“todayField”）.innerHTML；
var dayNr=天数。indexOf（实际天数）；
dayNr=（dayNr-1）%7；
如果（dayNrjQuery:
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);
});

var-date=新日期（）；
风险值天数=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
document.getElementById（“todayField”）.innerHTML=days[date.getDay（）]；
$（“按钮[name='btnNext']）。单击（函数（）{
const displayedDay=$（“#todayField”）.text（）；
const dayIndex=days.indexOf（displayedDay）；
让新索引；
如果（日指数0）{
newIndex=dayIndex-1；
}否则{
新指数=6；
}
let dayString=days[newIndex]；
$（“p#todayField”）.empty（）.append（dayString）；
});
小心：您已将“prev”功能链接到“btnNext”按钮。

不需要重写相同的代码，因此我清除了next（）
和prev（）
函数。

这就是你要找的。

在prev（）
中，您不能使用它，因为-1%7
=-1
，这将导致未定义
<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>


单击以更改日期

变量日期=新日期（）；
风险值天数=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
var selectedDay=date.getDay（）；
document.getElementById（“todayField”）.innerHTML=days[selectedDay]；
函数next（）{
selectedDay=（selectedDay+1）%7；
document.getElementById（“todayField”）.innerHTML=days[selectedDay]；
}
函数prev（）{
如果（--selectedDay<0）
选择日期=6；
document.getElementById（“todayField”）.innerHTML=days[selectedDay]；
}
您要查找的术语是循环链表。您可能可以在此处使用模除法。您的代码中有很多错误，请检查我的回答如果您单击“下一步”或“上一步”不止一次，则会导致未定义week@messerbill是的，但那不是问题的范围谢谢帮助！它起作用了，但是你能给我解释一下吗？我有点不确定这些语句的作用：index=nextIndex document.getElementById（“todayField”）.innerHTML=days[nextIndex]；和：console.log（nextIndex）这两行代码让我很难理解：var-nextIndex=index-1<0？6:index-1；和console.log（nextIndex）var-nextIndex=index-1<0？6:index-1；
我在回答中解释了这一行代码。你可以在我在回答中发布的链接中阅读更多关于内联条件的内容。console.log（nextIndex）；
除了将nextIndex
的值记录到控制台之外什么都不做。您还可以删除console.log（nextIndex）-这对当前的逻辑没有影响all@Alison如果这个答案帮助你解决问题，你应该接受它。
<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>