我在哪里错了-JAVASCRIPT
[英]Where Am I Going Wrong Here - JAVASCRIPT
问题描述
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. 从本质上讲，HTML结尾的脚本应该在鼠标悬停并再次移开时更改“标题”和“页脚”的颜色，但是由于我不知道的某些原因，这仅适用于“标题”而不适用于“页脚”。
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 汤米·沃尔什（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. 我第一次使用getElementById，但仍然没有借口可能会浪费这么多琐碎的时间。
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 个解决方案
解决方案1
3 已采纳 2017-08-23 22:32:21
It's because you have no id of footer in your html. 这是因为您的html中没有footer ID。 Change <footer> to <footer id="footer"> and your problem is solved. 将<footer>更改为<footer id="footer"> ，即可解决问题。
Also - you should look into the css pseudo-class of :hover - it makes this a lot easier! 另外-您应该查看:hover的css伪类-这使此操作变得容易得多！
解决方案2
2 2017-08-23 22:32:09
Get element by ID. 通过ID获取元素。 You footer has no ID. 您的页脚没有ID。
解决方案3
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 . 尝试选择页脚的方式存在缺陷，因为您使用的是getElementById方法，但是页脚没有id 。 You have 2 options: 您有2个选择：
- Add an
idto the footer tag, likeid="footer"- this is the easiest considering what you have already done.在页脚标记中添加一个id，例如id="footer"-考虑到您已经完成的操作，这是最简单的方法。 - Change the Javascript to use the
getElementsByTagNamemethod.更改Javascript以使用getElementsByTagName方法。 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]请记住，这将返回一个Node列表，这意味着您必须在该节点列表中选择第一个元素（索引0），如下所示： document.getElementsByTagName('footer')[0]
解决方案4
0 2017-08-24 00:36:00
document.querySelector() will return the first element that matches the given selector. document.querySelector()将返回与给定选择器匹配的第一个元素。
If you use document.querySelector() instead of document.getElementById() like this: 如果您使用document.querySelector()代替document.getElementById()像这样：
document.querySelector('footer').onmouseenter = function() {...}
you will not have to modify your HTML. 您将无需修改HTML。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.