单击按钮时更改按钮的颜色 flask js html

Question

我有一个按钮 ON/OFF，当我单击它以将其打开时，我希望该按钮变为绿色，而当我单击它以将其关闭时，我希望该按钮变为红色。

我正在使用 Flask Python HTML Javascript

这是我在 html 中的按钮行：

<input onclick="changeColor()" type="submit" name="drive_state" id="onoffbutton" value={{drive_state}}>

值 {{drive_state}} 在 python 文件中编码。此按钮的值是“开”或“关”。

所以，我创建了这个 javascript file:

function changeColor() {
    if (document.getElementById("onoffbutton").value == 'On') {
        document.getElementById("onoffbutton").style.backgroundColor = '#3DCE65';
    }else {
        document.getElementById("onoffbutton").style.backgroundColor = '#CF1823';
    }    
}

但是每当我点击 ON/OFF 按钮时，我都会收到以下错误消息：浏览器（或代理）发送了该服务器无法理解的请求。

Answer 1

Css 按钮并在按钮内创建事件

.mystyle {
 background-color: red;
  border-radius: 8px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}
button {
  background-color: #4CAF50;
  border-radius: 8px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>



<button id="button" onclick="myFunction()">ON/OFF</button>



<script>
function myFunction() {
   var element = document.getElementById("button");
   element.classList.toggle("mystyle");
}
</script>

</body>
</html>

单击按钮时更改按钮的颜色 flask js html

Change the color of a button while clicking on it flask js html

html

javascript

button