colourgradient.js

    var ids = ["one", "two", "three", "four", "five", "six", "seven", "eight"];
var whichID = ["false", "false", "false", "false", "false", "false", "false", "false"];

function makeGradient() {
    var colourOne = null;
    var colourTwo = null;

    for (var i = 0; i < ids.length; i++){
        if (whichID[i] == "true" && colourOne == null) {
            colourOne = ids[i];
        } else if (whichID[i] == "true" && colourOne != null && colourTwo == null) {
            colourTwo = ids[i];
        }
//        } else if {
//            document.getElementById('bigbox').innerHTML = "Two colours have already been selected. Please pless reset to select different colours.";
//        }
    }

    document.getElementById('bigbox').style.background = `linear-gradient(to right, ${retrieveColour(colourOne)}, ${retrieveColour(colourTwo)})`;
}

function retrieveColour(colour) {
    return document.defaultView.getComputedStyle(document.getElementById(colour)).getPropertyValue("background-color");
}

function doReset() {
    for (var i = 0; i < ids.length - 1; i++){
        whichID[i] = "false";
    }
    document.getElementById('bigbox').style.background='white'
}

function setOne() {
    whichID[0] = "true";
}
function setTwo() {
    whichID[1] = "true"
}
function setThree() {
    whichID[2] = "true";
}
function setFour() {
    whichID[3] = "true";
}
function setFive() {
    whichID[4] = "true";
}
function setSix() {
    whichID[5] = "true";
}
function setSeven() {
    whichID[6] = "true";
}
function setEight() {
    whichID[7] = "true";
}