Toggle image in HTML with Jscript

Question

So I tried to : 1) toggle the background color og a DIV element by the click of a button 2) change the image source (not toggle) by the click of a button.

The code is pretty simple to me and by right, I dont see a problem with it, but for some reason just doesnt work!! please help... any advise would be highly appreciated mates.

<!Doctype HTML>
<HTML>
<head>
<script>
function changeimage()
{    x = document.getElementById("image");
 x.src="e:\PHOTOS\garfield-coffee.jpg";
 x.alt="e:-\PHOTOS\garfield-coffee.jpg";   // the new image doesnt load, but if I specify an "alt", it seems to work.
}

function changeDivColor()
{  x = document.getElementById("main_container")
if(x.style.backgroundColor=="#3B7AF0")       // the if thens just dont work. Simply changing color one time does.
{  x.style.backgroundColor="#dfedf0";   }
else
{  x.style.backgroundColor=="#3B7AF0";  }
}

</script>
</head>
<body>
<div id="main_container" style="background-color:#3B7AF0;width:1800px;height:1800px;font-size:10pt">

<img id="image" src="e:\photos\garf2.jpg" width:40px height:40px></img>

<div id="Scriptarea">                          <!-- Javascript stuff -->
<form>
<input type="button" onclick="changeimage()" value="click here to change garfield"></input>
<input type="button" onclick="changeDivColor()" value="Change DIV color"></input>
</form>
</div>                                 <!-- Javascript stuff -->


</div>

</body>

score 0 · Answer 1 · edited May 23 '17 at 12:13

You are using

if(x.style.backgroundColor=="#3B7AF0");

This is going to be false no matter what the background color is, because

 element.style.backgroundColor

after you get the element x, and see the

returns an RGB value (console.log(x.style.backgroundColor); // use this and see the console) which you can't compare directly with HEX value. You will get the conversion technique here

How to get hex color value rather than RGB value?

score 0 · Answer 2 · answered Nov 01 '13 at 17:37

try this

var imgUrl = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL2CuC1sDp7s3Z0kL-0k1rcrgw8MpNJV7L4HPw-Ez9YOcqokjsyCZqBqbv";
var imgUrl2 = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRtZsHc2xA0fazpA-zx79WaGWx_Enn0SV9DaaPc1N-jA5IxgSwF79W0g5_1";
function changeDivColor() {
    $("#main_container").css("background-color",'red');
}
function changeimage() {
  var img = $("#image"), url = imgUrl;
    if (img.attr("src") == imgUrl) {url = imgUrl2;}
    img.attr("src", url);
}
$("#changeimg").click(changeimage);
$("#colorbtn").click(changeDivColor);

Js fiddle sample using jquery

score 0 · Answer 3 · answered Nov 01 '13 at 17:54

Reading css values isn't fun or consistent between browsers. I would recommend you set the current background color to a var in Javascript and then updated it / evaluate off as you toggle between the two.

That being said, here is an actual (almost all) cross browser solution for what you were trying to do with background color swapping.

function changeDivColor()
{
    //Get the main_container element.
    x = document.getElementById("main_container")

    //Get the current styling for the element.
        //Reading styles isn't cross browser friendly, try x.currentStyle (IE) otherwise use document.defaultView.getComputedStyle (FF, Chrome, etc)
    var style = (x.currentStyle ? x.currentStyle : document.defaultView.getComputedStyle(x,null));

    //Get the backgroundColor from the returned style object, remove all spaces. (Chrome outputs rgb(59, 122, 240) and IE spits out rgb(59,122,240))
    var currentColor = style.backgroundColor.replace(/ /g,'');

    //Set the background color to 223,237,240 if its currently 59,122,240 (Sorry, cleaner than a long if/else and good to learn) ;)
    x.style.backgroundColor=(currentColor=="rgb(59,122,240)"?"rgb(223,237,240)":"rgb(59,122,240)");
}

Make sure you set your background color in html using rgb instead of a hex value, otherwise your going to need some more functions to convert from hex to rgb. ;) E.x. style="background-color:rgb(59,122,240);"

Toggle image in HTML with Jscript

3 Answers3