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>

The script tags either go in the body, or in the head. Not neither. — Daedalus
– Daedalus, Commented Feb 20, 2021 at 11:49
@Daedalus I've tried putting it to the <head> section, but then my script stopped working. Also tried linking as a separate file. — Eikichi Onizuka
– Eikichi Onizuka, Commented Feb 20, 2021 at 11:57
@EikichiOnizuka Script/style tags do not go outside the body or head tags. The only elements that can go in the html root element are the head or body elements. — Daedalus
– Daedalus, Commented Feb 20, 2021 at 12:06
@Daedalus Lol, I know, I usually don't put them outside of the <head> section, it was just a desperate/whatif attempt to make it work. But thanks for telling me this anyway. — Eikichi Onizuka
– Eikichi Onizuka, Commented Feb 20, 2021 at 12:11
@Daedalus browsers still execute the script even when it's in the wrong place. The cause of this bug is actually in the css, which is being executed or it wouldn't demonstrate the bug. — Chris Lear
– Chris Lear, Commented Feb 20, 2021 at 12:19

Chris Lear · Accepted Answer · 2021-02-20 12:15:58Z

4

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

answered Feb 20, 2021 at 12:15

Chris Lear

6,7601 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mplungjan Over a year ago

Well spotted. I did not actually spot this until I tried to make a snippet.

Chris Lear Over a year ago

Nor did I. But I realised that the code was running AND being displayed, so it couldn't have been as simple as just being in the wrong place or wonky tags, which normally make code display but fail to run.

mplungjan Over a year ago

The style and script do not belong outside the HTML, but it was not the issue. However moving it to the head, it did not solve the issue. Also one needed to add a load event listener. But this is a new one to me. Never seen it before. I was looking for hidden chars and such

Chris Lear Over a year ago

Me too. I thought the copy/paste from an online editor might have brought in entities or something. I didn't even know it was possible to accidentally make script/style content appear using css like that

mplungjan · Accepted Answer · 2021-02-20 12:23:01Z

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>

Collectives™ on Stack Overflow

Javascript and CSS code literally appearing on my HTML page

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related