How would i get an existing button to change an object's opacity with html?

Question

I did check this post

How would i get a button to change a objects opacity with html, js & css

to figure out how to change the opacity of an object with a button. I cannot figure out though how can I customize this code in order to link the opacity of the text to the class or Id of an existing button.

I tried also with

document.getElementsByClassName("pippo1").onclick = function() {myFunction()};


function myFunction() {
  document.getElementsByClassName("text1").style.opacity = "1";
}

but it does not work.

I could link the "Change Opacity" button to the text editor I want to custom the opacity, but I could not link an existing button to this Function.

<html>

<script>

    function myFunction(button) {
       // get data-opacity
       let opacity = button.dataset.opacity;
       const el1 = document.getElementById("text1");
       const el2 = document.getElementById("text2");
       const el3 = document.getElementById("text3");
       const el4 = document.getElementById("text4");
       el1.style.opacity = "1";
       el2.style.opacity = "0";
       el3.style.opacity = "0";
       el4.style.opacity = "0";

      
     }
</script>
</head>
<body>

<button data-opacity="0" class="pippo1" onclick="myFunction(this)">PROJECT</button>
</body>
</html>

Can anyone help?

Thank you

Elena

[getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) returns a **collection**, and as such does not have an onclick property (or a style property). You need to take item [0]. — Peter B, Aug 25 '21 at 14:06
your code is working fine but you forgot to make elements such as text1, text2, text3 and text4 `
text1

text2

text3

text4
` — Mohsen TOA, Aug 25 '21 at 14:09
I vote to close this question because it is a noob mistake, being found too often and unnecessarily here — Mister Jojo, Aug 25 '21 at 14:20
Thank you very much for your help. Very much appreciated. I would like to test some of the answers if possible, before closing. Thanks — Elena, Aug 27 '21 at 10:01

GucciBananaKing99 · Answer 1 · 2021-08-25T14:22:32.803

You have to take an item of the class like pTag[0], pTag1...

The first item is always 0 then 1...

function turnRed() {
  var pTag = document.getElementsByClassName("pTag");
  pTag[0].style.color = "red";
}

<button onclick="turnRed()">Turn the p-Tag below red</button>
<p class="pTag">Hello</p>
<p class="pTag">Hello</p>
<p class="pTag">Hello</p>

You can also use querySelector. This will work for both id and class. But it will only take the first one:

function turnRed() {
  var pTag = document.querySelector(".pTag");
  pTag.style.color = "red";
}

<button onclick="turnRed()">Turn the p-Tag below red</button>
<p class="pTag">Hello</p>
<p class="pTag">Hello</p>
<p class="pTag">Hello</p>

Also W3Schools made a documentation

score 1 · Answer 2 · answered Aug 25 '21 at 14:27

try this, you can use classList to add, remove or toggle CSS classes

const button = document.getElementById("button");
const div = document.getElementById("div");

button.addEventListener("click", myfun);

function myfun(){
  div.classList.add("fadeout");
}

#div{ width:100px;height:100px;background-color:blue; 
transition:0.5s; }
.fadeout{ opacity:0; visibility:hidden; }

<button id="button">Fade</button>
<br>
<div id="div"></div>

score -1 · Answer 3 · answered Aug 25 '21 at 14:31

-1

Change el1.style.opacity = "1"; to this el1[0].style.opacity = "1";

answered Aug 25 '21 at 14:31

Nauman

218
1
3
11

How would i get an existing button to change an object's opacity with html?

3 Answers3