Welcome to WebmasterWorld Guest from 54.157.222.62

Forum Moderators: open

Message Too Old, No Replies

Show/Hide [Toggle] An Image

Toggle An Image ON/OFF Using A Checkbox

   
3:38 am on Aug 21, 2013 (gmt 0)

10+ Year Member



The code below is the most promising one I've found for a project I have but it's not working properly for me. The function of it is to alternately display or not display an image based on the status of a check box (checked/unchecked).

The code, written by rocknbil is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Swap image</title>
<script type="text/javascript">
window.onload=function() { attachBehaviors(); }
function attachBehaviors() {
// only doing one here, but you can add others
if (
document.getElementById('toggle_chk') &&
document.getElementById('my_img')
) {
// So JS is "aware" of the element style
document.getElementById('my_img').style.display='block';
// Attach the behavior
document.getElementById('toggle_chk').onclick=function() {
toggle_image(this);
};
}
}
//
function toggle_image(chk) {
// already checked for my_img
// if you want to hide it . . .
document.getElementById('my_img').style.display=(chk.checked)?'block':'none';
// if you just want to swap src
//var src=(chk.checked)?'my_image.jpg':'';
//document.getElementById('my_img').src=src; }
</script>
</head> <body>
<form action="">
<p><input type="checkbox" name="toggle_chk" id="toggle_chk" value="1" checked>
<label for="toggle_chk">Image on/off</label></p>
<p><img src="my_image.jpg" id="my_img"></p>
</form>
</body>
</html>

I have a URL as a test page at:
<snipped>

The image (a 40 x 40-pixel, purple square) stays visable whatever the checkbox status.
The answer to the problem is probably very simple and rocknbil would problably be the one who could pinpoint the nature of my problem most quickly if he happens to catch this post.

[edited by: whoisgregg at 9:54 pm (utc) on Aug 21, 2013]
[edit reason] Removed link, please see TOS and Charter :) [/edit]

4:10 am on Aug 21, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




if (
document.getElementById('toggle_chk') &&
document.getElementById('my_img')
) {
// So JS is "aware" of the element style
document.getElementById('my_img').style.display='block';
// Attach the behavior
document.getElementById('toggle_chk').onclick=function() {

Don't keep diving into the DOM (calling getElementById multiple times for the same element). Store it in a variable the first time.

Also, your DOCTYPE declaration is invalid (it's also Transitional, which you generally should avoid).

To your problem, I'm going to format this snippet of code for readability:

function toggle_image(chk) {
// already checked for my_img
// if you want to hide it . . .
document.getElementById('my_img').style.display=(chk.checked)?'block':'none';
// if you just want to swap src
//var src=(chk.checked)?'my_image.jpg':'';
//document.getElementById('my_img').src=src; }
</script>

Spot the problem? Your function is not closed because the closing } is on a line that begins with a comment.
11:36 pm on Aug 21, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't see how is doctype is invalid, however, not only should it be avoided, there has been no reason to use that version for new web pages since 1999 and yet...here we are.
12:03 am on Aug 22, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



I think the DOCTYPE in his link was different than the one shown here. The Validator reported it as being wrong. But yeah, there's no good reason to be using that.