I could see the Javascript and CSS code manifesting directly onto my HTML page

Question

I could see the Javascript and CSS code manifesting directly onto my HTML page

I've encountered a strange issue with my calendar code where my JavaScript and CSS codes are inexplicably showing up next to the calendar. Does anyone have any insights into why this may be happening? I developed the code in an online HTML/CSS/JS editor and when I transferred it to an HTML file, this anomaly occurred. Despite spending hours trying to identify the problem, I haven't been able to pinpoint anything 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>
    
    // JavaScript code
</script>

<style>
    
    /* CSS Code */
    
</style>

javascript html css

Answer 1

Answer №1

Upon closer inspection, this presents a more intriguing scenario. While relocating the script to the head may resolve the issue, typically the content within script and style tags doesn't display in browsers. The reason for its visibility in this particular instance lies in the intervention of CSS that compels the display of such tags.

The CSS of the browser includes:

script {
    display: none;
}

However, this declaration is contradicted by the following lines:

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

When constructing the DOM, browsers pull the improperly positioned tags into the body and then enforce this display attribute, allowing the code to function but also be visible on the page.

While relocating the script tag may provide a temporary fix, the root cause of the issue remains unaddressed.

Answer 2

Upon closer inspection, this presents a more intriguing scenario. While relocating the script to the head may resolve the issue, typically the content within script and style tags doesn't display in browsers. The reason for its visibility in this particular instance lies in the intervention of CSS that compels the display of such tags.

The CSS of the browser includes:

script {
    display: none;
}

However, this declaration is contradicted by the following lines:

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

When constructing the DOM, browsers pull the improperly positioned tags into the body and then enforce this display attribute, allowing the code to function but also be visible on the page.

While relocating the script tag may provide a temporary fix, the root cause of the issue remains unaddressed.

Answer 3

Answer №2

Adjust the positioning of the script and style to be at the top of the page
Revise this code snippet

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

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

with

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

As noted by John, there is a disruptive style entry in the code

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

I have relocated it just below the other body style and had to add

script,
style {
  display: none
}

to mitigate the disturbance

Answer 4

Adjust the positioning of the script and style to be at the top of the page
Revise this code snippet

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

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

with

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

As noted by John, there is a disruptive style entry in the code

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

I have relocated it just below the other body style and had to add

script,
style {
  display: none
}

to mitigate the disturbance

I could see the Javascript and CSS code manifesting directly onto my HTML page

Answer №1

Answer №2

Similar questions

Request financial data from AlphaVantage using PHP

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

Maintaining a Multi-page template in PhoneGap: Best practices

What is the most effective method for disregarding undefined values?

Is there a way to make the embed tag match the size of the div tag?

In Vue js, where is the best place to incorporate something similar to a 'base.html' template?

Tips for generating nested elements in JSON and Java, alongside accessing the subitem values in JavaScript

Transferring form data from Jade to Node.js for submission

How do I access and read a map within an array from Firebase using ReactJS?

I am experiencing some layout problems with Joomla K2

Steps to create two jQuery dropdown filters for multiple identifiers:

Creating a function to update data in a Node.js/MongoDB environment

Updating AngularJS views based on window resizing

Utilizing the power of functional programming with Javascript to perform mapping

Struggling to get the AJAX code functioning correctly

Using Bootstrap 4, create a responsive design that centers images within a div on mobile devices and positions them differently

Organizing numerical values within for loops

Using JQuery and Javascript to retrieve information from one drop down list based on the selection made in another drop down

Verify if a certain value is present within a nested array

Having trouble retrieving input field values with Angular.js