onClick无法以任何方式使用

Question

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

 // 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; } } 

 @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; } 

 <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> 

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

我尝试使用事件侦听器，但也不起作用。

我正在使用devtools，并且add()在控制台中工作。

另外，我需要它褪色。

Answer 1

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

 // 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; } } 

 @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; } 

 <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>