using javascript in the onclick attribute

Question

i posted a question earlier and got it answerd thanks to the wonderful people here, but as my luck goes, its never that easy. i have a code that switches back and forth between pictures onclick, however, the first time you click, the picture doesnt switch, but the checkbox is checked. at the very least a reasoning would be superb :)

<script type="text/javascript">
function func()
{
    var img1= document.getElementById("img1");

    if(img1.name == "on")
    {
        img1.src = "images/" + "img1a.jpg";
        img1.name = "off";
    }
    else
    {
        img1.src = "images/" + "img1.jpg";
        img1.name = "on";
    }
}
</script>



</head>

<body>
<form>
<p align="center">
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>   
<p align="center">
<label for="interest1" id="label-interest1"><img src="images/img1.jpg" width="781" height="800" onclick="func()" id="img1" /></label>
<label for="interest2" id="label-interest2"><img src="/images/img2.jpg" width="781" height="800" /></label>
<label for="interest3" id="label-interest3"><img src="/images/img3.jpg" width="781" height="800" /></label></P><!-- code making checkbox be an image-->
</form>

The first time func() is ran, no name property exists, so the else block is executed, which sets the src to what it's already set to. Either swap which image is assigned in each block, or add name="on" by default... — Matt
– Matt, Commented Dec 18, 2012 at 23:38
I read this question and answers and decided you need a little boost. jsfiddle.net/4G9f8/3 (edits because i'm stupid) check this out. Google each function if you need to (use MDN, not w3schools). Cheers — rlemon
– rlemon, Commented Dec 19, 2012 at 0:12

Travis J · Accepted Answer · 2012-12-18 23:43:41Z

2

You are lacking the first state of "on". Try adding this to your markup

 <img src="images/img1.jpg" width="781" height="800" onclick="func()" name="on" id="img1" />

Conversely, you could handle this in javascript in your conditional statement like this:

if(img1.name === undefined || img1.name == "on")

which would handle the first state where a name attribute was not present.

edited Dec 18, 2012 at 23:43

answered Dec 18, 2012 at 23:38

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

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

Comments

marcus erronius · Accepted Answer · 2012-12-18 23:46:08Z

1

Since your img element doesn't have a name attribute, it doesn't match "on" condition the first time it is clicked. You could add a name attribute (which would work, but make the html invalid), but a better solution might be to get the value from the checkbox you are associating it with. Something like this:

var checkboxid = img1.parentNode.getAttribute("for");
document.getElementById(checkboxid).checked

This way, you can be sure it is kept in sync with the checkbox.

answered Dec 18, 2012 at 23:46

marcus erronius

3,7131 gold badge19 silver badges33 bronze badges

1 Comment

Halter Over a year ago

I know that this is super late, but how would i get this to work in my JS? i can't seem to figure it out

Collectives™ on Stack Overflow

using javascript in the onclick attribute

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related