WebGL Support – Switch Option Control Not Switching Color

I am trying to get the menu box on this code to change color using webgl. For some reason I cannot get the color to change properly. The html, initShaders.js, and utility.js is already created.

Please see my .js below:

"use strict";

var gl;

var theta = 0.0;
var thetaLoc;

var speed = 100;
var direction = true;

var colors = [
  vec4 (0.1, 0.0, 0.0, 1.0),
  vec4 (0.0, 0.0, 1.0, 1.0), //blue
  vec4 (0.0, 1.0, 0.0, 1.0), //green
  vec4 (1.0, 1.0, 1.0, 1.0) //black
];


window.onload = function init()
{
    var canvas = document.getElementById("gl-canvas");

    gl = canvas.getContext('webgl2');
    if (!gl) alert("WebGL 2.0 isn't available");

//  Configure WebGL
//
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(1.0, 1.0, 1.0, 1.0);

//  Load shaders and initialize attribute buffers

var program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram( program );

var vertices = [
    vec2(-.5,  -.5),
    vec2(0,  .5),
    vec2(.5,  -.5)
];




// Load the data into the GPU

var bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW);

// Associate out shader variables with our data buffer

var positionLoc = gl.getAttribLocation( program, "aPosition" );
gl.vertexAttribPointer( positionLoc, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray(positionLoc);

thetaLoc = gl.getUniformLocation(program, "uTheta");

var colorLoc=gl.getAttribLocation(program, "fcolor");
gl.vertexAttribPointer(colorLoc, 4, gl.Float, false, 0, 0);
gl.enableVertexAttribArray(colorLoc)

colors=gl.getUniformLocation(program, "color_changer");


// Initialize event handlers

document.getElementById("slider").onchange = function(event) {
    speed = 100 - event.target.value;
};
document.getElementById("Direction").onclick = function (event) {
    direction = !direction;
};   

document.getElementById("Controls").onclick = function( event) {
    switch(event.target.index) {
      case 0:
        direction = !direction;
        break;

     case 1:
        speed /= 2.0;
        break;

     case 2:
        speed *= 2.0;
        break;  
    
     case 3:
        colors[1][0][0][1];
        break;
    
    case 4:
      colors[0][0][1][1];
      break;
    
    case 5:
      colors[1][1][1][1];
      break;
   }
};

window.onkeydown = function(event) {
    var key = String.fromCharCode(event.keyCode);
    switch( key ) {
      case '1':
        direction = !direction;
        break;

      case '2':
        speed /= 2.0;
        break;

        case '3':
        speed *= 2.0;
        break; 

        case '4':
          colors[1][0][0][1];
          break;
      
      case '5':
        colors[0][0][1][1];
        break;
      
      case '6':
        colors[1][1][1][1];
        break;
    }
};

render(); 
}; 



function render()

{
gl.clear( gl.COLOR_BUFFER_BIT );

   theta += (direction ? 0.1 : -0.1);
   gl.uniform1f(thetaLoc, theta);

   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

   setTimeout(
       function () {requestAnimationFrame(render);},
    speed, colors
     );
  }

I want the color to change when clicking on the associated menu controls.

I tried changing to different return statements in the switch function, but the color is still not functioning correctly. All other menu clicks work except for color. Please advise.