Je dois ajouter une classe css avec javascript lorsque je clique sur le bouton «Reservieren». J'ai trouvé de nombreuses réponses à ce sujet sur google mais je n'ai pas pu résoudre le problème avec les réponses.

Mon code js.js:

function platzReservieren() {
  var court1 = document.getElementById('court1');
  if (court1_ausgewaehlt === true) {
    court1.classList.add('canvas-reservated');
  }
}

function leftClickOnCourt1() {
var court1 = document.getElementById('court1');
if(court1.classList.contains('canvas-reservated')){
    court1_reserviert = true;
}
var context = court1.getContext('2d');
if(court1_reserviert !== true){
    if (court1_ausgewaehlt === false) {
        court1.classList.add('canvas-selected');
        court1_ausgewaehlt = true;
    } else if (court1_ausgewaehlt === true) {
        court1.classList.remove('canvas-selected');
        court1_ausgewaehlt = false;
    }
}
}
<button class="btn btn-secondary " style="height: 50%; margin: 1% 0 0 0;" type="submit" name="reservieren" onclick="platzReservieren()" value="Reservieren">Reservieren</button>

<div class="row" id="courts">
        <div class="col-4">
            <h3>Platz 1</h3>
            <canvas id="court1" class="canvas" width="300" height="350" onclick="leftClickOnCourt1()"></canvas>
        </div>
        <div class="col-4">
            <h3>Platz 2</h3>
            <canvas id="court2" class="canvas" width="300" height="350" onclick="leftClickOnCourt2()"></canvas>
        </div>
        <div class="col-4">
            <h3>Platz 3</h3>
            <canvas id="court3" class="canvas" width="300" height="350" onclick="leftClickOnCourt3()"></canvas>
        </div>
    </div>
-1
Paphill 26 août 2020 à 12:28

5 réponses

Meilleure réponse

Voici l'exemple de travail:

function platzReservieren() {
  var court1 = document.querySelector('button');
  if (court1) {
    court1.classList.add('canvas-reservated');
  }
}
.canvas-reservated {
  background-color: #ff0000;
}
<button class="btn btn-secondary " style="height: 50%; margin: 1% 0 0 0;" type="submit" name="reservieren" onclick="platzReservieren()" value="Reservieren">Reservieren</button>
0
Yogendra Chauhan 26 août 2020 à 09:38
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
         .btn {
         height: 50%;
         margin: 1% 0 0 0;
         }
         .canvas-reservated {
         background-color: lightgreen;
         }
      </style>
   </head>
   <body>
      <button class="btn btn-secondary " type="submit" name="reservieren" value="Reservieren">Reservieren</button>
      <div class="row" id="courts">
         <div class="col-4">
            <h3>Platz 1</h3>
            <canvas id="court1" class="canvas" width="300" height="350" onclick="leftClickOnCourt1()"></canvas>
         </div>
         <div class="col-4">
            <h3>Platz 2</h3>
            <canvas id="court2" class="canvas" width="300" height="350" onclick="leftClickOnCourt2()"></canvas>
         </div>
         <div class="col-4">
            <h3>Platz 3</h3>
            <canvas id="court3" class="canvas" width="300" height="350" onclick="leftClickOnCourt3()"></canvas>
         </div>
      </div>
      <script>
         const btn = document.querySelector('button');
         
         btn.addEventListener('click', function () {
             var court1 = document.getElementById('court1');
             court1.classList.add('canvas-reservated');
         });
         
      </script>
   </body>
</html>
0
Yogendra Chauhan 26 août 2020 à 11:58
const btn = document.querySelector('#reservation');
btn.addEventListener('click', () => {
  btn.classList.toggle('red');
});
.red {
  background: red;
}
<button id="reservation" class="btn btn-secondary" style="height: 50%; margin: 1% 0 0 0;" type="submit" name="reservieren" value="Reservieren">Reservieren</button>

C'est une petite approche différente de la vôtre.

0
FaltFe 26 août 2020 à 09:42

Cela peut être fait en utilisant jquery. Bouton HTML:

<button id="myBtn"></button>

Jquery:

$("#myBtn").click(
function(){
$("#elementToChangeStyle").css("propertyname","value");
});

Incluez également jquery dans la tête si vous ne l'avez pas encore fait,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Voici un turorial: https://www.w3schools.com/jquery/jquery_css.asp

0
Kavindu Pasan Kavithilaka 26 août 2020 à 09:40

Veuillez ajouter ce id="court1" à l'élément cible. Vous tentiez d'accéder à un élément non défini

function platzReservieren() {
  var court1_ausgewaehlt = true
    var court1 = document.getElementById('court1');
    if (court1_ausgewaehlt === true) {
        court1.classList.add('canvas-reservated');
    }
}
.canvas-reservated{
color:red
}
   
<button id="court1" class="btn btn-secondary " style="height: 50%; margin: 1% 0 0 0;" type="submit" name="reservieren" onclick="platzReservieren()" value="Reservieren">Reservieren</button>
0
Friday Ameh 26 août 2020 à 09:39