Javascript: How to swap value of two images?

Question

Ok so I have a JavaScript function that swaps the src of two images which swaps the images themselves no problem. However, I have two values that need switched along with the images themselves so I can later add the values up correctly. An example being,

img src="ble.jpg" id="F" value="" onclick="swap(5)"

img src="ilk.jpg" id="4" value="2" onclick="swap(6)"

So, I want to swap the above values as well so that the first image obtains a value of "2" and the second a value of "". Is there a way to do this? I have been trying to figure out a way for days and it just isn't clicking.

Here is the function to swap images:

var toggle=0;
var saveNum;
var pic="0";

function swap (elem)
{
   if (toggle == 0)
   {
        saveNum = elem;
        pic = document.images[parseInt(elem)].src;
        toggle++;
   }
   else 
   {
        hold = document.images[parseInt(elem)].src;
        document.images[parseInt(elem)].src = pic;
        document.images[parseInt(saveNum)].src = hold;

        toggle = 0;
   }

}

Where is the function used to swap the images? without that I can only suggest you change the attributes like this - `document.getElementById('4').value='2';` — NewToJS, Feb 27 '16 at 23:42
Welcome to Stack Overflow. Please include the relevant part of your Javascript too, since your question is directly about it. — Boaz, Feb 27 '16 at 23:42
Related questions: [Can I add custom attribute to HTML tag?](http://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag) and [How to store arbitrary data for some HTML tags](http://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags?lq=1) — Yogi, Feb 27 '16 at 23:54

Zakaria Acharki · Accepted Answer · 2016-02-27T23:54:41.133

You could achieve that using .value :

var img_1_value = document.getElementById("F").value;
var img_2_value = document.getElementById("4").value;

document.getElementById("F").value = img_2_value;
document.getElementById("4").value = img_1_value;

Because the value is not a valid attribute for img tag, so better if you could use data attributes instead (suggested in comments below) :

<img src="ble.jpg" id="F" data-value="" onclick="swap(5)" />
<img src="ilk.jpg" id="4" data-value="2" onclick="swap(6)"/>

var img_1_value = document.getElementById("F").getAttribute('data-value');
var img_2_value = document.getElementById("4").getAttribute('data-value');

document.getElementById("F").setAttribute('data-value', img_2_value);
document.getElementById("4").setAttribute('data-value', img_1_value);

Hope this helps.

I have never heard of `data-*` which is why I used value. Sorry for any confusion. — user5991813, Feb 27 '16 at 23:52
@user5991813 those are rather new HTML5 attributes and are used for custom data, just like you're doing. Zakaria, +1 from me now. — Shomz, Feb 27 '16 at 23:53

Shomz · Answer 2 · 2016-02-28T00:03:48.953

You can do it a lot simpler, for example:

function swap(n, t){
  var img = document.images[parseInt(n)];
  var src = img.src;
  var val = img.getAttribute('value');
  img.src = t.src;
  img.setAttribute('value', t.getAttribute('value'));
  t.src = src;
  t.setAttribute('value', val);  
}

<img src="https://cdn3.iconfinder.com/data/icons/supermario/PNG/Paper-Mario.png" id="F" value="" onclick="swap(1, this)" />
<img src="https://cdn3.iconfinder.com/data/icons/supermario/PNG/Mushroom---Super.png" id="4" value="2" onclick="swap(0, this)" />
<img src="http://www.file-extensions.org/imgs/app-icon/128/5399/super-mario-bros-x-icon.png" value="asd" onclick="swap(3, this)" />
<img src="http://www.smflashback.ga/img/mario.png" value="qwe" onclick="swap(2, this)" />

Note that I'm also passing the reference of the clicked image to the swap function.

Javascript: How to swap value of two images?

2 Answers2