菜单上的事件侦听器无法正常工作，并且控制台错误“无法识别和忽略键“惯性尺度”。”

Question

我有两个问题

1. 我在控制台中弹出一个窗口，提示“无法识别和忽略关键的”惯性尺度”。我发现了与此类似的问题，但没有完全类似的问题，我无法弄清楚。

2. 我有一个汉堡包样式菜单，当我的网站缩小为移动设备时会出现。现在，我只是想检查单击警报时是否关闭警报。我没有任何警报，现在却出现JS错误，任何帮助都很棒。谢谢：）

const nav = document.querySelector('.ham-menu');

nav.addEventListener('click', animateMenu);

function animateMenu() {
	alert('yo');
	const m1 = document.querySelector('.m1');
	const m2 = document.querySelector('.m2');
	const m3 = document.querySelector('.m3');

	for (let i = 1; i < 4; i++) {
		animate(m[i]);
	}

	function animate(bar) {
		bar.style.animationName = bar.id;
		alert(bar.animationName);
	}
	showMenu();
}

html, body {
	margin: 0;
	padding: 0;
}

nav li a {
	text-decoration-line: none;
	color: rgba(102,102,102,0.75);
}

.wrapper2 {
	width: 100%;
	height: 65vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
}

header {
	background-image: url(../img/pexels.jpg);
	background-position: center;
	background-size: cover;
	height: 65vh;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

header h1 {
	color: white;
	margin: 0;
	font-size: 5rem;
	font-family: 'Arvo';
}

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: 0px 0px 100px grey;
}

nav ul {
	margin-right: 30px;
	margin-top: 25px;
}

nav li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
	color: rgba(102,102,102,0.75);
}

nav li a:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {
	color: red;
	font-size: 3.7rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

/*---ABOUT---*/

.history h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.history h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.history h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.history p {
	color: rgba(102,102,102, 0.85);
	font-family: 'Rajdhani';
	font-size: 1.7rem;
	text-align: center;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 35px;
	position: relative;
	top: -20px;
}

/*---SERVICES---*/

.services {
	background-image: url(../img/pour.jpeg);
	background-size: cover;
	background-attachment: fixed;
}

.services .wrapper {
	width: 100%;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
}

.services {
	color: white;
	font-family: 'Arvo';
	font-size: 3rem;
}

.services .content {
	background-color: white;
	width: 100%;
}

.services h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 20px;
	position: relative;
	top: 20px;
}

.services h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.services h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.services .list {
	display: flex;
	padding-bottom: -40px;
}

.move-ul {
	position: relative; 
	top: -45px;
}

.services ul {
	flex-basis: 33.333%;
	color: red;
	font-size: 1.8rem;
	display: inline-block;
	font-family: 'Rajdhani';
	list-style-type: square;
	margin-left: 80px;
	margin-top: 0px;
	margin-bottom: 0;
}

.padding {
	padding-top: 10px;
}

.services p {
	margin: 0;
}

/*---TESTIMONY---*/

.testimony {
	background-image: url('../img/wall4.jpg');
	display: flex;
	justify-content: space-around;
	background-attachment: fixed;
}

.testimony h1 {
	margin-bottom: 20px;
	margin-top: 20px;
	color: white;
	font-family: 'Arvo';
	padding: 30px;
	display: inline-block;
	flex-basis: 40%;
	margin-left: 30px;
}

.testimony span {
	color: white;
	font-size: 2.3rem;
}

.testimony .quote {
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	margin-left: 40px;
}

.testimony .left-quote {
	position: relative; 
	left: 60px; 
	top: 30px
}

.fa-quote-right {
	position: relative;
	right: 35px;
	top: 30px;
}

.testimony .move {
	right: 68px;
}

/*---FOOTER---*/

.footer .wrapper {
	display: flex;
}

.footer div {
	display: inline-block;
	flex-basis: 33.33%;
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 1);
	margin-top: 5px;
}

.footer h1 {
	font-size: 2rem;
	margin-top: 15px;
}

.footer .inner {
	margin-left: 55px;
}

.social .inner {
	margin-left: 45px;
}

.contact .inner {
	margin-left: 35px;
}

.footer .inner:before {
	display: inline-block;
	content: '';
	width: 27.1%;
	height: 2px;
	background-color: rgba(102,102,102, 0.6);
	position: absolute;
	margin-top: 54px;
}

.footer h1 span {
  display: inline;
  position: relative;
}

.footer h1 span:after {
  content: '';
  height: 2px;
  width: 100%;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
}

.wrap:before {
	content: '';
	width: 100px;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: 55px;
}

.links a {
	display: block;
	text-decoration-line: none;
	color: rgba(102,102,102, 1);
	font-size: 1.2rem;
	position: relative;
	top: -10px;
	transition: color 0.4s ease;
}

