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? :(

remove var from where you assign a value to mensaje so that it becomes a global variable. Currently, it only exists inside the function. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 4, 2014 at 10:05

Shiva Avula · Accepted Answer · 2014-02-04 10:24:46Z

6

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>

edited Feb 4, 2014 at 10:24

answered Feb 4, 2014 at 10:13

Shiva Avula

1,8561 gold badge20 silver badges29 bronze badges

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

5 Comments

Cerbrus Over a year ago

Finally someone that fixes the real issue in this question. One suggestion: Chain .append() and .show(), and select the proper element like this: $('#finaldiv div div').append(mensaje).show();

Shiva Avula Over a year ago

@Cerbrus I added the chaining as you specified. For the selector i am not sure if that's the correct approach. Thank you for the improvement.

Cerbrus Over a year ago

A better option for the selector would be to add an id to the inner element.

Shiva Avula Over a year ago

@Cerbrus What do you think about the answer now. I made the changes you specified.

Cerbrus Over a year ago

Excellent! That's the way to do it :)

Scimonster · Accepted Answer · 2014-02-04 10:12:48Z

2

It's partly because of scoping. The mensaje variable is only accessible from that function, not the rest of it. You can either define it in the global scope (var mensaje; at the beginning of your code), or have your finish() function return the value.

The rest of the problem is that you are writing to the document before the function executes.

edited Feb 4, 2014 at 10:12

answered Feb 4, 2014 at 10:04

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

6 Comments

Cerbrus Over a year ago

That's not the issue. document.write() is being executed on page load. The function's probably running after that.

Scimonster Over a year ago

It's certainly part of the issue.

Cerbrus Over a year ago

No, the div's content shouldn't even be modified outside of that function. He should just set the message from the function itself. Scope's not the issue, it's the way the OP tries to set the content.

Scimonster Over a year ago

I agree that the OP is doing it incorrectly, but this is at the very least a start.

Cerbrus Over a year ago

You're not fixing the issue here. This will not work, because finish() will most likely run after the write. The main issue is the way the user tries to handle the output

|

fabiofl · Accepted Answer · 2014-02-04 10:17:20Z

1

Since you're using jQuery, you can use it's $.html() method:

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

A live example at JSBin

This, will replace all content of your target element. If there's content you need to keep in that element, just use $.append() instead of $.html().

Documentation:

Hope it helps.

answered Feb 4, 2014 at 10:17

fabiofl

3051 silver badge4 bronze badges

Comments

Cerbrus · Accepted Answer · 2014-02-04 10:18:02Z

The issue is that you're trying to set the div's content at a place where your code has no idea weather or not the finish function is running.

Replace your script with this:

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 a id to the inner div, to make it easier to access. It also removes the document.write(). That function was not how this should (or could) be handled.

Collectives™ on Stack Overflow

Create javascript var function

4 Answers 4

5 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related