Create javascript function var

Question

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

After the user has completed all the parses, the javascript function runs:

 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 HTML it 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 shows a text box but does not display a message :(

It works if I add this to a function:

 alert(mensaje);

But I need it to be displayed in the field, and not in the warning message, so the rating can be sent ...

What happened to the script? why doesn’t it display the message in the field ?: (

Answer 1

Hope you want to show the score in the final div. Why don't you just populate it before showing 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: HTML .

<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>

Answer 2

- . mensaje , . (var mensaje; ) finish().

, .

Answer 3

jQuery, $.html():

$(' YOUR TARGET ELEMENT ').html(mensaje);

JSBin

. , , $.append() $.html().

:

• jQuery.append()
• jQuery.html()

, .

Answer 4

The problem is that you are trying to set the contents of a div in a place where your code does not know the weather, or the function does not work finish.

Replace the script as follows:

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

And your HTML with 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>
</div>

This adds idto the inside divto simplify access. It also removes document.write(). This function was not the way it should (or can) be handled.