.links a:hover {
	color: red;
}

.contact p {
	position: relative;
	top: -10px;
}

.social i {
	font-size: 1.7rem;
	margin-right: 5px;
	position: relative;
	top: -20px;
	color: rgba(102,102,102, 0.7);
	transition: all 0.4s ease;
}

.social i:hover {
	color: red;
	cursor: pointer;
}

#msg {
	margin-top: -15px;
}

.footer-textarea {
	background-color: rgba(102,102,102, 0.2);
	outline: none;
	color: rgba(102,102,102, 1);
	resize: none;
	width: 89%;
}

.footer button {
	position: absolute;
	margin-left: 15.85%;
	margin-top: -18px;
	border: none;
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	transition: all ease 0.4s;
	outline: none;
}

button:hover {
	cursor: pointer;
	color: red;
}

.dark {
	color: red;
}

.copyright {
	position: absolute;
	background-color: white;
	text-align: center;
	width: 100%;
	margin-bottom: 0;
	font-size: 1.2rem;
	padding-bottom: 4px;
}



/*-------MEDIA QUERIES-------*/




@media screen and (min-width: 1901px) {
	.footer button {
		margin-left: 14%;
	}
}

/*---LAPTOP-LARGE---*/

@media screen and (max-width: 1440px) {

	/*---FOOTER---*/

	.footer button {
		margin-left: 16.5%;
	}

}

/*---TABLET-LARGE---*/

@media screen and (max-width: 1024px) {

	/*---NAV---*/

	.logo {
		font-size: 5rem;
	}

	nav li {
		font-size: 2.5rem;
	}

	/*---FOOTER---*/
	
	.footer .inner {
		margin-left: 30px;
	}

	.footer-textarea {
		width: 88%;
	}

	.footer button {
		margin-left: 12.25%;
	}
	
	.footer h1 span {
  		display: inline;
  		position: relative;
	}

	.footer h1 span:after {
 		content: '';
  		height: 2px;
  		width: 100%;
		background-color: red;
  		position: absolute;
  		bottom: 0;
  		left: 0;
	}

}

@media screen and (max-width: 823px) {

	/*---MAIN---*/

	header, .wrapper2 {
		height: 100vh;
	}

}

@media screen and (max-width: 812px) {

	/*---NAV---*/

	nav li {
		font-size: 1.7rem;
	}

	.logo {
		font-size: 2.7rem;
	}

	/*---MAIN---*/

	header, .wrapper2 {
		height: 100vh;
	}

	.history p {
		font-size: 1.5rem;
	}

	.services li {
		font-size: 1.5rem;
	}

	.services ul {
		margin-left: 30px;
	}

	.padding {
		padding-top: 0px;
	}

	.testimony h1 {
		font-size: 1.25rem;
	}

	/*---FOOTER---*/

	.footer button {
		margin-left: 8.5%;
	}

	.contact .inner {
		margin-right: 20px;
	}

}

/*---TABLET---*/

@media screen and (max-width: 768px) {

	/*---NAV---*/

	nav li {
		font-size: 1.6rem;
	}

	.logo {
		font-size: 3rem;
	}

	/*---MAIN--*/

	header, .wrapper2 {
		height: 65vh;
	}

	.services ul {
		font-size: 1.5rem;
		margin-left: 30px;
	}

	.padding2 {
		padding-top: 10px;
	}

	.testimony h1 {
		font-size: 1.1rem;
	}


	.testimony .fa-quote-right {
		display: none;
	}

	/*---FOOTER---*/

	.footer .inner {
		margin-left: 30px;
	}

	.footer h1 span {
	  display: inline;
	  position: relative;
	}

	.footer h1 span:after {
	  content: '';
	  height: 2px;
	  width: 100%;
	  background-color: red;
	  position: absolute;
	  bottom: 0;
	  left: 0;
	}

	.footer button {
		margin-left: 7.4%;
	}

	.footer-textarea {
		width: 88.5%;
	}
}

@media screen and (max-width: 731px) {

	/*---MAIN---*/

	header, .wrapper2 {
		height: 100vh;
	}

	/*---FOOTER---*/

	.footer button {
		margin-left: 6%;
	}

	.contact .inner p {
		margin: 5px;
	}

}

/*------LANDSCAPE-MODE-MOBILE------*/

