Javascript and CSS code literally appearing on my HTML page

Question

This is a simple calendar code. And my javascript and CSS codes are literally appearing beside my calendar. Does anyone know why something like this happens? I was using an online html/css/js editor and when I made my code into an HTML file, this happened. I've spent hours looking for a fault, but I can't find anything that is problematic.

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>ICSI301 - Lab 2</title>
</head>

<body>
        <h1 id="year">2021 School Calendar</h1>
        <div class="calendar">
        </div>
</body>

</html>

<script>

    var monthNamesRy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var daysOfTheWeekRy = ["S", "M", "T", "W", "T", "F", "S"]

    var d = new Date();
    var year = d.getFullYear();

    var thisMonth = d.getMonth();
    var today = d.getDate();
    //var nthday = d.getDay();
    var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");

    for (var month = 0; month < 12; month++) {
        createCalendar(month);
    }

    function createCalendar(month) {
        var monthDiv = createMonthHeader(month);

        var firstDayOfTheMonth = getFirstDayOfTheMonth(year, month);
        var daysinmonth = daysInMonth(year, month)
        var counter = 0, order = 6;

        for (var i = 0; i < firstDayOfTheMonth + 7; i++) {
            order++;
            createDay(month, "&nbsp;", order, monthDiv);
        }
        for (var i = firstDayOfTheMonth; i < daysInMonth(year, month) + firstDayOfTheMonth; i++) {
            counter++;
            order++;
            createDay(month, counter, order, monthDiv);
        }

        for (var i = firstDayOfTheMonth + daysinmonth; i < 6 * 7; i++) {
            order++;
            createDay(month, "&nbsp;", order, monthDiv);
        }
    }

    function createDay(month, counter, order, monthDiv) {

        var day = document.createElement("div");
        if (month == thisMonth && counter == today) {
            day.setAttribute("class", "to day");
        } else {
            day.setAttribute("class", "day");
        }
        day.setAttribute("style", "order:" + order);
        day.innerHTML = counter;
        monthDiv.appendChild(day);
    }

    function createMonthHeader(month) {
        var calendar = document.querySelector(".calendar");

        var monthDiv = document.createElement("div");
        monthDiv.setAttribute("class", "month");
        calendar.appendChild(monthDiv);

        var h4 = document.createElement("h4");
        h4.innerHTML = monthNamesRy[month];
        monthDiv.appendChild(h4);

        for (var i = 0; i < 7; i++) {
            var hday = document.createElement("div");
            hday.setAttribute("class", "day OfWeek");
            hday.setAttribute("style", "order:" + i);
            hday.innerHTML = daysOfTheWeekRy[i].toUpperCase();
            monthDiv.appendChild(hday);
        }

        return monthDiv;
    }

    function daysInMonth(year, month) {
        return new Date(year, month + 1, 0).getDate();
    }

    function getMonthName(month) {
        return monthNamesRy[month];
    }
    function getDayName(day) {
        return daysOfTheWeekRy[day];
    }

    function getFirstDayOfTheMonth(y, m) {
        var firstDay = new Date(y, m, 1);
        return firstDay.getDay();
    }
    function getLastDayOfTheMonth(y, m) {
        var lastDay = new Date(y, m + 1, 0);
        return lastDay.getDay();
    }
</script>

<style>

    body * {
        margin: 0;
        padding: 0;
        font-family: "Times New Roman";
    }

    .calendar, section {
        max-width: 50rem;
    }

    .day {
        width: 1.5em;
        height: 1.5em;
    }

        .day:nth-of-type(-n+7) {
            background-color: #7CFC00;
        }

    .to.day {
        background: aquamarine;
    }

    .month {
        width: calc(1.5em * 8);
        padding: 1em;
    }

    h4 {
        font-size: 1em;
        text-transform: uppercase;
    }

    h1#year {
        font-size: 3em;
        height: 29px;
        font-weight: normal;
        padding: 1em 1em .5em 1em;
        margin-bottom: .5em;
        color: #006400;
    }

    body, body * {
        display: flex;
        justify-content: center;
    }

    h4 {
        justify-content: center;
        flex: 1 0 100%;
    }

    h1 {
        justify-content: center;
        align-self: stretch;
    }

    .calendar, .month {
        flex-wrap: wrap;
    }

    .month {
        align-items: flex-start;
        border: 3px double black;
        margin: 5px;
    }

    .day {
        border: 1px solid black;
        align-items: center;
        justify-content: center;
    }

</style>

Chris Lear · Accepted Answer

This is more interesting than it seems at first. It's possible to solve the problem by moving the script to the head, but the content of script tags and style tags do not normally display in browsers. The reason they are displaying in this case is that the css is forcing the content of these tags to display.

The browser's css has

script {
    display: none;
}

And this is overridden by these lines:

body, body * {
    display: flex;
    justify-content: center;
}

Browsers pull the invalidly-positioned tags into the body when building the DOM, and then apply this display attribute... which means the code runs, but it also shows on the page.

It can be fixed by moving the script tag, but that doesn't actually address the real cause of the problem

mplungjan · Answer

