I have recently taken part in a wee online Coding Challenge and as I am a complete novice starting out would greatly appreciate a little guidance on this issue I have with the below code.
Essentially the Script that the HTML ends with is supposed to change the color of the Title and the Footer when the mouse hovers over and moves away again but for some reason unbeknownst to me this will only work with the Title and not with the Footer.
I love to trouble shoot and have found a few hours searching generally gets the answers needed but I simply cannot figure out my error here.
I would be eternally grateful to any kind coder who could point me in the correct direction on this.
Many many thanks in advance
Tommy Walsh
UPDATE: I understand it may appear that I did not research enough before asking this question but trust me I spent hours looking over the code. My first time using getElementById but still no excuse for potentially wasting your time with something so menial.
I will research further before asking in future,
MAny thanks to all respondents
header, aside, article, footer{
color: black;
float:left;
padding-left: 15px;
padding-right: 15px;
}
#container {
font-family: helvetica;
background-color: #ffffff;
width: 960px;
height: 500px;
margin: 0 auto;
}
header {
background-color: green;
width: calc(100% - 30px);
}
aside {
background-color: yellow;
clear:left;
width: calc(20% - 30px);
}
article {
background-color:blue;
width: calc(80% - 30px);
height: 400px;
}
footer{
background-color:red;
width: 100%;
width: calc(100% - 30px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Day 5 JavaScript</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header id="title">
<h1>My Page Title</h1>
</header>
<aside>
<p>Migas shabby chic bitters keytar occupy kinfolk. Pug gochujang heirloom cornhole sustainable single-origin coffee crucifix organic fashion axe, tumeric polaroid trust fund vegan tattooed.
</p>
</aside>
<article>
<h2>My Article Header</h2>
<p> Pop-up fashion axe iPhone, tumblr put a bird on it lumberjack sartorial. Keytar coloring book plaid, marfa unicorn gluten-free affogato gastropub synth. Quinoa before they sold out sustainable, kinfolk bicycle rights XOXO yuccie craft beer cred asymmetrical hell of synth. Portland messenger bag aesthetic, kinfolk kogi try-hard cardigan. Raclette venmo forage disrupt cred bitters. Mustache sustainable XOXO, williamsburg meditation wayfarers distillery thundercats unicorn truffaut occupy twee four dollar toast irony. Green juice tumeric la croix thundercats scenester af
</p>
</article>
<footer>
<p> Footer content in here</p>
</footer>
</div>
<script> document.getElementById('title').onmouseenter = function() { this.style.backgroundColor = 'purple'; }; document.getElementById('title').onmouseleave = function() { this.style.backgroundColor = 'green'; }; </script>
<script> document.getElementById('footer').onmouseenter = function() { this.style.backgroundColor = 'purple'; }; document.getElementById('footer').onmouseleave = function() { this.style.backgroundColor = 'green'; }; </script>
</body>
</html>
It's because you have no id of footer
in your html. Change <footer>
to <footer id="footer">
and your problem is solved.
Also - you should look into the css pseudo-class of :hover
- it makes this a lot easier!