homepage Welcome to WebmasterWorld Guest from 54.205.193.39
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Show/Hide [Toggle] An Image
Toggle An Image ON/OFF Using A Checkbox
icon_kid




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

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]

 

Fotiman




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


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.

drhowarddrfine




msg:4603975
 11:36 pm on Aug 21, 2013 (gmt 0)

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.

Fotiman




msg:4603980
 12:03 am on Aug 22, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved