2

Как мне сделать, что бы при нажатии на кнопку button картинки 2.jpg и 3.jpg менялись местами?

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;
}
1
  • Поменять их местами.
    – nick_n_a
    4 янв 2017 в 13:02

4 ответа 4

3

Пока писал, выше был дан ответ. Вот "Зацикленный вариант".

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>

1

Мои три копейки. Чтобы сменить только сами изображения, то можно сделать следующим образом. Я ввел идентификаторы для элементов "btn" - для кнопки и "img1" и "img2" - для изображений.

Преимущество такого подхода в том, что теги ищутся один раз, когда устанавливается обработчик события, что повышает эффективность его работы.:)

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

При желании можно таким же образом сменить атрибут alt.

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

Сама форма может выглядеть таким образом

<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>
1
  • Здесь это то выглядит экономией совсем уж на спичках честно говоря. Поиск по id - очень быстрый 4 янв 2017 в 16:06
0

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>

0

Немножко 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.github.io/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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.