How can I do that when I clicked on the button button pictures 2.jpg and 3.jpg switch places?

HTML:

 <form name="form1"> <img name="pic" src="3.jpg" alt=""> <img name="pic" src="2.jpg" alt=""> <input type="button" value="Кнопка кнопка" onclick="window.alert('кнопка');"> </form>

Js:

 function changeImage(form) { form.pic.src = form.imagename.value; }
  • Swap them. - nick_n_a

4 answers 4

While writing, the answer was given above. Here is a "looped version".

 function changeImage() { var temp = document.getElementById("pic1").src; document.getElementById("pic1").src = document.getElementById("pic2").src; document.getElementById("pic2").src = temp; } 
 <form name="form1"> <img id="pic1" src="http://pikchyriki.net/avatar/krutye/100/32.jpg" alt=""> <img id="pic2" src="http://pikchyriki.net/avatar/krutye/100/36.jpg" alt=""> <br> <input type="button" value="Кнопка" onclick="changeImage()"> </form>

    My three penny. To change only the images themselves, it can be done as follows. I entered identifiers for the "btn" elements - for the button and "img1" and "img2" - for images.

    The advantage of this approach is that the tags are searched once when an event handler is installed, which increases its efficiency. :)

     <script> (function () { var btn = document.getElementById("btn"); btn.onclick = function () { var img1 = document.getElementById("img1"); var img2 = document.getElementById("img2"); return function () { var tmp = img1.src; img1.src = img2.src; img2.src = tmp; } }(); })(); </script>

    If you wish, you can change the alt attribute in the same way.

     tmp = img1.alt; img1.alt = img2.alt; img2.alt = tmp;

    The form itself may look like this.

     <form name="form1"> <img name="pic" id="img1" src="3.jpg" alt=""> <img name="pic" id="img2" src="2.jpg" alt=""> <input type="button" id="btn" value="Кнопка кнопка"> </form> <script> (function () { var btn = document.getElementById("btn"); btn.onclick = function () { var img1 = document.getElementById("img1"); var img2 = document.getElementById("img2"); return function () { var tmp = img1.src; img1.src = img2.src; img2.src = tmp; } }(); })(); </script>
    • Here it looks like a saving on the matches at all to be honest. Search by id - very fast - Duck Learns to Hide

     function func() { form.insertBefore(document.getElementById('a1'), document.getElementById('a2')); }; 
     <form name="form1" id="form"> <img name="pic" src="https://www.gravatar.com/avatar/03d3b07e78adec607a64a7509649f43a?s=32&d=identicon&r=PG&f=1" alt="" id="a2"> <img name="pic" src="https://lh3.googleusercontent.com/-DCyrIQ1a2gQ/AAAAAAAAAAI/AAAAAAAAIAc/30YRPdK41Gs/photo.jpg?sz=32" alt="" id="a1"> <input type="button" value="Кнопка кнопка" onclick="func()"> </form>

      Little ES6:

       const btn = document.querySelector('[type="button"]'); const [ pic1, pic2 ] = document.querySelectorAll('[name="pic"]'); btn.addEventListener('click', () => [ pic1.src, pic2.src ] = [ pic2.src, pic1.src ]); 
       <form name="form1"> <img name="pic" src="https://dabeng.imtqy.com/img/angularjs.png" alt=""> <img name="pic" src="http://icons.iconarchive.com/icons/sicons/basic-round-social/256/ember-js-icon.png" alt=""> <input type="button" value="Кнопка кнопка"> </form>