我在哪里错了-JAVASCRIPT
[英]Where Am I Going Wrong Here - JAVASCRIPT
问题描述
我最近参加了一个微不足道的在线编码挑战赛，并且由于我是一个完整的新手，因此非常感谢您使用以下代码对此问题提供一些指导。
从本质上讲，HTML结尾的脚本应该在鼠标悬停并再次移开时更改“标题”和“页脚”的颜色，但是由于我不知道的某些原因，这仅适用于“标题”而不适用于“页脚”。
我喜欢麻烦解决，发现几个小时的搜索通常可以找到所需的答案，但是我根本无法在这里找出错误。
我将永远感激任何能为我指出正确方向的编码人员。
非常感谢
汤米·沃尔什（Tommy Walsh）
更新：我了解在提出这个问题之前，我似乎没有进行足够的研究，但是相信我，我花了数小时来查看代码。 我第一次使用getElementById，但仍然没有借口可能会浪费这么多琐碎的时间。
我会在进一步询问之前进一步研究，
谢谢所有受访者
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
这是因为您的html中没有footer ID。 将<footer>更改为<footer id="footer"> ，即可解决问题。
另外-您应该查看:hover的css伪类-这使此操作变得容易得多！
解决方案2
2 2017-08-23 22:32:09
通过ID获取元素。 您的页脚没有ID。
解决方案3
1 2017-08-23 22:33:44
尝试选择页脚的方式存在缺陷，因为您使用的是getElementById方法，但是页脚没有id 。 您有2个选择：
- 在页脚标记中添加一个
id，例如id="footer"-考虑到您已经完成的操作，这是最简单的方法。 - 更改Javascript以使用
getElementsByTagName方法。 请记住，这将返回一个Node列表，这意味着您必须在该节点列表中选择第一个元素（索引0），如下所示：document.getElementsByTagName('footer')[0]
解决方案4
0 2017-08-24 00:36:00
document.querySelector()将返回与给定选择器匹配的第一个元素。
如果您使用document.querySelector()代替document.getElementById()像这样：
document.querySelector('footer').onmouseenter = function() {...}
您将无需修改HTML。
HTML 文档中的 Javascript 函数，我哪里出错了？
[英]Javascript function inside HTML document, where am I going wrong?
我在这里的数学哪里出了问题，试图从日期时间中提取正确的时间？
[英]Where am I going wrong with my math here to try and extract the correct hours from a date time?
我要改变颜色 <div> 在mouseOver函数上的javascript中。我在哪里出错？
[英]I'm to change color of <div> in javascript on mouseOver function.Where am i going wrong?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.