Задача

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

HTML

<img src="img/dogImg.jpg" alt="" id="imgClickAndChange">
<h1 id="title">Dog Title</h1>
<p id="caption">caption for dog.</p>

Javascript

function changeImage() {

    if (document.getElementById("imgClickAndChange").src = "img/dogImg.jpg") 
    {
        document.getElementById("imgClickAndChange").src = "img/catImg.jpg";
        document.getElementById("title").innerHTML = "Cat Title";
        document.getElementById("caption").innerHTML = "caption for cat.";

    }
    else
    {
        document.getElementById("imgClickAndChange").src = "img/dogImg.jpg";
        document.getElementById("title").innerHTML = "Dog Title";
        document.getElementById("caption").innerHTML = "caption for dog.";
    }
}

var el = document.getElementById("imgClickAndChange");
el.addEventListener("click", changeImage, false);

Прямо сейчас, похоже, все меняется на информацию о кошке, но я не могу понять, как заставить ее вернуться к собаке. Наличие заголовка для собаки как в HTML, так и в Javascript кажется излишним. Есть ли более простой способ сделать все это? Благодарю!