Blinking Background color in JavaScript

I am trying to have a blinking background color between Red and Wite by writing 2 functions with 3milli-seconds interval, but unfortunately, it doesnt work with my set element class named, "Bad".

Can someone help me what am I doing wrong?

Code is below:

function badBG(){
    var colors = ['Red','White']
        for(i=0; i<2; i++){
            colorBG = colors[Math.floor(Math.random()*2)];
            // console.log(colorBG)
        }
        
        return colorBG 
}

function blinkBG(){
    blink = badBG()
    document.getElementsByClassName('Bad').style.backgroundColor = blink;
}


setInterval("blinkBG()",300);

All are straight to the point functions and css methods.

Better use a CSS animation:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.bad{
  padding:30px;
  animation: blink 300ms infinite;
}

@keyframes blink{
  from {
    background: white;
  }
  to{
    background: red;
  }
}

<!-- language: lang-html -->

<div class="bad">I'm very bad</div>

<!-- end snippet -->

While I would recommend solely solving this on the CSS level as Alexander Nenashev showed, there is also a clean JavaScript solution to it.

You simply us setInterval in combination with classList.toggle() to toggle a class in CSS. Means by adding/removing it:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const BAD = document.querySelectorAll('.bad');

BAD.forEach(element => {
  setInterval(function() {
    element.classList.toggle('bg-red');
  }, 300)
})

<!-- language: lang-css -->

.bad{
  padding:30px;
}

.bg-red {
  background-color: red;
}

<!-- language: lang-html -->

<div class="bad">I'm very bad</div>

<!-- end snippet -->