innerHTML 无法将文本注入标记

Question

我正在学习 jQuerys animate 并正在构建一个小游戏，用户必须通过尝试点击它来抓住盒子，每次点击得分增加 1 分它在  元素内动态显示在屏幕上。

问题是  中没有显示分数。

通过调试应用程序，我可以看到分数实际上正在增加，因此排除了增加中的缺陷。我认为唯一的另一种可能性是因为 $(document).ready 没有在每个 click 上被触发，但这是错误的，因为分数确实增加了。所以我唯一能想到的解决方案是，我实施的方式在幕后发生了一些事情.innerHTML，但我无法理解它。

我尝试使用 value() 而不是 toString() 因为我最初认为获取变量 points 的实际 value 会 return 它的原始数字值，但没有做任何事情。

这是我遇到问题的 jQuery 行：

var points = 0;
$(document).ready(function () {
    Animate();
    div.on('mousedown', function () {
        points += 1;
        $('#points').innerHTML += points.toString();
    });
});

它引用的 HTML 标记：

<body>
    <p id="points">Total points: </p>
    <div id="box"></div>
    <script src="script.js"></script>
</body>

请注意，积分需要添加到而不是替换的内容] 例如，如果点增加  将显示 Total Points: 1

这是我的 JFiddle 问题的完整视图

Answer 1

Working Fiddle

HTML

<p id="points">Total points: <span id="total-points"></span></p>
<div id="box"></div>

删除此 Javascript

$('#points').innerHTML += points.toString();

替换成这个

$('#total-points').text(points);

Answer 2

$(document).ready(function () {
    var totPoints="Total points: "; // define a variable with this string value
    Animate();
    div.on('mousedown', function () {
        points += 1;
        $('#points').html( totPoints+ points.toString()); // concatenate and add the html
        alert("Points" + points.toString());// Wrote this to prove that    points score IS being incremented
    });
});

Answer 3

你可以直接使用 $('#points').html( "Total points: "+ +points.toString());

而不是使用 innerHtml

工作jsFiddle

Answer 4

尝试使用 $("#points").html(points);这会起作用。

将 .innerHTML 与 jquery 一起使用会产生问题，因为 jquery 以不同于纯 js 的方式使用它。

innerHTML 无法将文本注入标记

innerHTML failing to inject text into markup

html

javascript

jquery

innerhtml

Working Fiddle

HTML

删除此 Javascript

替换成这个