CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
Napoleon_Jahmiu
Napoleon_Jahmiu

Reputation: 11

What is MIME type ('text/html'), Why is it not supported on chrome and how can I disable it

Learning JavaScript, I created a js file and HTML file only without any CSS file 'cause it's I don't need it. After linking my js file to my HTML, loading my code on chrome all I get is this on my local host "index.html:1 Refused to apply style from 'http://127.0.0.1:5500/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.". Any of the functions did not work. Pls check out the Files here

I have tried disabling MIME checking on my browser but I can't find how. Please, check the simple lines of code below. Anyone help out. I need an explicit explanation on how to fix this. Thank you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding Evnets</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <p id="second">No excuses</p>
    <input type="text" id="userinput" placeholder="enter item">
    <button id="enter">Click me</button>

    <ul>
        <li random ="23"> Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    <script src="events.js"></script>
</body>
</html>


JavaScript file:
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

function inputLenght() {
    return input.value.lenght;
}

function createListElement() {
    var li = document.createElement('li');
    var test = document.createTextNode("input.value");
    li.appendChild(test)
    ul.appendChild(li);
    input.value = '';
}

function addListAfterClick() {
    if(inputLenght > 0 ) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if(inputLenght > 0 && event.keyCode === 13) {
        createListElement()
    }
}


button.addEventListener('click', addListAfterClick);

 button.addEventListener('keypress', addListAfterKeypress);

Upvotes: 1

Views: 2342

Answers (2)

Enzo Caceres
Enzo Caceres

Reputation: 519

If you say that you have done an html 'only without any CSS file', then you should not try to reference any from your .html file. This line is causing the problem:

<link rel="stylesheet" href="style.css">
The reason

Refused to apply style from 'http://127.0.0.1:5500/style.css' because its MIME type ('text/html')

Is surely caused by the fact that the style.css file does not exists it return a 404 page. (which is in HTML form)

Upvotes: 2

Daniel Herrero Hernando
Daniel Herrero Hernando

Reputation: 312

If you don't have a css file just remove the line on the head tag

<link rel="stylesheet" href="style.css">

Upvotes: 0

Related Questions