Change the order of images by clicking buttom

Question

Help me to solve this trivial problem.

I need to change an image order within button_Click. How can I do this?

Actualy I need the **simplest** way, **no jQuery**.

Will be very grateful for piece of working code with explanation - It's a headache for me

[Here][1] is my code

PS I already got some advises, but all them conneted to jQuery

No jQuery

<div id="one"> 
              
        <input id="b1" value="Change the image order" onclick="change_order()" type="button"/>
       
        <h1 style="font-size: 12"> Header HeaderHeaderHeader</h1> 
        <p style="font-size:8"> text text text </p>
    </div>


<div id="picContainer">
        
        <img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
        <img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
        <img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
        <img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
        
    </div>

Hope this answer helps http://stackoverflow.com/questions/282670/easiest-way-to-sort-dom-nodes — Kalyan Chakravarthy S, Oct 31 '14 at 11:56

score 0 · Answer 1 · answered Oct 31 '14 at 12:50

Hope you find the below code working as per your requirement.

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button><br/>
<br/>
<img height="50" width="50" id="demo1" src="http://www.largeyellowbutton.com/largeyellowbutton.jpg"></img>
<br/>
<img height="50" width="50" id="demo2" src= "http://libn.com/wp-files/graphics/register-button_0.jpg"></img>
<br/>
<img height="50" width="50" id="demo3" src=    "http://mygimptutorial.com/images/button-with-reflection/11.jpg"></img>

<script>
 function myFunction() {
 var temp=document.getElementById("demo1").src;
 document.getElementById("demo1").src = document.getElementById("demo2").src;
 document.getElementById("demo2").src = document.getElementById("demo3").src;
 document.getElementById("demo3").src = temp;
 }
</script>

</body>
</html>

TheGaME · Answer 2 · 2014-11-02T05:05:49.943

Use the code which I have posted above in case you know the number of image inside your div. If your unsure about the number of images your going to add then use the below code.

<html>
<head>
<script>
function myFunction() {
var count=document.getElementById("picContainer").getElementsByTagName("img").length;
//below code captures the first image source before 
//changing the image order. This is also used to assign as source to the
// last image tag.
var temp=document.getElementById("pict_01").src;
var i;

for(i=1;i<=count;i++)
{
 //If value of i is equal to count then, assign the first image source
 // captured in temp variable to the last image inside the div.
 if(i==count){
 document.getElementById("pict_0"+i).src=temp;
 }

//below code assigns image in decreasing order.
document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src;
}
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value=" Change an image order"></input> 
<br/>
<div id="picContainer">
    <img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
    <img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
    <img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
    <img id="pict_04" src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
</body>
</html>

Thanks for answer !))Check please, What's wrong with this code? http://jsfiddle.net/SantaUA/e6sdw10n/5/ — Nikolay, Oct 31 '14 at 13:44
@Oleg Plevin..Use this javascript code. function myFunction() { var count=document.getElementById("picContainer").getElementsByTagName("img").length; var temp=document.getElementById("pict_01").src; var i; for(i=1;i<=count;i++) { if(i==count){ document.getElementById("pict_0"+i).src=temp; } document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src; } } — TheGaME, Oct 31 '14 at 14:59
I can't get why this code doesn't work ((( Please, help to correct mistakes. I'll be very grateful http://jsfiddle.net/SantaUA/scn6mrtj/ — Nikolay, Nov 01 '14 at 18:54
Check the above code which i have modified by using the jsfiddle link which you have provided. The above code works for me in jsfiddle. Please confirm back. — TheGaME, Nov 02 '14 at 05:07

Change the order of images by clicking buttom

2 Answers2