I made 3 different inputs with 3 div. The data in the inputs pulls from wiki api an image. The problem is if I put for example in: input1: dog , input2: cat, input3: potato, i will get 3 images all the same with dog and also it shows for a brief moment cat and potato but the same in all 3.
Most likely I iterated wrong. Here is the codepen: https://codepen.io/visan90/pen/QByjKY
Can someone help ? Thanks in advance guys!
<button onclick="imageWp()">Click me</button>
<input class='info' type="text">
<input class='info' type="text">
<input class='info' type="text">
<div class="viewer"></div>
<div class="viewer"></div>
<div class="viewer"></div>
function imageWp() {
let arr = [];
$(".info").each(function(x) {
arr[x] = $(this).val();
$.ajaxPrefilter(function(options) {
if (options.crossDomain && jQuery.support.cors) {
var https = window.location.protocol === "http:" ? "http:" : "https:";
options.url = https + "//cors-anywhere.herokuapp.com/" + options.url;
}
});
$.get(
"https://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text§ion=0&page=" +
arr[x] +
"&callback=?",
function(response) {
var m;
var urls = [];
var regex = /<img.*?src=\\"(.*?)\\"/gim;
while ((m = regex.exec(response))) {
urls.push(m[1]);
}
urls.forEach(function(url) {
$(".viewer")
.empty()
.append('<img src="' + window.location.protocol + url + '">');
if (i === 0) {
return false;
}
});
}
);
});
}