Databases
StackOverflow2013
Postsdbo
POjquery change onclick
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery change onclick
    text
    copied!<p>Hello I'm trying to create a on-line photalbum. So the idea is to have a picture and two elements with a onclick event to load next and previous image in the album. I created a function for this, but it only works once. If you press the previous or next button the onclick is executed, but the onclick properties are not changed and a simple alert box tells me that the code isn't executed the second time.</p> <p>I am sorry for the dutch language in my code foto should be Photo!</p> <p>My HTML looks like this.</p> <pre><code>&lt;div id="fotolarge"&gt; &lt;span class="arrow arrowright"&gt;&lt;/span&gt; &lt;span class="arrow arrowleft"&gt;&lt;/span&gt; &lt;span id="fotoloading"&gt;&lt;/span&gt; &lt;img id="foto"/&gt; &lt;/div&gt; </code></pre> <p>My javascript looks like this</p> <pre><code>function loadPhoto(src){ $("#fotoloading").css("z-index","3"); $currentIndex = jQuery.inArray(src, $photoArray); //next image $nextIndex = $currentIndex + 1; if($nextIndex &lt; $photoArrayLength){ $(".arrowright").attr("onclick", "loadPhoto('" + $photoArray[$nextIndex] + "')"); } else{ $(".arrowright").attr("onclick", "loadPhoto('" + $photoArray[0] + "')"); } //previous image $previousIndex = $currentIndex - 1; if($previousIndex &gt;= 0){ $(".arrowleft").attr("onclick", "loadPhoto('" + $photoArray[$previousIndex] + "')"); } else{ $(".arrowleft").attr("onclick", "loadPhoto('" + $photoArray[$photoArrayLength -1] + "')"); } var loader = new ImageLoader(src); loader.loadEvent = function(url, image){ $("#fotoloading").css("z-index","2"); $("#foto").replaceWith(image); $("#foto").css("display", "block"); calcmiddle(); } loader.load(); } </code></pre> <p>The variables $photoArray and $photoArrayLength are global variables. $photArray holds a list of the sources of the images. The Imageloader is not the problem, because is doesn't work either is that part is comment out.</p> <p>I hope someone has an idea of how to fix this. I have tried the jquery .click() like this</p> <pre><code>$(".arrowright").click(function(){ loadPhoto($photoArray[0]); }); </code></pre> <p>Then it works partly. It creates in infinite loop of executing loadPhoto();</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload