单击时,html / javascript尝试保持按钮颜色更改

时间:2018-03-09 14:26:18

标签: javascript html

我试图改变按钮BtnBus的颜色一旦点击就保持改变。它几乎是3个按钮的公共汽车/火车/地铁,每当有人点击我只是想改变颜色以显示它被选中。不知道该怎么做。感谢您的帮助

<!DOCTYPE html>
<html>
    <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="styles.css"



</head>
<body>

<script>
var btn = document.getElementById("BtnBus");

        btn.onclick = ChangeColour(){
            btn.style.backgroundColor = "red";
    }

</script>

        <div class="imglogo">
            <img src="iconlogo.png" alt="lighthouseLogo" class="logo">
        </div>
        <form>

        <h2> Chose Type of Transport </h2>
        <table style="width:100%">
        <button id="BtnBus">Bus</button> <br /> 
        <br /> 
        <button id="BtnTrain">Train</button> <br /> 
        <br /> 
        <button id="BtnSub">Subway</button> <br /> 
        <br /> 
        <button id="BtnSearch">Search</button> <br /> 

        </form>



</body>
<footer>
  <button class="Help">Help</button>
</footer>
</html>

1 个答案:

答案 0 :(得分:1)

您需要先将ChangeColour()定义为函数。然后它会工作:

&#13;
&#13;
var btn = document.getElementById("BtnBus");

function ChangeColour() {
btn.style.backgroundColor = "red";
}

btn.onclick = ChangeColour;
&#13;
<button id="BtnBus">Bus</button> <br />
&#13;
&#13;
&#13;