@media screen and (max-width: 715px) {
	
	/*---NAV---*/

	nav ul {
		padding-left: 0;
		margin: 0;
	}

	nav li {
		font-size: 1.4rem;
	}

	nav .logo {
		font-size: 2.5rem;
	}

	/*---MAIN---*/

	header {
		height: 100vh;
	}

	.wrapper2 {
		height: 100vh;
	}

	.history p {
		font-size: 1.5rem;
	}

	.testimony {
		flex-direction: column;
	}

	.testimony h1 {
		margin: 0;
	}

	.move-quote {
		position: relative;
		top: -30px;
	}

	.fa-quote-right {
		position: absolute;
		display: none;
	}

	/*---FOOTER---*/

	.contact .inner {
		margin-right: 15px;
	}

	.footer h1 span {
	  display: inline;
	  position: relative;
	}

	.footer h1 span:after {
	  content: '';
	  height: 2px;
	  width: 100%;
	  background-color: red;
	  position: absolute;
	  bottom: 0;
	  left: 0;
	}

	.contact p {
		margin: 5px;
	}

	.footer-textarea {
		position: relative;
		top: -15px;
	}

	.footer button {
		margin-top: -20px;
		margin-left: 40px;
	}
}

@media screen and (max-width: 586px) {

	/*---MAIN---*/

	header h1 {
		font-size: 3.5rem;
	}

	.services li {
		font-size: 1.3rem;
	}

	.services ul {
		padding: 0;
		margin-left: 50px;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 100vw;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.footer h1 span:after {
	  content: '';
	  height: 2px;
	  width: 100%;
	  background-color: red;
	  position: absolute;
	  bottom: 1px;
	  left: 0;
	}

	.social .inner {
		position: relative;
		top: -10px;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1rem;
		margin-bottom: 0;
		margin-right: 25.5%;
		position: absolute;
		right: 5px;
		top: 80px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 2px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-top: 25px;
		margin-left: 5px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.copyright span {
		color: white;
		background-color: red;
	}

}

@media screen and (max-width: 568px) {

	/*---MAIN---*/

	header h1, .services h1 {
		font-size: 4rem;
	}

	.services li {
		font-size: 1.1rem;
	}

	.services ul {
		margin-left: 10px;
	}

	.padding {
		padding-top: 10px;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 100%;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.footer h1 span:after {
	  content: '';
	  height: 2px;
	  width: 100%;
	  background-color: red;
	  position: absolute;
	  bottom: 1px;
	  left: 0;
	}

	.social .inner {
		position: relative;
		top: -10px;
	}

	.social .inner:before {
		width: 100vw;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1rem;
		margin-bottom: 0;
		margin-right: 25.5%;
		position: absolute;
		right: 5px;
		top: 80px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 2px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-top: 30px;
		margin-left: 5px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
	}

	.copyright span {
		color: white;
		background-color: red;
	}
}

@media screen and (max-width: 517px) {

	/*---NAV---*/

	nav li {
		font-size: 1.1rem;
	}

	/*---MAIN---*/

	header h1 {
		font-size: 3rem;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 100vw;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.social .inner {
		position: relative;
		top: -10px;
	}

	.footer h1 span:after {
	    content: '';
	    height: 2px;
	    width: 100%;
	    background-color: red;
		position: absolute;
	  	bottom: 1px;
		left: 0;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1.3rem;
		margin-bottom: 0;
		float: right;
		margin-right: 25.5%;
		position: relative;
		top: 15px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 7px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-left: 5px;
		margin-top: 0px;
		position: relative;
		top: 10px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
	}

	.copyright span {
		color: white;
		background-color: red;
	}

}

/*---MOBILE---*/

@media screen and (max-width: 425px) {

	/*---NAV---*/

	.logo {
		font-size: 2.5rem;
		margin-left: 10px;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: none;
	}

	.ham-menu {
		width: 55px;
		height: 55px;
		position: fixed;
		right: 0;
		top: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.m1, .m2, .m3 {
		border-radius: 4px;
		margin: 4px;
		width: 35px;
		height: 3px;
		background-color: red;
		float: left;
	}

	/*---MAIN---*/

	header h1 {
		font-size: 3.5rem;
	}

	.history h2 {
		margin-top: 0;
		font-size: 2.5rem;
	}

	.history h2:before, .history h2:after {
		margin-bottom: 11px;
	}

	.history p {
		margin-top: 10px;
		margin-bottom: 5px;
		font-size: 1.5rem;
	}

	.services h1 {
		font-size: 3.5rem;
	}

	.services h2 {
		margin-bottom: 0px;
		top: 5px;
		font-size: 2.5rem;
	}

	.services h2:before, .services h2:after {
		margin-bottom: 11px;
	}

	.move-ul {
		top: 0;
	}

	.padding {
		padding-top: 0px;
		padding-bottom: 20px;
	}

	.services .list {
		flex-direction: column;
	}

	.testimony {
		flex-direction: column;
	}

	.testimony h1 {
		font-size: 1.4rem;
		margin-left: 0;
	}

	.move-quote {
		margin-top: -50px;
	}

	.fa-quote-right {
		left: -100px;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 100vw;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.social .inner {
		position: relative;
		top: -10px;
	}

	.footer h1 span {
	  display: inline;
	  position: relative;
	}

	.footer h1 span:after {
	  content: '';
	  height: 2px;
	  width: 100%;
	  background-color: red;
	  position: absolute;
	  bottom: 1px;
	  left: 0;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1rem;
		margin-bottom: 0;
		margin-right: 25.5%;
		position: absolute;
		right: 5px;
		top: 80px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 2px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-top: 0px;
		margin-left: 5px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
	}

	.copyright span {
		color: white;
		background-color: red;
	}

}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intitial-scale=1.0">
	<title>About | Kane Concrete & Construction</title>
	<link rel="stylesheet" href="../css/about.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
	<header>
		<div class="wrapper2">
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1" id="m1"></div>
						<div class="m2" id="m2"></div>
						<div class="m3" id="m3"></div>
					</div>
					<ul>
						<li class="after"><a href="index.html">Home</a></li>
						<li class="after"><a href="about.html">About</a></li>
						<li class="after"><a href="#services">Services</a></li>
						<li class="after"><a href="careers.html">Careers</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div>
			</nav>
			<h1>About Us</h1>
		</div>
	</header>

	<section class="history" style="background-color: white;">
		<h2>Our History</h2>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea magni suscipit modi sapiente. Perferendis odit, incidunt, amet adipisci, quaerat aperiam, impedit nemo excepturi culpa quis libero nostrum molestiae error eveniet ipsa repellat? Cum quae laudantium totam neque provident fuga rerum quasi dolorum vel obcaecati quidem perspiciatis iure maiores dignissimos, recusandae enim error libero nobis inventore quo adipisci perferendis. Pariatur.</p>
	</section>

	<section class="services" id="services">
		<div class="wrapper">
			<h1>Services</h1>
		</div>

		<div class="content">
			<h2>Our skills</h2>

			<div class="list">
				<ul class="skills move-ul padding2">
					<li><p style="color: rgba(102,102,102, 0.85);">Flatwork</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Paving</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Driveways</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Sidewalks</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Slab Repair</p></li>
				</ul>

				<ul class="skills adjust-height">
					<li><p style="color: rgba(102,102,102, 0.85);">Foundations</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Flooring</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Seismic Retrofit</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Other Concrete Concerns</p></li>
				</ul>

				<ul class="skills move-ul padding">
					<li><p style="color: rgba(102,102,102, 0.85);">Commercial</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Residential</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Decks and Patios</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Kitchen Flooring</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Curb Repair</p></li>
				</ul>
			</div>
		</div>
	</section>

	<section class="testimony">
		<div class="block">
			<span><i class="fas fa-quote-left left-quote"></i></span><h1 class="first-quote">Most companys that I searched charged way too much, until I found Kane. They were fast, cheap, and very professional. I'm happy I chose them and will definitely keep them in mind for any other of my future projects.<span class="quote">-Some Person</span></h1>
		</div>

		<div class="block">
			<span class="move-quote"><i class="fas fa-quote-left left-quote"></i></span><h1 class="move-quote">I was very impressed with their work. They were cost effective and efficient and overall a good team. Saw a lot of synergy with their organization and others they worked with. They definitely know what they're doing.<span class="quote">-Some Person</span></h1>
		</div>
	</section>

	<section class="footer">
		<div class="wrapper">
			<div class="links">
				<div class="inner">
					<h1><span>Quick Links</span></h1>

					<a href="index.html">Home</a>
					<a href="about.html">About</a>
					<a href="about.html#services">Services</a>
					<a href="careers.html">Careers</a>
					<a href="contact.html">Contact</a>
					<a href="contact.html#quote">Quote</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1><span>Social</span></h1>

					<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
					<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
					<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send is some feedback..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1><span>Contact</span></h1>

					<p>(208)546-7827 - <span class="dark">Matt</span></p>
					<p>(208)546-7827 - <span class="dark">Keegan</span></p>
					<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
					<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
				</div>
			</div>
		</div>
		
		<div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
	</section>
	<script src="../script.js"></script>
</body>
</html>

Answer 1

您无法通过for循环引用方法，该方法会将m[i]视为数组m中的第i个索引。您需要以其他方式执行此操作，或者只是手动调用m1，m2，m3。

function animateMenu() {
  alert('yo');
  const m1 = document.querySelector('.m1');
  const m2 = document.querySelector('.m2');
  const m3 = document.querySelector('.m3');

  animate(m1);
  animate(m2);
  animate(m3);

  function animate(bar) {
    bar.style.animationName = bar.id;
    alert(bar.animationName);
  }
  showMenu();
}

这将调用alert（）。带有未定义的含义，也许您的意思是alert(bar.style.animationName)。