时间戳

首页 > 解决方案 > 为什么我必须单击两次按钮才能显示文本？

javascript - 为什么我必须单击两次按钮才能显示文本？

问题描述

我有两个按钮，在使用 vanilla JavaScript 单击时显示和隐藏文本。只有在第一次加载页面时，您才需要单击按钮两次。否则，它无需第二次单击即可工作。为什么是这样？我对编程很陌生，希望得到解释。我试图寻找答案来指导我，但我还没有找到任何有帮助的东西。

var $ = function (id) {
	"use strict";
	return window.document.getElementById(id);
};

function hideShowCommuniTea() {
	"use strict";
	if ($('communiteaText').style.display === 'none') {
		$('communiteaText').style.display = 'block';

	} else {
		$('communiteaText').style.display = 'none';

	}
}

function hideShowBenefits() {
	"use strict";
	if ($('moreBenefits').style.display === 'none') {
		$('moreBenefits').style.display = 'block';
	} else {
		$('moreBenefits').style.display = 'none';

	}
}


//HANDLES ALL EVENT LISTENERS
function init() {
	"use strict";
	$('benefitsButton').addEventListener('click', hideShowBenefits);
	$('communitea').addEventListener('click', hideShowCommuniTea);

}
window.addEventListener('load', init);
body{
  font-family: "roboto", sans-serif;
  font-size: 1em;
  width: 100%;
}
nav{
  background-color: teal;
  width: auto;
  height: 50px;

  
}
nav ul{
  list-style: none;
}
li{
  float: left;
  padding: 1em;
  
}
a{
text-decoration: none;
color: white;
}
nav ul li a:hover{
	color: hotpink;
}
header{
  clear: both;
  text-align: center;
  background-color: hotpink;
  border-top: 3px solid #B0FFB0;
  border-bottom: 3px solid #B0FFB0;

}
h1{
color: white;
}
section{
	width: 960px;
	margin: 0 auto;
}

article{
  width: 47%;
  float: left;
  padding: 0 10px 0 10px;
  
}
article p{
	  line-height: 2em;
}
button{
	margin-bottom: 20px;
}
#moreBenefits, #communiteaText{
	display: none;
}
footer{
  clear: both;
  background-color: teal;
  height: 50px;

}
footer p{
  text-align: center;
  padding: 1em;
	color: white;
}
<!DOCTYPE html>
<html lang="en">
 <head>
	<link href="styles/styles.css" rel="stylesheet">
	
</head>

<body>
	<nav>
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="../pages/shop.html">Shop</a></li>
			<li><a href="../pages/about.html">About</a></li>
			<li><a href="../pages/contact.html">Contact</a></li>
		</ul>
	</nav>
	<header>
		<h1>Welcome to the Tea Shop!</h1>
	</header>
	<section>
		<article>
			<h2>Benefits of Tea</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<button id="benefitsButton">Full Benefits</button>
			<p id="moreBenefits">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</article>
		<article>
			<h2>Why Choose Us</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<button id="communitea">CommuniTea</button>
			<p id="communiteaText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</article>
	</section>
	<footer>
		<p>Copyright &copy; 2019 - All Rights Researved.</p>
	</footer>
	<script src="js/script.js"></script>
</body>
</html>

标签： javascripthtmlcssdomdom-manipulation

解决方案

推荐阅读