I have a code that when I press a button, the screen changes with div
visibility. In Edge , once the old screen disappears, the new screen loads and then a prompt appears. However, in Chrome , the prompt appears before the new screen is loaded and even before the old screen has disappeared. I am making a picture quiz so it is important that the new page (with the picture) displays before the prompt. Is there any way to delay the Chrome prompt?
It is not possible to load the entire page first because it will directly end the quiz as it is in a loop.
function classic() {
document.getElementById('explain').style.display = "none";
document.getElementById('game').style.display = "block";
document.body.style.background = "grey";
var quiz = [
[1, 'Which country is this flag from?', 'netherlands'],
[2, 'Which country is this flag from?', 'belgium'],
[3, 'Which country is this flag from?', 'france'],
[4, 'Which country is this flag from?', 'germany'],
[5, 'Which country is this flag from?', 'united kingdom'],
[6, 'Which country is this flag from?', 'italy'],
[7, 'Which country is this flag from?', 'russia'],
[8, 'Which country is this flag from?', 'norway'],
[9, 'Which country is this flag from?', 'brazil'],
[10, 'Which country is this flag from?', 'morocco'],
[11, 'Which country is this flag from?', 'united states'],
[12, 'Which country is this flag from?', 'kazakhstan'],
[13, 'Which country is this flag from?', 'japan'],
[14, 'Which country is this flag from?', 'argentina'],
[15, 'Which country is this flag from?', 'portugal'],
[16, 'Which country is this flag from?', 'luxembourg'],
[17, 'Which country is this flag from?', 'mexico'],
[18, 'Which country is this flag from?', 'china'],
[19, 'Which country is this flag from?', 'egypt'],
[20, 'Which country is this flag from?', 'nigeria']
];
var nummer = 0;
var answer;
var response;
var score = 0;
for (var i = 0; i < quiz.length; i += 1) {
nummer++
document.getElementById('flag').src = "flags/flag" + nummer + ".png";
answer = prompt(quiz[i][1]);
if (answer === null) {
window.alert("You cancelled the prompt. Please reload the page to play again.")
}
response = answer.toLowerCase();
if (response === quiz[i][2]) {
score++
I want the prompt to display after the first picture in the quiz is displayed.
You can use a setTimeout or set Interval until element is visible then display the prompt. Almost same answer found here
setTimeout(function(){ // Do your thing here e.g show promt
}, 3000); // It will show promt after 3 seconds
And here is set Interval
var visibility= setInterval(function() {
if ($('#element').length) {
//Stop the interval when it is visible
clearInterval(visibility);
}
}, 300);
Its quite simple, Just try this,
document.getElementById('flag').src = "flags/flag" + nummer + ".png";
document.getElementById('flag').onload = function()
{
answer = prompt(quiz[i][1]);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.