时间戳

首页 > 解决方案 > Javascript不会在加载时启动脚本

javascript - Javascript不会在加载时启动脚本

问题描述

我的脚本在加载时出现问题。它昨天才起作用，但我将代码更改为更紧凑，现在它不起作用。在此错误之前，它在不使用onloadin 的情况下工作正常body。
在更改之前，它将在li元素上显示当前和未来 6 天，但现在它只是一个空白框。

function setweek() {
  var days["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
  var elemen["first", "second", "third", "fourth", "fifth", "sixth", "seventh"]
  var day;
  var dayofmonth = 0;
  var plannedweek = 0;
  var d = new Date();
  var month = d.getMonth();
  for (var i = 0; i < 7; i++) {
    day = days[d.getDay() + i];
    dayofmonth = d.getDate() + i;
    check(i);
    document.getElementById(elemen[i]).innerHTML = day + '<br>' + dayofmonth + "." + month;
  }
}

function check(a) {
  var max = 31;
  if (d.getMonth() + l == 1) {
    max = 28;
  }
  if (d.getMonth() + l == 3) {
    max = 30;
  }
  if (d.getMonth() + l == 5) {
    max = 30;
  }
  if (d.getMonth() + l == 8) {
    max = 30;
  }
  if (d.getMonth() + l == 10) {
    max = 30;
  }
  if (d.getDate() + (a + (plannedweek * 7)) > max) {
    plannedweek = 0;
    month++;
    if (d.getMonth() + month > 12) {
      month = 0;
    }
  }
}
<body onload="setweek();">
  <section id="meal_plan_section">
    <label for="weekly_meal_plan">Weekly meal plan:</label><br>
    <ul class="list-group" id="weekly_meal_plan">
      <li id="first" class="list-group-item list-group-item-action"></li>
      <li id="second" class="list-group-item list-group-item-action"></li>
      <li id="third" class="list-group-item list-group-item-action"></li>
      <li id="fourth" class="list-group-item list-group-item-action"></li>
      <li id="fifth" class="list-group-item list-group-item-action"></li>
      <li id="sixth" class="list-group-item list-group-item-action"></li>
      <li id="seventh" class="list-group-item list-group-item-action"></li>
    </ul>
  </section>
</body>

标签： javascripthtml

解决方案

几个问题

  • 错别字（缺少=天数和元素）
  • 范围（var d 在检查中不可见），setweek 不为 onload 处理程序所知
  • l没有定义的

这里我使用了一个事件处理程序

var d = new Date();

function setweek() {
  var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
  var elemen = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh"];
  var day;
  var dayofmonth = 0;

  var month = d.getMonth() +1; // JS months start a 0
  for (var i = 0; i < 7; i++) {
    day = days[d.getDay() + i];
    dayofmonth = d.getDate() + i;
    document.getElementById(elemen[i]).innerHTML = day + '<br>' + dayofmonth + "." + month;
  }
}

window.addEventListener("load", setweek)


// if you need the last day of the month do this

const lastDay = date => new Date(date.getFullYear(),date.getMonth()+1,0).getDate();

console.log(lastDay(d))
<section id="meal_plan_section">
  <label for="weekly_meal_plan">Weekly meal plan:</label><br>
  <ul class="list-group" id="weekly_meal_plan">
    <li id="first" class="list-group-item list-group-item-action"></li>
    <li id="second" class="list-group-item list-group-item-action"></li>
    <li id="third" class="list-group-item list-group-item-action"></li>
    <li id="fourth" class="list-group-item list-group-item-action"></li>
    <li id="fifth" class="list-group-item list-group-item-action"></li>
    <li id="sixth" class="list-group-item list-group-item-action"></li>
    <li id="seventh" class="list-group-item list-group-item-action"></li>
  </ul>
  <br>

注意：如果您需要每月的最后一天，请执行此操作

const lastDay = date => new Date(date.getFullYear(),date.getMonth()+1,0).getDate();

我想，你想要这个

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
const elemen = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh"];

function setweek() {
  let d = new Date();
  const start = d.getDate();
  for (let i = 0; i < 7; i++) {
    d.setDate(start + i)
    document.getElementById(elemen[i]).innerHTML = days[d.getDay()] + '<br>' + d.getDate() + "." + (d.getMonth() + 1);
  }
}

window.addEventListener("load", setweek)
<section id="meal_plan_section">
  <label for="weekly_meal_plan">Weekly meal plan:</label><br>
  <ul class="list-group" id="weekly_meal_plan">
    <li id="first" class="list-group-item list-group-item-action"></li>
    <li id="second" class="list-group-item list-group-item-action"></li>
    <li id="third" class="list-group-item list-group-item-action"></li>
    <li id="fourth" class="list-group-item list-group-item-action"></li>
    <li id="fifth" class="list-group-item list-group-item-action"></li>
    <li id="sixth" class="list-group-item list-group-item-action"></li>
    <li id="seventh" class="list-group-item list-group-item-action"></li>
  </ul>
  <br>

推荐阅读