Move the script and style to the head
change this

    var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");

    for (var month = 0; month < 12; month++) {
        createCalendar(month);
    }

to

    window.addEventListener("load",function() { // wait for page load
      var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");
      for (var month = 0; month < 12; month++) {
        createCalendar(month);
      }
    })

As Chris noticed, you have a very disruptive style entry

body,
body * {
  display: flex;
  justify-content: center;
}

I moved that to just under the other body style and now had to add

script,
style {
  display: none
}

to stop the disruption

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>ICSI301 - Lab 2</title>
  <script>
    var monthNamesRy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var daysOfTheWeekRy = ["S", "M", "T", "W", "T", "F", "S"]

    var d = new Date();
    var year = d.getFullYear();

    var thisMonth = d.getMonth();
    var today = d.getDate();
    //var nthday = d.getDay();
    window.addEventListener("load", function() {
      var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");

      for (var month = 0; month < 12; month++) {
        createCalendar(month);
      }
    });

    function createCalendar(month) {
      var monthDiv = createMonthHeader(month);

      var firstDayOfTheMonth = getFirstDayOfTheMonth(year, month);
      var daysinmonth = daysInMonth(year, month)
      var counter = 0,
        order = 6;

      for (var i = 0; i < firstDayOfTheMonth + 7; i++) {
        order++;
        createDay(month, "&nbsp;", order, monthDiv);
      }
      for (var i = firstDayOfTheMonth; i < daysInMonth(year, month) + firstDayOfTheMonth; i++) {
        counter++;
        order++;
        createDay(month, counter, order, monthDiv);
      }

      for (var i = firstDayOfTheMonth + daysinmonth; i < 6 * 7; i++) {
        order++;
        createDay(month, "&nbsp;", order, monthDiv);
      }
    }

    function createDay(month, counter, order, monthDiv) {

      var day = document.createElement("div");
      if (month == thisMonth && counter == today) {
        day.setAttribute("class", "to day");
      } else {
        day.setAttribute("class", "day");
      }
      day.setAttribute("style", "order:" + order);
      day.innerHTML = counter;
      monthDiv.appendChild(day);
    }

    function createMonthHeader(month) {
      var calendar = document.querySelector(".calendar");

      var monthDiv = document.createElement("div");
      monthDiv.setAttribute("class", "month");
      calendar.appendChild(monthDiv);

      var h4 = document.createElement("h4");
      h4.innerHTML = monthNamesRy[month];
      monthDiv.appendChild(h4);

      for (var i = 0; i < 7; i++) {
        var hday = document.createElement("div");
        hday.setAttribute("class", "day OfWeek");
        hday.setAttribute("style", "order:" + i);
        hday.innerHTML = daysOfTheWeekRy[i].toUpperCase();
        monthDiv.appendChild(hday);
      }

      return monthDiv;
    }

    function daysInMonth(year, month) {
      return new Date(year, month + 1, 0).getDate();
    }

    function getMonthName(month) {
      return monthNamesRy[month];
    }

    function getDayName(day) {
      return daysOfTheWeekRy[day];
    }

    function getFirstDayOfTheMonth(y, m) {
      var firstDay = new Date(y, m, 1);
      return firstDay.getDay();
    }

    function getLastDayOfTheMonth(y, m) {
      var lastDay = new Date(y, m + 1, 0);
      return lastDay.getDay();
    }
  </script>

  <style>
    body * {
      margin: 0;
      padding: 0;
      font-family: "Times New Roman";
    }
    
    body,
    body * {
      display: flex;
      justify-content: center;
    }
    
    script,
    style {
      display: none
    }
    
    .calendar,
    section {
      max-width: 50rem;
    }
    
    .day {
      width: 1.5em;
      height: 1.5em;
    }
    
    .day:nth-of-type(-n+7) {
      background-color: #7CFC00;
    }
    
    .to.day {
      background: aquamarine;
    }
    
    .month {
      width: calc(1.5em * 8);
      padding: 1em;
    }
    
    h4 {
      font-size: 1em;
      text-transform: uppercase;
    }
    
    h1#year {
      font-size: 3em;
      height: 29px;
      font-weight: normal;
      padding: 1em 1em .5em 1em;
      margin-bottom: .5em;
      color: #006400;
    }
    
    h4 {
      justify-content: center;
      flex: 1 0 100%;
    }
    
    h1 {
      justify-content: center;
      align-self: stretch;
    }
    
    .calendar,
    .month {
      flex-wrap: wrap;
    }
    
    .month {
      align-items: flex-start;
      border: 3px double black;
      margin: 5px;
    }
    
    .day {
      border: 1px solid black;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <h1 id="year">2021 School Calendar</h1>

  <div class="calendar"></div>

</body>

</html>

Javascript and CSS code literally appearing on my HTML page

Tags:

javascript

html

css

Eikichi Onizuka

2 Answers

Chris Lear

mplungjan

Recent Activity

Donate For Us

Javascript and CSS code literally appearing on my HTML page

Tags:

javascript

html

css

Eikichi Onizuka

2 Answers

Chris Lear

mplungjan

Related questions

Recent Activity

Donate For Us