I need to arrange 8 images in the order of user preference. 2 images are presented to the user for pairwise comparison: one in the first <img> tag, the second-in the second <img> tag. I want to put the numbers of all the images in an array. Then run the standard JS function sort on this array.
As an argument to the sort function, provide a function that returns 1 if the user likes the left image and -1 if the user likes the second image more. This function will upload an image with the number A to the first <img> tag, and an image with the number B to the second <img> tag (numbers A and B will be passed to the comparison function from the sort function). For each of the two <img> tags, I can define an onClick event handler function that will trigger when the user selects an image uploaded to this <img> tag
How should I organize the code to make it work? Do I have to use some tricky combination of setTimeout with callbacks (or promises)?
<body>
<img id = 'img1' src = '1.png' onclick="clickImg(1)">
<img id = 'img2' src = '2.png' onclick="cliclImg(2)">
</body>
<script>
let compared = 0;
function clickImg(img_number){
if (img_number == 1)
compared = 1;
else
compared = -1;
}
function compare(n1,n2){
document.getElementById('img1').src = '' + n1 + '.png';
document.getElementById('img2').src = '' + n2 + '.png';
// Here I should wait for a user click on one of the images
result = compared;
compared = 0;
return result;
}
array = [0,1,2,3,4,5,6,7];
array.sort(compare);
</script>