Whilst learning, i keep going back over what i have done to understand it properly, make changes and improvements. At the moment, i am going over my hide/show function.

I have 3 buttons which controls the visibility of their respective canvases.
My code did look like this:

```
    function toggleRedDot(){
        document.getElementById('btnRed').click(); {
            if(canvas.style.visibility=='hidden'){
                canvas.style.visibility='visible';
                btnRed.style.color='Red';
            }else{
                canvas.style.visibility='hidden';
                btnRed.style.color='Black';
            }
        }
    };

```

Both the Green and Blue toggle functions are identical except for the button color. My project actually has 7 buttons and canvases. I'm trying to put all these functions into 1, and this is now what i have:

```
    function toggle_visibility(id) 
    {
        var ele = document.getElementById(id);
        if (ele.style.visibility == 'hidden')
        {
            ele.style.visibility = 'visible';
        }
        else 
        {
            ele.style.visibility = 'hidden';                
        }
    }

```

I have been unable to work out how to now change the corresponding button color attribute. The idea is that the button will look 'on' when canvas is visible and the color reverts to Black when 'off'.

I also need the answer to be in just javascript please, as this is what i am learning.
I am also hoping to do a similar sort of thing to my drawDots function as they also differ in class, and location. Thank you.

I made a snippet:

```js
  var canvas = document.getElementById('redDot');
  var ctxR = canvas.getContext('2d');
  var canvas1 = document.getElementById('greenDot');
  var ctxG = canvas1.getContext('2d');
  var canvas2 = document.getElementById('blueDot');
  var ctxB = canvas2.getContext('2d');

  var cw = canvas.width;
  var ch = canvas.height;

  drawDots();

  function toggle_visibility(id) {
    var ele = document.getElementById(id);
    if (ele.style.visibility == 'hidden') {
      ele.style.visibility = 'visible';
    } else {
      ele.style.visibility = 'hidden';
    }
  }

  function drawDots() {

    //   Red Dot
    ctxR.clearRect(0, 0, cw, ch);
    ctxR.save();
    ctxR.translate(cw / 2, ch / 2);
    ctxR.beginPath();
    ctxR.arc(-50, 0, 10, 0, 2 * Math.PI);
    ctxR.closePath();
    ctxR.fillStyle = 'Red';
    ctxR.fill();
    ctxR.restore();

    //   Green Dot
    ctxG.clearRect(0, 0, cw, ch);
    ctxG.save();
    ctxG.translate(cw / 2, ch / 2);
    ctxG.beginPath();
    ctxG.arc(0, 0, 10, 0, 2 * Math.PI);
    ctxG.closePath();
    ctxG.fillStyle = 'Green';
    ctxG.fill();
    ctxG.restore();

    //   Blue Dot
    ctxB.clearRect(0, 0, cw, ch);
    ctxB.save();
    ctxB.translate(cw / 2, ch / 2);
    ctxB.beginPath();
    ctxB.arc(50, 0, 10, 0, 2 * Math.PI);
    ctxB.closePath();
    ctxB.fillStyle = 'Blue';
    ctxB.fill();
    ctxB.restore();
  };
```

```css
#wrapper {
  position: relative;
}
canvas {
  position: absolute;
  border: 1px solid red;
}
.red {
  color: Red;
}
.green {
  color: Green;
}
.blue {
  color: Blue;
}
```

```html
<div id="btnWrapper">
  <button id="btnRed" class="red" title="Toggle Red Dot" onclick="toggle_visibility('redDot')">&#9737;</button>
  <button id="btnGreen" class="green" title="Toggle Green Dot" onclick="toggle_visibility('greenDot')">&#9737;</button>
  <button id="btnBlue" class="blue" title="Toggle Blue Dot" onclick="toggle_visibility('blueDot')">&#9737;</button>
</div>
<div id="wrapper">
  <canvas id="redDot" width="200" height="100"></canvas>
  <canvas id="greenDot" width="200" height="100"></canvas>
  <canvas id="blueDot" width="200" height="100"></canvas>
</div>
```