Question

我最近参加了一个在线编码挑战赛，因为我是一个完整的新手，我将非常感谢我对这个问题的一些指导。我有以下代码。

基本上，HTML结尾的脚本应该在鼠标悬停并且再次移开时改变标题和页脚的颜色但是由于某种原因我不知道这只会与标题一起使用而不是与页脚。

我喜欢麻烦拍摄并且发现几个小时的搜索通常会得到所需的答案，但我根本无法弄清楚我的错误。

我会永远感激任何一位能指出我正确方向的编码员。

许多人提前感谢

汤米沃尔什

更新：我理解在问这个问题之前我似乎没有足够的研究但是相信我花了好几个小时查看代码。我第一次使用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>

Answer 1

这是因为你的html中没有footer的id。将<footer>更改为<footer id="footer">，您的问题就解决了。

另外 - 你应该查看:hover的css伪类 - 它使这更容易！

Answer 2

按ID获取元素。你的页脚没有ID。

Answer 3

您尝试选择页脚的方式存在缺陷，因为您使用的是getElementById方法，但页脚没有id。您有两个选择：

在页脚标记中添加id，例如id="footer" - 考虑到您已经完成的操作，这是最简单的。
更改Javascript以使用getElementsByTagName方法。请记住，这会返回一个Node列表，这意味着您必须在该节点列表中选择第一个元素（索引0），如下所示：document.getElementsByTagName('footer')[0]

Answer 4

document.querySelector()将返回与给定选择器匹配的第一个元素。

如果您使用document.querySelector()代替document.getElementById()，请执行以下操作：

document.querySelector('footer').onmouseenter = function() {...}

您无需修改HTML。

我在哪里错了 - JAVASCRIPT

4 个答案: