Javascript, CSS & HTML: как поменять местами изображения с помощью onclick et c.?

Question

У меня есть приведенный ниже код в JS, HTML, CSS, который в настоящее время выглядит так. (https://jsfiddle.net/sidsingh29/591hfwLd/33/)

В проекте 2 объекта, их расположение:

1. Красный круг: https://drexel.qualtrics.com/CP/Graphic.php?IM=IM_ezDZcerD82eHf81
2. Зеленый круг: https://drexel.qualtrics.com/CP/Graphic.php?IM=IM_3XmJ5y3lOBQD469

Что я хочу:

1. Каждый раз при щелчке по кругу 2 объекта должны чередоваться между друг другом. Например. Красный круг -> Щелкните ---> Зеленый круг. .... (R, G, G, G, R, R, G .....)

2. Движение круга всегда должно быть случайным, в любом месте измерения данного диалогового окна. Это в основном похоже на игру, и мяч должен менять цвета и перемещаться каждый раз, когда вы нажимаете на него. Два цвета - это в основном два объекта (изображения), которые я хочу использовать.

3. Код должен быть на этих языках HTML, CSS, JS

код

$('#test').click(function() {
        var docHeight = $(document).height(),
            docWidth = $(document).width(),
            $div = $('#test'),
            divWidth = $div.width(),
            divHeight = $div.height(),
            heightMax = docHeight - divHeight,
            widthMax = docWidth - divWidth;
        
        $div.css({
            left: Math.floor( Math.random() * widthMax ),
            top: Math.floor( Math.random() * heightMax )
        });
    });

#test {
        position:absolute;
        width:100px;
        height:70px;
        background-color:white;
    }
    
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"><img id = "item" src="https://drexel.qualtrics.com/CP/Graphic.php?IM=IM_ezDZcerD82eHf81" style="width: 51px; height: 51px;"></div>

Answer 1

const toggleImage = () => {
    const images = [
        "https://drexel.qualtrics.com/CP/Graphic.php?IM=IM_ezDZcerD82eHf81",
        "https://drexel.qualtrics.com/CP/Graphic.php?IM=IM_3XmJ5y3lOBQD469"
    ];
    let image = Math.random() >= 0.5 ? images[0] : images[1];
    $("#test #item").attr("src", image);
};

$('#test').click(function() {
        var docHeight = $(document).height(),
            docWidth = $(document).width(),
            $div = $('#test'),
            divWidth = $div.width(),
            divHeight = $div.height(),
            heightMax = docHeight - divHeight,
            widthMax = docWidth - divWidth;
        
        $div.css({
            left: Math.floor( Math.random() * widthMax ),
            top: Math.floor( Math.random() * heightMax )
        });
        toggleImage();
    });

#test {
        position:absolute;
        width:100px;
        height:70px;
        background-color:white;
    }
    
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"><img id = "item" src="https://drexel.qualtrics.com/CP/Graphic.php?IM=IM_ezDZcerD82eHf81" style="width: 51px; height: 51px;"></div>