onClick没有以任何方式使用它

时间：2017-10-09 23:51:55

标签： javascript css html5 dom

问题是onClick没有激活该功能。以下是我的代码。 quickPlay()用于淡出第一个屏幕：

＆＃13;
＆＃13; 
// Set up the variables

var playGradient = ["linear-gradient(135deg, #ff3b3b 0%, #ff8225 100%)",
					"linear-gradient(135deg, #edb052 0%, #ffe300 100%)",
				    "linear-gradient(135deg, #b7ed52 0%, #00ffad 100%)",
				    "linear-gradient(135deg, #52edcc 0%, #00fffe 100%)",
					"linear-gradient(135deg, #52aced 0%, #007aff 100%)",
					"linear-gradient(135deg, #8052ed 0%, #b600ff 100%)",
					"linear-gradient(135deg, #ed52e3 0%, #ff004d 100%)"];

var score = 0;

var level = 1;

var levelUp = [10, 50, 100, 500, 1000, 5000, 10000, 50000, 100000, 500000, 1000000, 5000000];

// Start Quick Play when the button is pressed

function quickPlay() {
	document.querySelector(".mainscreen").style.opacity = 0;
	score = 0;
	level = 0;
}
function add() {
	score = score + level;
	document.querySelector(".score").innerText = score;
	if (score == levelUp[level - 1]) {
		level++;
		document.querySelector(".add").innerText = "+" + level;
	}
}
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
	font-family: "Montserrat", Arial, Sans-Serif;
}
.load {
	background-color: #34c6d2;
    background-image: linear-gradient(135deg, #34c6d2 0%, #6284FF 100%);
    width: 100%;
	height: 85%;
	top: 0;
	left: 0;
	position: fixed;
	color: white;
	z-index: 2;
	box-shadow: 0 15px 32px 0 rgba(0,0,0,0.2);
}
.load-header-big {
    font-size: 100px;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -85%);
}
.load-header-not-big {
	font-size: 15px;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
	text-align: center;
}
.quickplay {
	background-color: #ffffff;
	width: 100%;
	height: 15%;
	bottom: 0;
	left: 0;
	position: fixed;
	color: black;
	z-index: 1;
	box-shadow: 0 15px 32px 0 rgba(0,0,0,0.2);
}
.quickplay-title {
	font-size: 20px;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	color: white;
	border-radius: 50px;
	box-shadow: 0 15px 32px 0 rgba(0,0,0,0.2);
	background-color: #6284FF;
	background-image: linear-gradient(135deg, #6284FF 0%, #8934d2 100%);
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
.mainscreen {
	transition: all 100ms linear;
	display: block;
	z-index: 2;
	position: fixed;
}
.play {
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: #ffffff;
}
.score-box {
	width: 100%;
	height: 75%;
	top: 0;
	left: 0;
	position: fixed;
	color: black;
}
.score {
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	color: #000000;
	font-size: 150px;
}
.add-box {
	width: 100%;
	height: 25%;
	bottom: 0;
	left: 0;
	position: fixed;
	color: white;
	background-image: linear-gradient(135deg, #ff3b3b 0%, #ff8225 100%);
}
.add {
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	color: #ffffff;
	font-size: 75px;
}
＆＃13; 
<div class="mainscreen">
	<div class="load">
		<div class="load-header"><h1 class="load-header-big">Press</h1><i class="load-header-not-big">This is a waste of your time.</i></div>
	</div>
	<div class="quickplay" onClick="quickPlay()">
		<h1 class="quickplay-title">QUICK PLAY</h1>
	</div>
	</div>
	<div class="play">
		<div class="score-box">
			<h1 class="score">0</h1>
		</div>
		<div class="add-box" onClick="add()">
			<h1 class="add">+1</h1>
		</div>
	</div>
＆＃13;
＆＃13;
＆＃13;

每当您按下按钮时，它应该触发add()但不执行任何操作。

我尝试使用事件监听器，但也没有。

我在控制台中使用了devtools和add()。

另外，我需要它褪色。

1 个答案:

答案 0 :(得分：1)

回答@ Phil的评论，但这里是更新版本（只需使用display:none）：

＆＃13;
＆＃13; 
// Set up the variables

var playGradient = ["linear-gradient(135deg, #ff3b3b 0%, #ff8225 100%)",
					"linear-gradient(135deg, #edb052 0%, #ffe300 100%)",
				    "linear-gradient(135deg, #b7ed52 0%, #00ffad 100%)",
				    "linear-gradient(135deg, #52edcc 0%, #00fffe 100%)",
					"linear-gradient(135deg, #52aced 0%, #007aff 100%)",
					"linear-gradient(135deg, #8052ed 0%, #b600ff 100%)",
					"linear-gradient(135deg, #ed52e3 0%, #ff004d 100%)"];

var score = 0;

var level = 1;

var levelUp = [10, 50, 100, 500, 1000, 5000, 10000, 50000, 100000, 500000, 1000000, 5000000];

// Start Quick Play when the button is pressed

function quickPlay() {

	document.querySelector(".mainscreen").style.display = 'none';
	score = 0;
	level = 1;
}
function add() {
	score = score + level;
	document.querySelector(".score").innerText = score;
	if (score == levelUp[level - 1]) {
		level++;
		document.querySelector(".add").innerText = "+" + level;
	}
}
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
	font-family: "Montserrat", Arial, Sans-Serif;
}
.load {
	background-color: #34c6d2;
    background-image: linear-gradient(135deg, #34c6d2 0%, #6284FF 100%);
    width: 100%;
	height: 85%;
	top: 0;
	left: 0;
	position: fixed;
	color: white;
	z-index: 2;
	box-shadow: 0 15px 32px 0 rgba(0,0,0,0.2);
}
.load-header-big {
    font-size: 100px;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -85%);
}
.load-header-not-big {
	font-size: 15px;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
	text-align: center;
}
.quickplay {
	background-color: #ffffff;
	width: 100%;
	height: 15%;
	bottom: 0;
	left: 0;
	position: fixed;
	color: black;
	z-index: 1;
	box-shadow: 0 15px 32px 0 rgba(0,0,0,0.2);
}
.quickplay-title {
	font-size: 20px;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	color: white;
	border-radius: 50px;
	box-shadow: 0 15px 32px 0 rgba(0,0,0,0.2);
	background-color: #6284FF;
	background-image: linear-gradient(135deg, #6284FF 0%, #8934d2 100%);
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
.mainscreen {
	transition: all 100ms linear;
	display: block;
	z-index: 2;
	position: fixed;
}
.play {
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: #ffffff;
}
.score-box {
	width: 100%;
	height: 75%;
	top: 0;
	left: 0;
	position: fixed;
	color: black;
}
.score {
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	color: #000000;
	font-size: 150px;
}
.add-box {
	width: 100%;
	height: 25%;
	bottom: 0;
	left: 0;
	position: fixed;
	color: white;
	background-image: linear-gradient(135deg, #ff3b3b 0%, #ff8225 100%);
}
.add {
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	color: #ffffff;
	font-size: 75px;
}
＆＃13; 
<div class="mainscreen">
	<div class="load">
		<div class="load-header"><h1 class="load-header-big">Press</h1><i class="load-header-not-big">This is a waste of your time.</i></div>
	</div>
	<div class="quickplay" onClick="quickPlay()">
		<h1 class="quickplay-title">QUICK PLAY</h1>
	</div>
	</div>
	<div class="play">
		<div class="score-box">
			<h1 class="score">0</h1>
		</div>
		<div class="add-box" onClick="add()">
			<h1 class="add">+1</h1>
		</div>
	</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题