JavaScript: onclick not working on image - html

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');
}
}

Answer 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>

Answer 2

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');
}
}

Answer 3

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>