CSS - JavaScript Not Being Implemented

Question

I fetched an html file using fetch api and took the div components and embedded them into another html file. The css is not being applied after the process is complete. Nor is the javascript file being called. I checked the file paths and they are correct. Does the css and javascript tags not transfer over when they are fetched using the fetch api?

***Main script.js***
let testSide = document.querySelector('#test-sidebar')


let htmlUrl = './TextBox/index.html'


fetch(htmlUrl)
  .then((result)=>{
    return result.text()
  }).then((html)=>{
    var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html')
    var doDo = doc.querySelector('.parent-container')
    testSide.appendChild(doDo)
  }).catch((error)=>{
    console.log(error)
  })

***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>To Do</title>
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href='style.css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="test-sidebar">
  </div>
  <script src="script.js"></script>
</body>
</html>

***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Notbox</title>
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
        
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" ></textarea>

        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>
    <script src="script.js"></script>
  </body>
</html>

***CSS of second html file***
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body{
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
  position: relative;
  width: 100%;
  height: 540px;
  max-height: 5400px;
}

/*------------------------container-----------------------*/
.container{
  position: absolute;
  top: 0;
  left: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;
}



/*--------------------------header-----------------------*/
.header{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;

}


/*---------------------------content------------------------*/

.content{
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;
}


.content::-webkit-scrollbar{
  display: none;
}

.content ul{
  padding: 0;
  margin: 0;
}

.items-content{
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid #D6DBDF;
}

.item{
  position: relative;
  border-bottom: 1px solid #EBEDEF;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  cursor: pointer
}

.item:hover{
  background-color: #EAECEE
}


.item p{
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;
}


/*--------------------------Create Text Box--------------------------*/
.create-text-box{
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer
}



/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
  position: absolute;
  top: 0;
  right: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;
}



/*--------------------------header-----------------------*/
.notebox-container .header{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;

}



/*---------------------------content------------------------*/

.notebox-container .content{
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;
}

#noteList
{
  resize: none;
  font-size: 15px;
  font: serif;
    color: #28B463;
    text-align: center;
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;
}


.notebox-container .content::-webkit-scrollbar{
  display: none;
}

.notebox-container .content ul{
  padding: 0;
  margin: 0;
}

.notebox-container .items-content{
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid white;
}

.notebox-container .item{
  position: relative;
  border-bottom: 1px solid white;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
}


.notebox-container .item p{
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}


/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer
}


.notebox-container #remove{
  color: #28B463;
}

Is it possible you're trying to run this from your local drive? Possible duplicate of https://stackoverflow.com/questions/50007055/fetch-request-to-local-file-not-working — Joshua Belden, Nov 18 '21 at 03:30
I gave the style and script file custom names. Dont know why they are not transferring over after the fetch. I can see the div content successfully but the css is not applied nor is the javascript file — night_programmer, Nov 18 '21 at 03:35
the only thing you are fetching is the HTML, if you render that HTML inside your current page it will have access to the current CSS, if that current css includes the styles you need then it will work, you can always use the browser's dev tools and inspect the html and what css is getting applied for each element — arieljuod, Nov 20 '21 at 03:48
If you check your dev tools, you can see it gives the error in the `fetch(htmlUrl)`, file not supported. — , Nov 20 '21 at 04:02
`Does the css and javascript tags not transfer over when they are fetched using the fetch api?` No. — ksav, Nov 20 '21 at 06:08

score 1 · Answer 1 · answered Nov 24 '21 at 14:06

The issue I believe is due to the use of href

href linking is the method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. Whereas importing allows you to import one style sheet into another.

Use:

<style>
@import url(YOUR/FILE/PATH)
</style>

Its good practice to place css files in a subfolder located within the main folder your html is stored. This subfolder is labelled static

e.g. main folder

main folder

index.html

static

style.css

<style>
@import url("static/style.css")
</style>

MD. RAKIB HASAN · Answer 2 · 2021-11-25T10:32:11.967

Load .css from Main Html file will work fine.
var doDo = doc.querySelector('.parent-container') here you load only parent-container div element. No css found on here. so if you want to load css from Second Html file then you should write/load css and javascript inner side of parent-container div. ex:

  <div class="parent-container">
      <link rel="stylesheet" href='style.css'> <!---change here[2]------>
          --------
         -------

If you try this on local machine you may face this error

Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.

Try in on Localhost or on an online server. you may not found this problem.

Main HTML File

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

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="test-sidebar">
    </div>
    <script>
        let testSide = document.querySelector('#test-sidebar');
        let htmlUrl = 'index.html';
        fetch(htmlUrl)
            .then((result) => {
                return result.text()
            }).then((html) => {
                var parser = new DOMParser();
                var doc = parser.parseFromString(html, 'text/html')

                var doDo = doc.querySelector('.parent-container')
                console.log('doc', doDo)
                testSide.appendChild(doDo)
            }).catch((error) => {
                console.log(error)
            })
    </script>
     <link rel="stylesheet" href='style.css'> <!---change here[1]------>
</body>

</html>

Second Html File

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Notbox</title>
  <link rel="stylesheet" href="style.css"> <!-- change here[2] -->
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">
  <link rel="stylesheet" href="style.css"> <!---change here[2]------>
<!---Select items------>
    <div class="container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
        
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" ></textarea>

        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>

  </body>
</html>

Output:

score 0 · Answer 3 · answered Nov 24 '21 at 11:49

Try replacing your fetch code with this:

fetch(htmlUrl)
.then((result)=>{
  return result.text()
})
.then((html)=>{
 var doc = document.createRange().createContextualFragment(template);
 testSide.appendChild(doc);
}).catch((error)=>{
  console.log(error)
})

createContextualFragment renders the Second Html File and load all its scripts

CSS - JavaScript Not Being Implemented

3 Answers3