Question

我试图创建一个小型记忆游戏......其中时间乘以用户所做的移动次数......

用户完成所有语句后，javascript运行函数：

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

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

它确实显示了文本框，但它不显示消息：（

如果我将它添加到函数中，它可以工作：

 alert(mensaje);

但是我需要它显示在框中而不是显示在警告消息中，因此可以提交分数...

脚本有什么问题？为什么它不在框中显示消息？：（

Answer 1

我希望你能在最后的div中显示得分。你为什么不在展示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();
}

修改像这样修改您的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()。

文档：

希望它有所帮助。

Answer 4

问题在于您尝试在代码不知道天气的地方设置div的内容，或者finish函数正在运行。

用以下内容替换您的脚本：

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

以及您的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>
</div>

这会在内部id中添加div，以便于访问。它还会删除document.write()。这个功能不是应该（或可以）处理的。

创建javascript var函数

4 个答案: