Javascript - Create button dynamically

Question

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

Take a guess! You've come this far! That statement is adding a bit of HTML to the document. You want to add some more html; you need the markup to add a button/anchor. — Luke
– Luke, Commented May 19, 2015 at 4:14

Rohit Arora · Accepted Answer · 2015-05-19 04:16:02Z

2

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

}

answered May 19, 2015 at 4:16

Rohit Arora

2,2622 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jobst · Accepted Answer · 2015-05-19 04:26:55Z

0

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.

answered May 19, 2015 at 4:26

Jobst

5594 silver badges13 bronze badges

Comments

Godti vinod · Accepted Answer · 2015-05-19 04:33:27Z

0

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');})

answered May 19, 2015 at 4:33

Godti vinod

162 bronze badges

Collectives™ on Stack Overflow

Javascript - Create button dynamically

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related