JavaScript: onclick не работает на изображении

Question

Я пытаюсь изменить изображение, нажав на него. Я написал коды, и они не работают.

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

Код JavaScript:

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

Answer 1

Существует также способ сделать это. Пожалуйста, обратитесь к коду

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

Попробуйте!

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>

Answer 3

Вы должны поместить элемент в качестве аргумента функции. Я приложил рабочий код.

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>