переключить изображения с помощью javascript

Question

Я пытаюсь переключить эти фотографии, нажав. Javascript пришел прямо из учебника mozilla, поэтому я не уверен, почему он не работает, ничего не происходит вообще. Я развиваюсь в облаке9.

Мой HTML:

<img id="swagBunny" src="images/large.jpg" height="150" width="186" alt="Swaggy Bunny"/> 

My Java Script:

var myImage = document.querySelector('img'); 

$(function(){ 
    myImage.onclick = function() { 
     var mySrc = myImage.getAttribute('src'); 
     if(mySrc === 'images/large.jpg') { 
      myImage.setAttribute ('src','images/images.jpg'); 
     } else { 
      myImage.setAttribute ('src','images/large.jpg'); 
     } 
    }; 
}); 

Answer 1

Не понимаю, почему это не работает. Вот рабочий пример с JavaScript:

$(function(){ 
 
    var myImage = document.querySelector('img'); 
 
    myImage.onclick = function() { 
 
     var mySrc = myImage.getAttribute('src'); 
 
     if(mySrc === 'http://static.tumblr.com/1bd1b615e6da70dd71dc84fd2f47c80d/zpmncfu/oxNng9hfv/tumblr_static_95p88l86si88ks4w4wws04wk8.png') { 
 
      myImage.setAttribute ('src','https://cdn-insomniac.s3.amazonaws.com/emoji_sexface.png'); 
 
     } else { 
 
      myImage.setAttribute ('src','http://static.tumblr.com/1bd1b615e6da70dd71dc84fd2f47c80d/zpmncfu/oxNng9hfv/tumblr_static_95p88l86si88ks4w4wws04wk8.png'); 
 
     } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://static.tumblr.com/1bd1b615e6da70dd71dc84fd2f47c80d/zpmncfu/oxNng9hfv/tumblr_static_95p88l86si88ks4w4wws04wk8.png" alt="Smiley face" height="42" width="42">