0
Le problème est que onClick ne pas activer la fonction. Voici mon code. quickPlay() est pour la décoloration le premier écran à distance:onClick ne fonctionne pas comme je l'utilise
// Set up the variables
var playGradient = ["linear-gradient(135deg, #ff3b3b 0%, #ff8225 100%)",
\t \t \t \t \t "linear-gradient(135deg, #edb052 0%, #ffe300 100%)",
\t \t \t \t "linear-gradient(135deg, #b7ed52 0%, #00ffad 100%)",
\t \t \t \t "linear-gradient(135deg, #52edcc 0%, #00fffe 100%)",
\t \t \t \t \t "linear-gradient(135deg, #52aced 0%, #007aff 100%)",
\t \t \t \t \t "linear-gradient(135deg, #8052ed 0%, #b600ff 100%)",
\t \t \t \t \t "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() {
\t document.querySelector(".mainscreen").style.opacity = 0;
\t score = 0;
\t level = 0;
}
function add() {
\t score = score + level;
\t document.querySelector(".score").innerText = score;
\t if (score == levelUp[level - 1]) {
\t \t level++;
\t \t document.querySelector(".add").innerText = "+" + level;
\t }
}@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
\t font-family: "Montserrat", Arial, Sans-Serif;
}
.load {
\t background-color: #34c6d2;
background-image: linear-gradient(135deg, #34c6d2 0%, #6284FF 100%);
width: 100%;
\t height: 85%;
\t top: 0;
\t left: 0;
\t position: fixed;
\t color: white;
\t z-index: 2;
\t box-shadow: 0 15px 32px 0 rgba(0,0,0,0.2);
}
.load-header-big {
font-size: 100px;
\t margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -85%);
}
.load-header-not-big {
\t font-size: 15px;
\t margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
\t text-align: center;
}
.quickplay {
\t background-color: #ffffff;
\t width: 100%;
\t height: 15%;
\t bottom: 0;
\t left: 0;
\t position: fixed;
\t color: black;
\t z-index: 1;
\t box-shadow: 0 15px 32px 0 rgba(0,0,0,0.2);
}
.quickplay-title {
\t font-size: 20px;
\t margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
\t text-align: center;
\t padding: 10px;
\t padding-left: 15px;
\t padding-right: 15px;
\t color: white;
\t border-radius: 50px;
\t box-shadow: 0 15px 32px 0 rgba(0,0,0,0.2);
\t background-color: #6284FF;
\t background-image: linear-gradient(135deg, #6284FF 0%, #8934d2 100%);
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
.mainscreen {
\t transition: all 100ms linear;
\t display: block;
\t z-index: 2;
\t position: fixed;
}
.play {
\t top: 0;
\t left: 0;
\t position: fixed;
\t width: 100%;
\t height: 100%;
\t z-index: 0;
\t background: #ffffff;
}
.score-box {
\t width: 100%;
\t height: 75%;
\t top: 0;
\t left: 0;
\t position: fixed;
\t color: black;
}
.score {
\t margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
\t text-align: center;
\t padding: 10px;
\t padding-left: 15px;
\t padding-right: 15px;
\t color: #000000;
\t font-size: 150px;
}
.add-box {
\t width: 100%;
\t height: 25%;
\t bottom: 0;
\t left: 0;
\t position: fixed;
\t color: white;
\t background-image: linear-gradient(135deg, #ff3b3b 0%, #ff8225 100%);
}
.add {
\t margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
\t text-align: center;
\t padding: 10px;
\t padding-left: 15px;
\t padding-right: 15px;
\t color: #ffffff;
\t font-size: 75px;
}<div class="mainscreen">
\t <div class="load">
\t \t <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>
\t </div>
\t <div class="quickplay" onClick="quickPlay()">
\t \t <h1 class="quickplay-title">QUICK PLAY</h1>
\t </div>
\t </div>
\t <div class="play">
\t \t <div class="score-box">
\t \t \t <h1 class="score">0</h1>
\t \t </div>
\t \t <div class="add-box" onClick="add()">
\t \t \t <h1 class="add">+1</h1>
\t \t </div>
\t </div>Chaque fois que vous appuyez sur le bouton, il est censé déclencher add() mais ne fait rien.
J'ai essayé d'utiliser un écouteur d'événement et cela n'a pas fonctionné non plus.
J'utilisais devtools et add() fonctionne dans la console.
De plus, j'en ai besoin pour s'estomper.
Je ne vois pas où ni comment est 'score' ou' variables level' en augmentant en valeur, ils restent toujours 0 une fois que vous déclenchez la fonction 'quickPlay()' – Lixus
Votre élément '.play' semble être enterré sous les éléments invisibles' .load' et 'quickplay' donc il ne reçoit aucun évènement click – Phil
^exactement cela, changez 'document.querySelector (". mainscreen "). style.opa city = 0; 'à' document.querySelector (". mainscreen"). style.display = 'none'; 'et cela fonctionne. – vittore