html / javascript trying to keep a button colour changed when click on

Question

I'm trying to change the colour of button BtnBus once its clicked on to stay changed. its pretty much 3 buttons bus/train/subway and whenever one is clickon I just want to change the colour to show its been selected. not sure how to do this. thanks for the help in advance

<!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>

Please attach a runnable code snippet. Attaching bits of code won't help. Also, your html isn't valid. — Rocks, Mar 09 '18 at 14:29
You HTML is invalid. Problems are usually easier to solve when you don't have [machine detectable errors](https://validator.nu) — Quentin, Mar 09 '18 at 14:30

score 1 · Answer 1 · answered Mar 09 '18 at 14:32

1

You need to first define ChangeColour() as a function. Then it will work:

var btn = document.getElementById("BtnBus");

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

btn.onclick = ChangeColour;

<button id="BtnBus">Bus</button> <br />

answered Mar 09 '18 at 14:32

1

Works! But you can simplify your code a bit: btn.onclick = function() { this.style.backgroundColor = "red"; } – Flocke Mar 09 '18 at 14:35
I'm trying this the error i'm getting on chrome is "uncaught type error cannot set property 'onclick' of null" also thanks for ur help – aalloo Mar 09 '18 at 14:56
That sounds like the variable for the element isn't working / being found. What have you got for your variable that's giving that error? – Mar 09 '18 at 14:58
the underlined error is for "ChangeColour". in btn.onclick = ChangeColour; – aalloo Mar 09 '18 at 15:08

html / javascript trying to keep a button colour changed when click on

1 Answers1