Swapping images in Javascript

Question

finally started with JS and I have a question.

Why doesn't this code work (I have two images with fir and sec Ids in HTML)

function swap() {
  let x = document.getElementById("fir").src
  let y = document.getElementById("sec").src

  let z = x
  x = y
  y = z
}

But this one does

function swap() {
  let x = document.getElementById("fir")
  let y = document.getElementById("sec")

  let z = x.src

  x.src = y.src
  y.src = z
}

Is that a way to swap two variables without using a third one? — Orochi
– Orochi, Commented Dec 1, 2020 at 15:33
The first code create a new src variable and change the string value without affecting the element, but the second code create a reference of the element and directly affect the src attribute. — user2258152
– user2258152, Commented Dec 1, 2020 at 15:33
@Orochi yes it is, you can do it for more than two also [a,b,c] = [c,b,a] it's called Destructuring assignment — Endless
– Endless, Commented Dec 1, 2020 at 15:39
this is relevant to all those "illegal invocations" you sometimes get... — Endless
– Endless, Commented Dec 1, 2020 at 15:42

kishore Rajendran · Accepted Answer · 2020-12-01 15:35:52Z

2

It's because document.getElementById("fir").src returns the path of the image (string) whereas in the second case you are manipulating the DOM (reference). you can console log or apply break point the output in both cases and check what's happening.

edited Dec 1, 2020 at 15:35

answered Dec 1, 2020 at 15:34

kishore Rajendran

2783 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2258152 Over a year ago

Exactly what I'm trying to explain +1

Orochi Over a year ago

Oh so it's basically identifying the src as a string, thank you didn't know that.

kishore Rajendran Over a year ago

yes @Orochi, and about swapping [a,b] = [b,a] checkout array destructuring ;)

Endless Over a year ago

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

ControlAltDel · Accepted Answer · 2020-12-01 15:36:09Z

0

The reason the first one doesn't work is that while you have swapped the elements that your variables point to, you haven't changed the elements themselves. There are a couple of ways of swapping the elements (one of which you already posted and test)

Swap source fields
Swap outerHTML (z = x.outerHTML; x = y.outerHTML; y = z.outerHtML)
Move the actual elements (z = x.nextSibling; y.parentNode.insertBefore(x,y); z.parentNode.insertBefore(y,z);

Example 3 actually is incomplete: You'd also need to handle the case where there's no nextSibling. But hopefully this gives you more perspective of what attempt 1 and 2 are doing as well as how to change and manipulate elements

answered Dec 1, 2020 at 15:36

ControlAltDel

35.2k10 gold badges60 silver badges86 bronze badges

Collectives™ on Stack Overflow

Swapping images in Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related