CODEWITHSUNDEEP
javascriptjquery
DBS
DBS

Reputation: 1147

Javascript - Create button dynamically

I would like to create a button dynamically using JavaScript and jQuery.

The code below is the final piece to a quiz and when the quiz is finished, it gives the results and states you have finished. I would like to create a button dynamically using JS during this time which takes the user back to the home page (index.html).

Any help is greatly appreciated.

function displayFinalSlide(){

    $(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div>');

}//display final slide

Upvotes: 1

Views: 159

Answers (3)

Godti vinod
Godti vinod

Reputation: 16

You can replace the following code in your code 

function displayFinalSlide(){
$(stage).append('<div class="questionText">You have finished the quiz!<br>   <br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div>
<br/><button type="button" id="goback"> Home </button> '); } }); $("#goback").on("click",function(){window.location.assign('index.html');})

Upvotes: 0

Jobst
Jobst

Reputation: 559

You could create an invisible button that get you back to the home page:

<button id="finalButton" style="visibility:hidden">Go back</button>

and then in the function "displayFinalSlide()" above:

$('#finalButton').show();

I have omitted the jquery for the button click to get back to the main site.

Upvotes: 0

Rohit Arora
Rohit Arora

Reputation: 2252

Try this: Like you are adding the html, Just add the anchor tag/Button as well

function displayFinalSlide(){

    $(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div><a href="index.html">Index Page</a>'); // here in href you can give the path where you want to redirect to

}

Upvotes: 2

Related Questions