Я использовал приведенный ниже скрипт для запуска игры на память с изображениями. Игра работает отлично. Но я попытался отобразить изображение во всплывающем окне, как только совпадение найдено в игре. но всплывающее окно не показывает изображение на нем, а только имя изображения на панели ссылок.
скрипт пробуется
for (i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function (e) {
var turnable = e.target.dataset.turnable;
//first click
if (!wait && lastKnownButtonId == undefined && lastKnownButtonNumber == undefined && turnable == 'true') {
e.target.dataset.turnable = 'false';
e.target.innerHTML = getgImage(event.target.dataset.number);
e.target.style.backgroundColor = 'yellow';
lastKnownButtonId = e.target.id;
lastKnownButtonNumber = e.target.dataset.number;
}
//second click
else if (!wait && lastKnownButtonId != undefined && lastKnownButtonNumber != undefined && turnable == 'true' && e.target.id != lastKnownButtonId) {
e.target.dataset.turnable = 'false';
e.target.innerHTML = getgImage(event.target.dataset.number);
//match
if (e.target.dataset.number == lastKnownButtonNumber) {
e.target.style.backgroundColor = '#00FF7F';
document.getElementById(lastKnownButtonId).style.backgroundColor = '#00FF7F';
getpicture();
lastKnownButtonId = undefined;
lastKnownButtonNumber = undefined;
matches++;
if (matches == 8) {
showWinScreen();
//clearTimeout(timeoutHandle);
document.getElementById("finalMove").innerHTML = moves;
}
}
//no match
else {
document.getElementById(lastKnownButtonId).style.backgroundColor = 'red';
e.target.style.backgroundColor = 'red';
wait = true;
setTimeout(() => {
e.target.dataset.turnable = 'true';
e.target.style.backgroundColor = 'white'
e.target.innerHTML = getgImage(0);
var tempLastClickedButton = document.getElementById(lastKnownButtonId);
tempLastClickedButton.dataset.turnable = 'true';
tempLastClickedButton.style.backgroundColor = 'white';
tempLastClickedButton.innerHTML = getgImage(0);
lastKnownButtonId = undefined;
lastKnownButtonNumber = undefined;
wait = false;
}, 1000);
}
}
});
}
вышеприведенный скрипт для памяти где он проверяет совпадение изображений. скрипт пытается отобразить изображение на всплывающем экране, вызывается с помощью функции getpicture () под условием совпадения
function getpicture(){
var pic= document.getElementById('canvas');
pic.style.display = 'block';
pic.style.width=200+"px";
pic.style.height=200+"px";
pic.innerHTML= getgImage(event.target.dataset.number);
url=pic.innerHTML;
window.open(url,"pic",'width=pic.stylewidth,height=pic.style.height,resizable=1');
}
, когда я запускаю этот код, когда сопоставление выполнено, появляется всплывающее окно, но изображение не отображается, но в строке ссылок отображается имя изображения, например: http://localhost/PROJECT/%3Cimg%20src=%22Annotated%20Dataset / images / MAN_SHOW_FW183.jpg% 22% 3E
Я думаю, что функция Я пытался отобразить изображение на всплывающем окне неправильно, Может кто-нибудь помочь мне с этой проблемой.
Спасибо