HTML5 re-arrange elements

Question

I have been trying to figure out how to re-arrange the order of the photos. But they must correspond with the correct function. I can't seem to figure it out. If you have three photos like this:

<img id='slot1' src="img1.jpg" onClick="function1();">
<img id='slot2' src="img2.jpg" onClick="function2();">
<img id='slot3' src="img3.jpg" onClick="function3();">

I can re-order the actually image, but how do I re-order the image and its associated function?

For example, when clicking img1.jpg, it should always run function1(), no matter what order they are in. Thanks

Edit: Originally, I didn't post the code properly.

do you mean you're trying to rearrange the images dynamically using javascript? search for `parentElement` and `insertBefore` — Jaromanda X, Aug 24 '16 at 10:05
`I can re-order the actually image` - can you show how you are doing this — Jaromanda X, Aug 24 '16 at 10:06
what's the difference between these functions? enumerated functions/variables/properties/classNames/... are rarely a good sign, and in most cases, there's a better, less verbose and more flexible solution — Thomas, Aug 24 '16 at 10:07
when you change the images dynamically, you can dynamically change the attribute "onclick" too. I am assuming you are changing "src" for changing images. — Newinjava, Aug 24 '16 at 10:11

score 1 · Answer 1 · edited May 23 '17 at 12:33

Here we see another reason not to use obtrusive inline event handlers. Change HTML to

<div class="image-container">
  <img id='slot1' src="img1.jpg" />
  <img id='slot2' src="img2.jpg" />
  <img id='slot3' src="img3.jpg" />
</div>

and attach event like this:

var container = document.querySelector('.image-container')
container.addEventListener('click', function(e) {
  if (e.target.tagName === 'IMG') {
    // find the index of e.target
    // call function1,2 or 3 depending on index
  }
})

How to find the index: check this answer.

Here is a quick demo: https://jsfiddle.net/th174cnz/.

score 0 · Answer 2 · answered Aug 24 '16 at 10:24

There are definitely more elegant methods than this, however if you are simply swapping the image sources around, you can do exactly the same with the onclick event.

var temp=document.getElementById('slot1').onclick;
document.getElementById('slot1').onclick=document.getElementById('slot2').onclick;
document.getElementById('slot2').onclick=temp;

score 0 · Answer 3 · answered Aug 24 '16 at 10:37

Assuming that you have changed the src of image dynamically this is a simple code

HTML

<img id="slot1" src="http://chandra.harvard.edu/graphics/photo/high_res_thm.jpg"  onclick="function1()">
<img id="slot2" src="http://umbra.nascom.nasa.gov/images/latest_mk4_icon.gif"  onclick="function2()">
<input type="button" id="button" onclick="shuffleImages()" value="Click"/>

Javascript

function shuffleImages() 
{
  var src1 = document.getElementById("slot1").getAttribute('src');
  var src2 = document.getElementById("slot2").getAttribute('src');
  var click1 = document.getElementById("slot1").getAttribute('onclick');
  var click2 = document.getElementById("slot2").getAttribute('onclick');
  document.getElementById("slot1").setAttribute("src", src2);
  document.getElementById("slot1").setAttribute("onclick", click2);
  document.getElementById("slot2").setAttribute("src", src1);
  document.getElementById("slot2").setAttribute("onclick", click1);
}

here is the simple demo :- https://jsfiddle.net/900d62dL/ Note: the solution provided above is good and optimised. This demo is just for your understanding.

HTML5 re-arrange elements

3 Answers3