function solve() {
    Array.from(document.getElementsByTagName('img')).forEach(img => {
        img.addEventListener('click', clickEvent)
    })
}

 function clickEvent (e) {
   let card = e.target;
   card.src = './images/whitecard.jpg'
   card.removeEventListener('click', clickEvent)


   let spans = document.getElementsByTagName('span');

   let leftSpan = spans[0];
   let rightSpan = spans[2];

   let parent = card.parentNode;

   if (parent.id === 'player1Div') {
       leftSpan.textContent = card.name;
   }
   else if(parent.id === 'player2Div'){
       rightSpan.textContent = card.name;
   }

   if (leftSpan.textContent && rightSpan.textContent) {

        let winner;
        let looser;

        if (+leftSpan.textContent > +rightSpan.textContent) {
            winner = document.querySelector(`#player1Div img[name='${leftSpan.textContent}']`)
            looser = document.querySelector(`#player2Div img[name='${rightSpan.textContent}']`)
        }
        else{
            looser = document.querySelector(`#player1Div img[name='${leftSpan.textContent}']`)
            winner = document.querySelector(`#player2Div img[name='${rightSpan.textContent}']`)
        }

        document.getElementById('history').textContent +=  `[${leftSpan.textContent} vs ${rightSpan.textContent}] `

         winner.style.border = '2px solid green';
         looser.style.border = '2px solid darkred';

        leftSpan.textContent = '';
        rightSpan.textContent = '';
   }
 }