index.html

<div class="color">1</div>
<div class="color">2</div>
<div class="color">3</div>
<div class="color">4</div>
<div class="color">5</div>
<div class="color">6</div>
<div class="color">7</div>
<div class="color">8</div>
<div class="color">9</div>
<div class="color">10</div>
<button id="generateColors">GO!</button>
<button id="automatic">gimme somthing good</button>

index.js

function chooseComponent() {
  return Math.floor(Math.random() * 255);
}

function chooseColor() {
  return "rgb" + "(" +
        chooseComponent() + "," +
        chooseComponent() + "," +
        chooseComponent() + ")";
}

function initSlot(el) {
  var locked = false;
  
  el.onclick = function() {
    locked = !locked;
  };

  return function() {
    if (!locked) el.style.background = chooseColor();
  }
}

function init() {
  var slots = document.querySelectorAll('.color');
  var fns = Array.prototype.map.call(slots, initSlot);
  return function() {
    fns.forEach(function(fn) {
      fn();
    })
  }
}

var go = init();

document.getElementById('generateColors').onclick = go;

var interval;
document.getElementById('automatic').onclick = function() {
  if (!interval) return interval = setInterval(go, 100);
  clearInterval(interval);
  interval = null;
}