Create javascript var function

Question

Im trying to create a small memory game... in which the time is multiplied by the number of moves made by the user...

After the user finishing making all pars, the javascript runs function:

 function finish() {
    stopCount();
    var cnt1 = $("#counting").val();
    var tim = $("#timecount").val();
    var totalpuntos = cnt1 * tim; 
    var mensaje = "Congrats! You made <strong>"+cnt1+"</strong> moves in <strong>"+tim+"</strong> seconds, making a total of <strong>"+totalpuntos+"</strong> points!";
    $('#finaldiv').show();
}

In the HTML goes like this:

<div id="finaldiv">
<div style="width: 100%; height: 100%; background-image: url('images/overall.png'); z-index:990; position: absolute; top: 0; left: 0;">
<div style="background-color:#fff; margin:100px auto 0 auto; height:300px; width:500px; padding:10px">

<script language="javascript">
document.write (mensaje);
</script>

</div>
</div>
</div>

It does show the text box but it doesn't display the message :(

It works if I add this to the function:

 alert(mensaje);

But I need it to be displayed in the box and not in a alert message, so the score can be submitted...

What is wrong with the script? why it doesn't display the message in the box? :(

Answer 1

I hope you want to show the score within the final div. Why don't you just fill it before you show the div.

function finish() {
    stopCount();
    var cnt1 = $("#counting").val();
    var tim = $("#timecount").val();
    var totalpuntos = cnt1 * tim; 
    var message = "Congrats! You made <strong>"+cnt1+"</strong> moves in <strong>"+tim+"</strong> seconds, making a total of <strong>"+totalpuntos+"</strong> points!";
    $('#message').html(message);
    $('#finaldiv').show();
}

EDIT: Modify your HTML like this.

<div id="finaldiv">
    <div style="width: 100%; height: 100%; background-image: url('images/overall.png'); z-index:990; position: absolute; top: 0; left: 0;">
        <div id="message" style="background-color:#fff; margin:100px auto 0 auto; height:300px; width:500px; padding:10px">
    </div>
</div>