我们可以用 js 和 html 做多个动作吗

Question

I have a (simple) question : is it possible to do 2 differents actions when I click on a picture on an html page? Are there examples to explain that?

Thanks in advance

Answer 1

Sure that's easy.

document.getElementById("myPic").addEventListener("click", function(e){
    doActionOne();
    doActionTwo();
});

Answer 2

You can do simultaneous actions within an onclick event attached to your picture, using jQuery or plain javaScript.
In jQuery for instance, where #myImg is the id of the image:

HTML image tag:

<img id ="myImg" alt="image" src="someImg.png">

jQuery code: https://api.jquery.com/click/

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <script type="text/javascript">

        (function ($) {
            $(window).load(function () {
                $("#myImg").click(function () {
                   //Change source of the image
                   $(this).attr( "src", "anotherimage.png" );
                    // Do something else here...
                });

            });
        })(jQuery);

    </script>

Using plain javaScript:

<script type="text/javascript">
 window.onload = function() {
   document.getElementById('myImg').addEventListener('click', function (e) {
     //Change source of the image
      this.setAttribute('src', 'anotherimage.png');
     // Do something else here...
   });
 };
</script>