Update: After a couple more hours of trial and error I finally got a useful error message from google chrome when I tried to load the css file referring to it as “file:///{directory for css file}” chrome console told me that it “wasn’t allowed to load local resources”. With this new found information I uploaded my CSS to a webserver and referred to the URL that the CSS file is located and now my window has CSS.
Solution 1 :
Problem :
I’m trying to create a subwindow where users can see lists they make, unfortunately the list elements aren’t being stylized and I’m at a loss as to why that’s the case. I create the window as follows: windowName.document.body.innerHTML = '<html> <head> <link rel="stylesheet" type="text/css" href="list.css"> </head> <ul id = "searchSuggestions"> </ul></html>'. I create the list items in javascript using:
let a = windowName.document.createElement("a");
a.textContent=movieTitle
a.setAttribute('href','#');
let listItem = windowName.document.createElement("li")
listItem.appendChild(a)
suggestionList.appendChild(listItem);
The problem is that when these elements show up on the page they don’t follow any of the formatting in the “list.css” file.
Here is the list CSS file I’m trying to use:
#searchSuggestions {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
}
#searchSuggestions li a {
border: 1px solid #ddd; /* Add a border to all links */
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove default text underline */
font-size: 18px; /* Increase the font-size */
color: black; /* Add a black text color */
display: block; /* Make it into a block element to fill the whole list */
}
#searchSuggestions li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
The final HTML of the window (using f12) is as follows:
<html>
<head><link rel="stylesheet" type="text/css" href="list.css"></head>
<body>
<div style="text-align: center;">
<h1 id="listTitle">new</h1>
<input id="searchBar" type="text" placeholder="Search..">
<button id="addBtn">Add</button>
<ul id="searchSuggestions">
<li><a href="#">Toy Story</a></li>
<li><a href="#">Toy Story 4</a></li>
<li><a href="#">Toy Story 2</a></li>
</ul>
</div>
</body>
</html>
My question is how do I make it so that my listItems are stylized?