background-colorのパラメーター設定の方法[JavaScript/CSS]

Question

###質問したいこと：background-colorの値をJavaScriptで設定するとき、element.setAttributeが使えない理由

JavaScriptでボタンを押すと、CSSのbackground-colorのパラメーターrgba()を設定する機能を実装しようとしています。

下記のアクション学習の課題をする中で実装を行いました。
JavaScript|MDN|イメージギャラリー
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery

    <div class="full-img">
      <img class="displayed-img" src="images/pic1.jpg">
      <div class="overlay"></div>
      <button class="dark">Darken</button>
    </div>

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

JavaScriptの該当部分は下記です。

const overlay = document.querySelector('.overlay');

btn.onclick = function(e){
    if(e.target.textContent === "Darken"){
        e.target.setAttribute("class","light");
        e.target.textContent = "Lighten";
        //ここでbackgroundColorの値を設定
        overlay.style.backgroundColor = "rgba(0,0,0,0.5)";
　　　　　//以下の3つの書き方ではいずれも作動しない
　　　　　//overlay.style.opacity = 0.5;
        //overlay.fillStyle = rgba(0,0,0,0.5);
        //overlay.style.setAttribute("background-color","rgba(0,0,0,5)");

JavaScriptの全文も記載します。

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 */
//無名関数の利用
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)");
    }
}

上記のJavaScript側の最後の3行の書き方ではいずれもrgba()の値を設定することが出来ません。
特になぜsetAttributeのブラウザ組み込み関数が使えないのは、既にCSSのファイルでrgba()の値が設定されているからかな、、、？
とも思うのですが。

初心者質問で申し訳ありませんが、ご教示どなたかお願いします！

###補足
Mac OS Catalina
Browser Chrome

Comments

[kei344]

変数overlayが定義されていないので、その定義部分を含めたコード全体を質問文に追記してください。

[digitalhimiko]

追記いたしました！
document.querySelector(".overlay");で宣言、初期化してます！

[digitalhimiko]

.jsファイルの全文も記載しました！

Answer 1

動くサンプル：https://jsfiddle.net/pbc5wa7z/

JavaScript自体には問題は無く、.overlayをbuttonの上に被せてしまっているためにクリックできない状態になっているようです。
rgba(0,0,0,0)でなく、不透明にして確認してみてください。

Comments

[digitalhimiko]

ありがとうございます！試してみます！