Set image opacity with javascript

Question

Good day! In all honesty the problem is a bit more complex. I want to know why the following line of code doesn't work:

pic.style.opacity = toString((5-z)/10);

Why I think it should work ?

the opacity member variable is a string so it needs to be a string therefore as long as the "toString" method is there after the system calculates the expression it should be turned into a string and therefore it should be viable.

Note: z is an integer number which has a varying value from 0 to 4.

In case someone wants to test for themselves:

<!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #asd{
            background-image : url(fry.jpg);
            margin-left:20%;
            margin-top:20%;
            height:100px;
            width:100px;
            }
    </style>
</head>
<body>
    <div id="asd"></div>
</body>
</html>
<script
var z = 3;
function foo(){
   document.getElementById("asd").style.opacity = toString((5-z)/10);
}
foo();
    </script>

you don't need the .toString(); pic.style.opacity = ((5-z)/10); besides, .toString() works the other way around, ((5-z)/10).toString() — frenchie
– frenchie, Commented Jun 27, 2013 at 15:28

dersvenhesse · Accepted Answer · 2013-06-27 15:34:49Z

4

You dont' need toString.

Just do:

document.getElementById("asd").style.opacity = (5-z)/10;

You aren't using toString correct anyway. If you'd like to use it anywhere, do it that way:

var number = 42.0;
var string = number.toString(10);

The 10 is optional and default. For instance you can use 2 to convert in dual system.

edited Jun 27, 2013 at 15:34

answered Jun 27, 2013 at 15:28

dersvenhesse

6,4742 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rink.attendant.6 Over a year ago

A JSFiddle to show that it works (I added a background color to illustrate the effect, since the image doesn't exist). jsfiddle.net/9tUjK

Sandy Gifford Over a year ago

If this fixed the problem you should select it.

Evan Davis · Accepted Answer · 2013-06-27 15:29:04Z

2

You are inadvertently calling window.toString(). The toString method is called as a method from the item you want to convert.

Also, you don't need it. Remove it.

answered Jun 27, 2013 at 15:29

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

Comments

artahian · Accepted Answer · 2013-06-27 15:28:55Z

1

You need to wait for the document to load before trying to access/set opacity for any element. Check onLoad event of javascript or $(document).ready() if you are using jQuery.

By the way - your opening script tag has a missing > sign

answered Jun 27, 2013 at 15:28

artahian

2,10314 silver badges17 bronze badges

Comments

reggaemahn · Accepted Answer · 2013-06-27 15:35:24Z

0

It'll work if you remove the toString. The value for opacity is a decimal value between 0.0 - 1.0

further reading: http://www.w3schools.com/css/css_image_transparency.asp

answered Jun 27, 2013 at 15:35

reggaemahn

6,7286 gold badges39 silver badges64 bronze badges

Collectives™ on Stack Overflow

Set image opacity with javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related