Add CSS when clicking Button with Javascript
Question
I have to add a css class with javascript when i click the 'Reservieren' Button. I have found many answers about this on google but I was not able to solve the problem with the answers.
my js.js code:
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>
5 answers
solution1
0 ACCPTED 2020-08-26 09:38:46
Here is the working example:
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>
solution2
0 2020-08-26 09:39:21
Please add this id="court1" to the target element. You were trying to access an element that is not defined
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>
solution3
0 2020-08-26 09:40:56
This can be done using jquery. Html button:
<button id="myBtn"></button>
Jquery:
$("#myBtn").click(
function(){
$("#elementToChangeStyle").css("propertyname","value");
});
Also include jquery in head if you haven't yet,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Here is a turorial: https://www.w3schools.com/jquery/jquery_css.asp
solution4
0 2020-08-26 09:42:18
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>
This is a little other approach compared to yours.
solution5
0 2020-08-26 10:36:50
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
add CSS animation to h1 on clicking a button using JQuery or JavaScript
HTML/CSS/Javascript: Open/Close Menu when Clicking Button
Why is the text value duplicating when clicking on the add button JavaScript
how to add columns automatically when clicking a button using JavaScript
Add CSS to a JavaScript button
Add button after clicking an list in javascript
Change CSS of div when clicking on a button
Append row when clicking corresponding add button
jQuery: Add to html string when clicking on button
Automatic date when clicking the add button
Related Tags