javascript - 使用 Javascript 单击按钮时添加 CSS

Question

当我单击“Reservieren”按钮时，我必须使用 javascript 添加一个 css 类。我在谷歌上找到了很多关于这个的答案，但我无法用答案解决问题。

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

标签： javascript

Answer 1

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>

与您的方法相比，这是另一种方法。