I am new to the world of web development and recently created a sample webpage. The page consists of an HTML file, a CSS file, and a JavaScript file. However, I encountered an issue where linking the JavaScript file to the HTML page caused the CSS formatting to be removed. This problem only occurs after adding the JS link, and everything works fine when the link is removed. I am using Windows XP SP3 and the latest version of Google Chrome. Could this be a browser-related problem?
Below are the excerpts from my code:
HTML
<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body>
<div>
<ul id="nav">
<li id="click" <a href="#">Contact</a></li>
<li <a href="#">Blog</a></li>
<li <a href="#">Work</a></li>
<li <a href="#">About</a></li>
<li <a href="#">Home</a></li>
</ul>
</div>
</body>
</html>
Javascript
var list = document.getElementById("nav")
list.addEventListener("click", function(event) {
switch(event.target.id) {
case "click":
document.title="I changed the document title";
break;
}, false);
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: left;
text-align: center;
display: inline;
}
#nav li a {
line-height: 40px;
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}