I'm trying to change the opacity of a div element when you click on an img element, using JavaScript or jQuery. I don't know if it's possible to do this with CSS or HTML, but if you know how to, please feel free to tell me! Anyways, here's the code I have right now;

<div  id="scene">the text</div> 
<!--the text element i'm trying to change-->

<img src="zyro-image (7) (1).png" id="look" ><img> 
<!--the img element; if it's clicked/active it changes the div element's opacity-->

the styles ⬇️

.scene{
    font-family: 'Common Pixel', sans-serif; 
    background-color:black; 
    border: 2px; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    width: 350px; 
    opacity: 0;
}

<!--____________________-->

.look{
    height: 100px;
    position: relative;
    left: 10px;
    top: -685px;
    margin-top: auto;
    z-index: 1;
    transition: top, 1s;
}

.look:hover{
    top: -692px;
}

Here are some things I tried;

(I got most of these answers - if not all of them - from stackoverflow)

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

<script>
$('.look').active(function(){
  $('.scene').css('opacity', '1');
 });
</script>

This one did not work, it looked as if it did nothing. No difference.

<script>
    function myFunction()
    {
        document.getElementById('scene').setAttribute("class", "scene2");
    }
</script>

<!--________________-->

<styles>
.scene2{
    font-family: 'Common Pixel', sans-serif; 
    background-color:black; 
    border: 2px; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    width: 350px;
    opacity: 1;
}
</styles>

This one had the same result as the last one, no difference.

<script>
        function change_css(){
            document.getElementById('result').style.cssText = 'font-family:'Common Pixel', sans-serif; background-color:black; border:2px; color:white; padding-top:10px; padding-bottom:25px; width:350px; opacity:1;';
        }
    </script>

I don't even think I need to say it anymore. It. Did. Not. Work.

CodePudding user response：

Your image should have the onclick eventlistener which will trigger the change of opacity:

<img src="yoursrc" onclick="changeOpacity()"/>

Give your div an id:

<div id="mydiv">I'm a div</div>

Then use this function which will get your div by id and add your changed opacity class to div:

function changeOpacity() {document.getElementById('mydiv').classList.add('opacity-low')}

CSS Class:

.opacity-low {opacity: 0.5;}

There might be a prettier way to do this but i'm not an expert in plain JS.

CodePudding user response：

Set DIV's opacity after IMG click:

$("#img").click(() => $("#div").css("opacity", 0.5))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div">I need opacity</div>
<img id="img" src="https://via.placeholder.com/100" />

Or better with CSS

<style>
   .opacityClass {opacity:0.5;}
</style>

...
$("#img").click( () => $("#div").addClass("opacityClass") )