Where Am I Going Wrong Here - JAVASCRIPT
Question
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>
4 answers
solution1
3 ACCPTED 2017-08-23 22:32:21
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!
solution2
2 2017-08-23 22:32:09
Get element by ID. You footer has no ID.
solution3
1 2017-08-23 22:33:44
The way you are attempting to select the footer is flawed, because you're using the getElementById method, but the footer has no id . You have 2 options:
- Add an
idto the footer tag, likeid="footer"- this is the easiest considering what you have already done. - Change the Javascript to use the
getElementsByTagNamemethod. Bear in mind this returns a Node list, which means you then have to choose the first element (index 0) in that node list, like so:document.getElementsByTagName('footer')[0]
solution4
0 2017-08-24 00:36:00
document.querySelector() will return the first element that matches the given selector.
If you use document.querySelector() instead of document.getElementById() like this:
document.querySelector('footer').onmouseenter = function() {...}
you will not have to modify your HTML.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.