在html中单击按钮时更改按钮的颜色

vngu2lb8 于 2021-09-29 发布在 Java

关注(0)|答案(1)|浏览(393)

我有一个开/关按钮，当我点击它把它打开时，我希望按钮变成绿色，当我点击它把它关掉时，我希望按钮变成红色。
我将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';
    }    
}

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

JavaScript Html Button

来源：https://stackoverflow.com/questions/68542801/change-the-color-of-a-button-while-clicking-on-it-flask-js-html

1条答案

按热度按时间

ergxz8rk1#

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>

赞(0）回复(0）举报 2021-09-29

我来回答

在html中单击按钮时更改按钮的颜色

1条答案

相关问题

热门标签

最新问答