[英]Add CSS when clicking Button with Javascript
当我单击“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>
这是工作示例：
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>
请将此id="court1"添加到目标元素。 您试图访问未定义的元素
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>
这可以使用 jquery 来完成。 html按钮：
<button id="myBtn"></button>
查询：
$("#myBtn").click(
function(){
$("#elementToChangeStyle").css("propertyname","value");
});
如果你还没有，还包括 jquery，
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
这是一个 turorial： https ://www.w3schools.com/jquery/jquery_css.asp
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>
与您的方法相比，这是另一种方法。
<!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>
添加 CSS animation 到 h1 使用 JQuery 或 Z686155AF75A60AED7F6E9D80CF1 单击按钮
[英]add CSS animation to h1 on clicking a button using JQuery or JavaScript
为什么单击添加按钮时文本值重复 JavaScript
[英]Why is the text value duplicating when clicking on the add button JavaScript
如何使用JavaScript单击按钮时自动添加列
[英]how to add columns automatically when clicking a button using JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.