This code is supposed to shuffle between two images as many times as per user input. But the image swap done at last is only shown at the site. How to make the image change appear in website every single time its changed in the loop?
function runGif(){
var count = document.getElementById("numb").value;
var i=0;
for(i=0; i<=count; i++){
if(count%2==0){
even();
} else {
odd();
}
console.log("LAP");
}
}
function even(){
document.getElementById("guy").src="2.png";
}
function odd(){
document.getElementById("guy").src="1.png";
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SHUFFLE BODY</title>
</head>
<body>
<img src="1.png" id="guy">
<input type="text" id="numb">
<button onclick="runGif()">SUBMIT</button>
</body>
<script src="script.js">
</script>
</html>You have to use timeout and delay function of js