更改<a> and button with button click in Javascript

Question

I am kinda new in this programming thing and I am trying to improve myself by doing some challenges. However I am stuck on sth. When the button is clicked I want to change the background color of body and some and button. I managed to change the color of body but stuck on and button. For your info I am using Bootstrap elements in my code as you can understand.

Thanks in advance for your helps

function changeColor (color){
  var choosenColor = Math.floor(Math.random() * 12) + 1;
  document.body.style.background = colors[choosenColor];
  document.body.style.color = colors[choosenColor];
  document.getElementsByTagName("a").style.background = colors[choosenColor];
}


var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];

<div class="col-12 social-media">
    <a href="" id="tweet-quote" class="btn btn-primary">
        <i class="fa fa-twitter"></i>
    </a>
    <a href="" id="tumblr-quote" class="btn btn-primary">
        <i class="fa fa-tumblr"></i>
    </a>
    <button id="new-quote" class="btn btn-primary" onclick="changeColor()">New Quote</button>
</div>   

Screenshot

的颜色