更改未点击按钮的按钮不透明度

Question

Hi I've got a question in how I would change the opacity of a list of buttons where if a button is clicked, the opacity of the rest of the buttons would change to 0.5. And the one that was clicked would remain at 1.

So far I've got the below where I can change the opacity of the button that's clicked but struggling to achieve what I've said above. In jquery I know you can use.not(this) but not sure how to do this is JS.

EDIT: In my buttons I also have a span tag which holds the copy. When you click on the span tag this looks to cause issues with the opacity as well.

Button would like this, my apologies for not adding this in at the start

 <button class="variantClass"> <span>Button</span> </button

 var buttonSelector = document.querySelectorAll('button.variantClass'); buttonSelector.forEach(function (el){ el.addEventListener("click", function(){ this.style.opacity = "0.5"; }) });

 .variantClass { background: black; color: white; padding: 30px;}

 <button class="variantClass"> Button </button> <button class="variantClass"> Button </button> <button class="variantClass"> Button </button> <button class="variantClass"> Button </button> <button class="variantClass"> Button </button> <button class="variantClass"> Button </button>

Answer 1

 var buttonSelector = document.querySelectorAll('button.variantClass'); buttonSelector.forEach(function (el){ el.addEventListener("click", function(ev){ buttonSelector.forEach(function(button) { button.style.opacity = '0.5' }) this.style.opacity = 1 }) });

 .variantClass { background: black; color: white; padding: 30px;}

 <button class="variantClass"> <span>Button</span> </button> <button class="variantClass"> <span>Button</span> </button> <button class="variantClass"> <span>Button</span> </button> <button class="variantClass"> <span>Button</span> </button> <button class="variantClass"> <span>Button</span> </button> <button class="variantClass"> <span>Button</span> </button>