时间戳

首页 > 解决方案 > 单击按钮时更改按钮的颜色烧瓶js html

javascript - 单击按钮时更改按钮的颜色烧瓶js html

问题描述

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

我正在使用带有 Python HTML Javascript 的 Flask

这是我在按钮的行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 按钮时，我都会收到以下错误：浏览器（或代理）发送了此服务器无法理解的请求。

标签： javascripthtmlbutton

解决方案

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>

推荐阅读