Note which colour button was clicked I have a script that changes the colour, it selects the colour by the id, then it listens what colour was clicked, and if the colour choose was black or whatever other colours, it will do the job.

However, there is a lot of repetition with the if statement. Is there a way to refactor this? 

How about if color choosen ${colorClicked} then style bg with = the ${colorAssosiated} or something like that?

Can we re-factor this? But with ES5 best.

var black = document.getElementById("black");
var blue = document.getElementById("blue");
var red = document.getElementById("red");

//01. Listen for button click
var buttonClick = this.addEventListener ("click", function(e) {
    console.log(e.target.id + " button was clicked");
    var colorChosen = e.target.id;


    //02. Change background colour
      if (colorChosen == "black"){
        document.body.style.background = "black";
        console.log('You chose Black!');
      } else if (colorChosen == "blue") {
        document.body.style.background = "blue";
        console.log('You chose Blue!');
      } else if (colorChosen == "red") {
        document.body.style.background = "red";
        console.log('You chose Red!');

      }

});
I think in your case you can just do this:

document.body.style.background = colorChosen;


Avoiding all the ugly if else part.

A more robust solution will be using a lookup table to decouple the DOM ids from the proper colors string:

const colorFor = {
    "somethingRed": "red",
    "somethingBlue": "blue",
    "somethingBlack": "black"
};

...

document.body.style.background = colorFor[colorChosen];


With somethingBlaBla I mean a meaninful name that not contains the color.
The purpose is to contain the changes in case you want a different color in the future or if you want that more options have the same color.

Another improvement is to have a guard condition to avoid errors or weird situations:

var buttonClick = this.addEventListener ("click", function(e) {
    console.log(e.target.id + " button was clicked");
    var colorChosen = e.target.id;

    if (!colorFor[colorChosen])
        return false;

    document.body.style.background = colorFor[colorChosen];

});


Instead of just return from the function you can log an error or pup up a dialog with a warning to inform the user. 
Or you can reset to a default color the background.

In the same way you can use a style instead of setting the color on the DOM element.

This could be better in some situation, depends on your app code convention.