（JavaScript和HTML）单击时更改按钮的不透明度

我正在创建一个按钮，单击该按钮时，不透明度将更改为0.5。如果再次单击，它将恢复正常。我似乎不知道我做错了什么

我试过：

$（（）=>{
$（document）.on（“click”，“.test”，function（））{
document.getElementsByClassName（'test'）.style.opacity=“0.5”；
});
});
我会使用一个类系统。JQuery有一个
toggleClass
函数，我会用它来完成这个任务

$(document).click(function() {
    $(".test").toggleClass("transparent");
});

而CSS将是

<style>
    .test {
        opacity: 1;
    }
    .test.transparent {
        opacity: 0.5;
    }
</style>


.测试{
不透明度：1；
}
.test.transparent{
不透明度：0.5；
}

文件
按钮
$（“.test”）。在（“单击”，函数（）{
$（.test”）.css（“不透明度”，1.5-$（.test”）.css（“不透明度”）；
});
jQuery还提供了一个
toggleClass
函数，如它所说，切换类：

$(document).click(function() {
    $(".test").toggleClass("toogleTransparentClass");
});

请试试这个

<button class="button_click">CLICK HERE</button>

<style>
 .button_click{background:#F00; color:#FFF; padding:10px 50px; border:none; cursor:pointer;}
 .transperent{opacity:0.5;}
</style>

<script>
  $(document).ready(function(){
     $("button").click(function(){
        $(".button_click").toggleClass("transperent");
     });
  });
</script>

点击这里
.按钮_单击{背景：#F00；颜色：#FFF；填充：10px 50px；边框：无；光标：指针；}
.transperent{opacity:0.5；}
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“.button_click”）.toggleClass（“transperent”）；
});
});

注意：
请包括此文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



Jsfiddle

您能否更详细地了解它正在做什么或没有做什么是您想要/期望的？
document.getElementsByClassName（）
返回数组，更改为
document.getElementsByClassName（）[0]
以获取第一项。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>