How to call function second time?

Tarun Rathore

I have coding of a quiz with an array which has questions and options. First time the function is called successfully but when restarting the quiz, the function is not invoked. This is the code which is not working:

$(document).on('click', '#restart', function() {
showQuestions();
});

The whole coding is: // Showing questions and options

var x = "";
var i = 0;

function showQuestions() {
document.getElementById('holder').
innerHTML = x;

for (j = 0; j < words[i].options.length; j++) {
if (i < words.length) {
$('#holder').append("

" +
words[i].options[j] + "

");
}
}
if (i < words.length) {
$('#holder').append('

' +
words[i].question + '

');
i++;
}
}

showQuestions();

// Calling function on click of alternatives

$('#holder').on('click',
'.alternatives', function() {
showQuestions();
});

// Checking answers

score = 0;
k = 0;

$(document).on('click',
'.alternatives', function() {
let guess = this.id;
if (k < words.length) {
var correct = words[k].answer;
k++;
}
if (guess === correct) {
score++;
}

 if (score <= words.length) {
     z = score;
     document.getElementById('summary').innerHTML = z;
 }

 if (k >= words.length) {
     $('#holder').fadeOut();
     $('#restart').fadeIn();
 }

});

// Restarting Quiz

$(document).on('click', '#restart', function() {
$(this).fadeOut();
$('#holder').fadeIn();
showQuestions();
});

Lost User

You could make your question clearer by using <pre> tags* around the code block, indenting properly, and removing all those redundant blank lines, so it looks like:

$(document).on('click', '#restart', function() {
$(this).fadeOut();
$('#holder').fadeIn();
showQuestions();
});

*or use the code button at the top of the edit window.

Shraddha_Patel

You can call this function on restart button onClick event... function restartquiz(){ $(document).on('click', function() { showQuestions(); }); }