11484 sujets

JavaScript, DOM et API Web HTML5

Events click & mousemove incompatibles

Bonjour, j'ai essayé de modifier le curseur de ma page. Mais, ceci semble empêcher le début de mon programme de fonctionné. En effet, je ne peux plus modifier la couleur de mes labels lorsque j'applique un style sur mon curseur. Merci d'avance pour votre aide.

Voici mon code Javascript et CSS :
var mouse = document.querySelector(".mouse");
var Montreal = document.querySelector("#op1");
var Ottawa = document.querySelector("#op2");
var Toronto = document.querySelector("#op3");

Montreal.addEventListener("click", () => {
    Montreal.classList.toggle("red-click");
})

Ottawa.addEventListener("click", () => {
    Ottawa.classList.toggle("green-click");
})

Toronto.addEventListener("click", () => {
    Toronto.classList.toggle("red-click");
})

window.addEventListener("mousemove", (e) => {
    mouse.style.left = e.pageX + "px";
    mouse.style.top = e.pageY + "px";
})

window.addEventListener("mousedown", () => {
    mouse.style.transform = "scale(2) translate(-25%, -25%)";
})

window.addEventListener("mouseup", () => {
    mouse.style.transform = "scale(1) translate(-50%, -50%)";
})


* {
  margin: 5px;
}

body {
  text-align: center;
  color: whitesmoke;
  overflow-x: hidden;
}

.quiz {
  background: rgb(57, 60, 67);
  margin: 10px;
  padding: 1px 10px 10px;
  border-radius: 5px;
  padding: 10px 0px 40px;
}

h4 {
  font-size: 1.5rem;
  margin-bottom: 30px;
}

button {
  height: 30px;
  width: 100px;
  border-radius: 5px;
  border: 1px solid transparent;
  margin-bottom: 20px;
}

input[type="radio"] {
  display: none;
}

label {
  background: whitesmoke;
  cursor: pointer;
  border: 1px solid transparent;
  background: whitesmoke;
  padding: 10px;
  border-radius: 5px;
  transition: 0.3s;
  user-select: none;
  color: rgb(57, 60, 67);
}

.red-click {
  background: red;
}

.green-click {
  background: green;
}

.mouse {
  width: 50px;
  height: 50px;
  border: 1px solid rgb(156, 0, 0);
  border-radius: 100%;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 20;
}

Modifié par Yuuno (26 Jul 2021 - 15:46)
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Exercice Javascipt</title>
        <link rel="stylesheet" href="style.css">
        <!-- Le fichier JS doit être lu en dernier : defer = lu en dernier -->
        <script defer src="index.js"></script> 
    </head>
        
    <body>
        <div class="quiz">
            <h4>Quelle est la capitale du Canada ?</h4>
            <input type="radio" id="option1" name="option">
            <label id="op1" for="option1">Montréal</label>

            <input type="radio" id="option2" name="option">
            <label id="op2" for="option2">Ottawa</label>

            <input type="radio" id="option3" name="option">
            <label id="op3" for="option3">Toronto</label>

            <div class="mouse"></div>
        </div>
</html>

Modifié par Yuuno (26 Jul 2021 - 20:32)
Hello

c'est normal, tu as un <div> qui est sans cesse sur ton curseur (classe="mouse") et du coup tu clic UNIQUEMENT sur cette div, et pas sur l’élément visuel que tu penses avoir cliqué.

Cette div est là tout le temps au mouvement de la soucis donc tu clic dessus, et par sur les élements, donc il se passe rien.

il faut revoir ta conception pour les couleurs de ton curseur.
Modifié par JENCAL (30 Jul 2021 - 14:14)
Sujet clos
Aller à