I want to ask: Why can't you use element.setAttribute when setting the background-color value in JavaScript?

I'm trying to implement a function that sets the CSS background-color parameter rgba () when a button is pressed in JavaScript.

I implemented it while doing the following action learning tasks.
JavaScript | MDN | Image Gallery
https://developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Image_gallery

      
       
      <button>Darken</button>
    

. overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 480px;
  background-color: rgba (0,0,0,0);
}

The relevant part of JavaScript is below.

const overlay = document.querySelector ('. overlay');
btn.onclick = function (e) {
    if (e.target.textContent === "Darken") {
        e.target.setAttribute ("class", "light");
        e.target.textContent = "Lighten";
        // Set the backgroundColor value here
        overlay.style.backgroundColor = "rgba (0,0,0,0.5)";
<//// The following three writing methods do not work.
//Overlay.style.opacity = 0.5;
        //overlay.fillStyle = rgba (0,0,0,0.5);
        //overlay.style.setAttribute("background-color "," rgba (0,0,0,5) ");

The full text of JavaScript is also included.

const displayedImage = document.querySelector ('. displayed-img');
const thumbBar = document.querySelector ('. thumb-bar');
const btn = document.querySelector ('button');
const overlay = document.querySelector ('. overlay');
/ * Looping through images * /
createImages ();
function createImages () {
    for (let i = 1;i<6;i ++) {
        let newImage = document.createElement ('img');
        newImage.setAttribute ('src', "images/pic" + i + ".jpg");
        newImage.setAttribute ("id", "image" + i);
        thumbBar.appendChild (newImage);
    }
}
changeMainPic ();
function changeMainPic () {
    for (let i = 1;i<6;i ++) {
        let imgBtn = document.getElementById ("image" + i);
        console.log (imgBtn);
        imgBtn.addEventListener ("click", function () {
            displayedImage.setAttribute ("src", "images/pic" + i + ".jpg")
        });
    }
}
/ * Wiring up the Darken/Lighten button * /
// use anonymous functions
btn.onclick = function (e) {
    if (e.target.textContent === "Darken") {
        e.target.setAttribute ("class", "light");
        e.target.textContent = "Lighten";
        overlay.style.backgroundColor = "rgba (0,0,0,0.5)";
        //overlay.style.opacity = 0.5;
        //overlay.fillStyle = rgba (0,0,0,0.5);
        //overlay.style.setAttribute("background-color","rgba(0,0,0,5) ");
    }
    else {
        e.target.setAttribute ("class", "dark");
        e.target.textContent = "Darken";
        overlay.style.backgroundColor = "rgba (0,0,0,0)";
        //overlay.style.opacity = 0;
        //overlay.fillStyle = rgba (0,0,0,0);
        //overlay.style.setAttribute("background-color","rgba(0,0,0,0) ");
    }
}

None of the above three lines on the JavaScript side can set the value of rgba ().
Especially why the setAttribute browser built-in function cannot be used because the value of rgba () is already set in the CSS file.
I think.

I'm sorry for the beginner's question, but please give me some advice!

Supplement

Mac OS Catalina
Browser Chrome