Swap images with single button JavaScript function using %

Swap images with single button JavaScript function using %

Fellow Programmers! A wonderful afternoon (or whatever the case) to you!
With some assistance of fellow users I was able to manage getting an image
to change back and forth between a second image every couple seconds. It's
awesome! So I counted out some of the math with the % operator, and sure
enough when the image first displays, I get the default broken link image
of the browser, but after the 2 seconds everything goes as planned. So
begins this investigative experiment. I decided instead of swapping
automatically, lets make the swap with a button as to be able to
investigate the page as long as I would like. But who want's to do the
exact same thing again, why not learn another cool trick along the way.
That trick is to display both of the images at the same time, such that
when the button is clicked they swap places. Same math, different effect
for the user. Isn't that awesome!
The goal: display two images and below them one button. When the button is
clicked the images are to swap places. The images that was on the left
should be on the right, the one on the right ought now be on the left. Use
no jQuery, this is after all a JavaScript experiment (and I have yet to
learn much jQuery but I can't wait to get there!)
Browser error console messages: Interestingly enough firefox give me
nothing. I open the browser, load the page in it from VS 2012 clear the
error conslole, refresh the page. And nothing. In chrome (my default
browser) however, I get a localhost pic src 404 not found. I find this
strange because this code is on a page that happens to have other code
which references those same pictures and works fine. The 2 second auto img
flip thing being some of that other code.
debugging:I'm to much of a noob to know what's going on with that. I get
the basic Idea and looked into it some. On the VS site there's all this
info about setting breaking points and running multiple instance of VS to
do something with another engine. I will soon be on youtube to hammer that
out. I apologize however, if there is some simple debug fix to this and I
should have witnessed it. Hammering through my 2nd web class and that
topic has not been covered :(
Here are articles that I found similar to my question. This was helpful to
see how they had set up the if else: Swap Image with onclick not
responding all in all that turned out to be more that I could read,
clearly the writer is more advanced than I. a second: javascript swap text
block onclick anchor link a bit of an information overload I think. There
was a lot going on with that, but I never managed to change any of my code
after reading through it.
If your curious here is the VS article I briefly mentioned:
http://blogs.msdn.com/b/visualstudioalm/archive/2013/06/28/javascript-native-interop-debugging-in-visual-studio-2013.aspx
And here is my code:
<script type="text/javascript">
function swap_pics() {
var c = 1
//I had:
//var andy_arr = ["andy_white.jpg","andy_black.jpg"];
var andy_src1 = "andy_left.jpg";
var andy_src2 = "andy_right.jpg";
c = ((c + 1) % 2);
if (c == 0) {
//I was using an array which looked like:
// document.getElementById('andy_left').src =
"andy_arr[0]";
// document.get ... _right').src =
andy_arr[Math.abs(c-1)];
//0-1 abs = 1
//1-1 = 0, so It looks like it should now toggle.
document.getElementById('andy_left').src = andy_src1;
document.getElementById('andy_right').src = andy_src2;
}
else {
document.getElementById('andy_left').src = andy_src2;
document.getElementById('andy_right').src = andy_src1;
}
}
</script>
<div id="mini_lab_5">
<img src=""
id="andy_left"
height="100"
width="100"
/>
<img src=""
id="andy_right"
height="100"
width="100"
/>
<br />
<input type="button" value="Swap"
onclick="swap_pics();
"/>
</div>
Thanks for being a part of the community and making it great!