JavaScript: onclick not working on image

Question

I am trying to change the image by clicking on it. I have written the codes and it's not working.

<div class="img fadeIn" >
        <img src="logo.png" height="90px" width="320px" onclick="change()" id="koo" />
    </div>

JavaScript code:

function change() {
var mySrc = this.getAttribute('src');
    if( mySrc == 'logo.png' ){
        this.setAttribute('src','logo1.png');
        } else {
        this.setAttribute('src','logo.png');
        }
    }

@ZombieChowder It would be better if we make changes and debug the current code instead of changing the whole logic — Arex
– Arex, Commented Jul 4, 2018 at 10:03
@Arex I'm just sending him a link to see how it's done and amend the code to his own. The whole teach a man to fish, give him a fish thing.. — ZombieChowder
– ZombieChowder, Commented Jul 4, 2018 at 10:04

Arex · Accepted Answer · 2018-07-04 10:00:34Z

1

You have to put the element as an argument to the function. I have attached the working code.

function change(t) {
var mySrc = t.getAttribute('src');
    if( mySrc == 'logo.png' ){
        t.setAttribute('src','logo1.png');
        t.setAttribute('alt','logo1');
        } else {
        t.setAttribute('src','logo.png');
        t.setAttribute('alt','logo');
        }
    }

<div class="img fadeIn" >
        <img src="logo.png" height="90px" width="320px" onclick="change(this)" id="koo" alt="logo"/>
    </div>

answered Jul 4, 2018 at 10:00

Arex

6943 silver badges10 bronze badges

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

2 Comments

Arex Over a year ago

Do tell me if any more help is needed

Arex Over a year ago

@RA'sal Glad to help :)

falsy · Accepted Answer · 2018-07-04 10:09:35Z

0

There is also a way to do this. Please refer to the code

<div class="img fadeIn">
     <img src="logo.png" height="90px" width="320px" onclick="change()" id="koo" />
</div>

function change() {
    var imgTag = event.target;
    var mySrc = imgTag.getAttribute('src');
    if( mySrc == 'logo.png' ){
        imgTag.setAttribute('src','logo1.png');
    } else {
        imgTag.setAttribute('src','logo.png');
    }
}

answered Jul 4, 2018 at 10:09

falsy

13 bronze badges

Comments

TRIKONINFOSYSTEMS · Accepted Answer · 2018-07-04 10:43:43Z

0

Try This!

var ele = document.getElementById("koo");
ele.addEventListener('click',function(){
var src = (ele.getAttribute('src') == "logo.png")?"logo1.png":"logo.png";
ele.setAttribute('src',src);
})

<div class="img fadeIn" >
      <img src="logo.png" height="90px" width="320px" id="koo" />
</div>

answered Jul 4, 2018 at 10:43

TRIKONINFOSYSTEMS

6401 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

JavaScript: onclick not working on image

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related