javascript change img onclick according to an img that was clicked
<p>I'm trying to use the function onclick when pressing on an img.
I would like to change a big and main img ("mainPants") according to the small img that was pressed.
There is a problem with my code - every 'click' on the small img changes the main img to the last one (red pants).</p>

<p>here is my code:</p>

<pre><code>&lt;img  id="mainPants" src="images/bluePants.png"&gt;
&lt;img class="img1" id="pBlack"  onclick="changeImage()" src="images/blackPants.png"&gt;
&lt;img  class="img1" id="pPink" onclick="changeImage()" src="images/pinkPants.png"&gt;
&lt;img class="img1" id="pRed" onclick="changeImage()" src="images/redPants.png"&gt;

        &lt;script&gt;
            function changeImage(){

                var blackPants = document.getElementById("pBlack");
                var pinkPants = document.getElementById("pPink");
                var redPants = document.getElementById("pRed");

                var newImg = document.getElementById('mainPants');

                    blackPants.addEventListener('onclick', function(){
                        newImg.src = "images/blackPantsBig.png";

                    }());

                    pinkPants.addEventListener('onclick', function(){
                        newImg.src = "images/pinkPantsBig.png";
                    }());

                    redPants.addEventListener('onclick', function(){
                        newImg.src = "images/redPantsBig.png";
                    }());


            };
        &lt;/script&gt;
</code></pre>