Changing opacity of DIV within Javascript by passing a function parameter?

StackOverflow https://stackoverflow.com/questions/15049081

Question

I have the following code and I want to change the opacity of the two DIV tags to .5. I cannot seem to get it to work like the width and height. Am I not passing the opacity parameters correctly or is it the part where this newdiv.style.opacity = opacity; isn't correct?

<!DOCTYPE html>
<html>
<head>
</head> 
<script>
var my_div = null;
var newDiv = null; 
function creatediv(id, html, width, height, left, top, opacity) 
{ 
    var newdiv = document.createElement('div'); 
    newdiv.setAttribute('id', id);  

    newdiv.style.width =  width + "px";     
    newdiv.style.height = height + "px";     

    newdiv.style.position = "absolute";         
    newdiv.style.left = left + "px";         
    newdiv.style.top = top + "px";  

    newdiv.style.background = "#0CC"; 
    newdiv.style.border = "10px solid #000";    
    newdiv.style.opacity = opacity;
    newdiv.innerHTML = 'html n'; 
    document.body.appendChild(newdiv); 

    my_div = document.getElementById(id);
    document.body.insertBefore(newdiv, my_div);
}
</script> 
<body onload=" creatediv('xdiv1', 300, 300, 100, 100, .5);creatediv('xdiv2', 30, 30, 100, 100, .5)">
<div id='xdiv1'> </div>
<div id='xdiv2'> </div>
</body>
</html>
Was it helpful?

Solution

You have the wrong number of parameters in your call. It looks like the html parameter is no longer being used? Try changing this:

function creatediv(id, html, width, height, left, top, opacity)

To this:

function creatediv(id, width, height, left, top, opacity)

OTHER TIPS

Try having some other identifier instead of opacity.

"opacity" is a property. I think you can't have an identifier with the same name.

I am not sure, but I think this is worth trying.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top