Src attribute switch with JavaScript

Question

I want to make a simple switch of <img src="..."> depending on the present src with JavaScript. So if the image #plus_1 is clicked, the script should check if the string 'plus' is in the src attribute, and if yes, the src attribute should change. Not sure what mistake I made, help would be very much appreciated!

JavaScript:

   function ek_ak(id) {
            var ement = document.getElementById(id);
            if (ement.img.src.includes("plus") == true) {
                ement.img.src == "minusred.png";}
        }

HTML

<img src="plusred.png" id="plus_1" onclick="ek_ak('plus_1')"/>

Hint : = vs ==

Suresh Atta
– Suresh Atta

2017-03-03 07:43:13 +00:00
Commented Mar 3, 2017 at 7:43 — Suresh Atta
– Suresh Atta, Commented Mar 3, 2017 at 7:43
ement.img.src = "minusred.png"

Satpal
– Satpal

2017-03-03 07:44:00 +00:00
Commented Mar 3, 2017 at 7:44 — Satpal
– Satpal, Commented Mar 3, 2017 at 7:44
and includes function not supported by IE.

degr
– degr

2017-03-03 07:45:01 +00:00
Commented Mar 3, 2017 at 7:45 — degr
– degr, Commented Mar 3, 2017 at 7:45

gyre · Accepted Answer · 2017-03-03 07:49:45Z

1

A few pointers:

ement is already a DOM element: it has no img property but you can access src on it directly;
Regular expressions can be used instead of String#includes;
You should use = as the assignment operator, instead of == (loose comparison).

function ek_ak (id) {
  var ement = document.getElementById(id);
  if (/plus/.test(ement.src)) {
    ement.src = "minusred.png"
    console.log(ement.src)
  }
}

<img src="plusred.png" id="plus_1" onclick="ek_ak('plus_1')" />

answered Mar 3, 2017 at 7:49

gyre

16.8k4 gold badges40 silver badges47 bronze badges

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

Comments

Weedoze · Accepted Answer · 2017-03-03 07:55:32Z

1

You can directly send the element to the function using onclick="ek_ak(this). This will avoid the unnecessary call to retrieve the element.
To get the src you can simply call element.src. The element is your img
The call .includes(..) is returning a boolean value. You do not need to add == true.
You were using element.src == "minusred.png. == is used to compare elements not to assign. You should use =

function ek_ak(element) {
  console.log("Current src = " + element.src);
  if (element.src.includes("plus")) {
    element.src = "minusred.png";
    console.log("Next src = " + element.src);
  }
}

<img src="plusred.png" id="plus_1" onclick="ek_ak(this)" />

answered Mar 3, 2017 at 7:55

Weedoze

14k2 gold badges38 silver badges65 bronze badges

Collectives™ on Stack Overflow

Src attribute switch with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related