Javascript returns [object HTMLSpanElement]

Javascript returns [object HTMLSpanElement]

本文关键字：HTMLSpanElement object returns Javascript      更新时间：2023-09-26

我正在制作一个卖凤尾鱼的简单游戏。我需要升级才能买一个小渔网。渔网要花费一定数量的凤尾鱼，所以我从总数中减去这个数字，然后用innerHTML重写。我希望这个小网络每秒添加1条凤尾鱼，所以我使用window.setInterval。然而，现在每秒[object HTMLSpanElement]都被写入页面。

我该怎么办？

以下是jsfiddle链接：http://jsfiddle.net/Bj6M5/1/

这是代码：

<head>
<script type="text/javascript">
var anchovies = 0;
var money = 0;
function goFish(num) {
    anchovies = anchovies + num;
    money = 0.433 * anchovies;
    var money_rounded;
    money_rounded = money.toFixed(2);
    if (anchovies != 1) {
        document.getElementById("anchovies").innerHTML = anchovies + " anchovies";
    }
    else {
        document.getElementById("anchovies").innerHTML = "1 anchovy";
    }
    document.title = "$" + money_rounded + " - Anchovy Bros.";
}
function buySmallNet(){
var smallnet_price = Math.floor(10 * Math.pow(1.1,smallnets));     
    if (anchovies >= smallnet_price) {                                   
        smallnets = smallnets + 1;                                   
        anchovies = anchovies - smallnet_price; 
        if (smallnets != 1) {                       
            document.getElementById("smallnets").innerHTML = smallnets + " small nets";
        }
        else {
            document.getElementById("smallnets").innerHTML = "1 small net";
        }  
        document.getElementById("anchovies").innerHTML = anchovies + " anchovies";  
    }
    else {
        alert("You don't have enough anchovies!");
    }
}
window.setInterval(function(){
    goFish(smallnets);
}, 1000);
</script>
    <title>$0 - Anchovy Bros.</title>
</head>
<body>
<button onclick="goFish(1);">FISH!</button>
<br>
<span id="anchovies"></span>
<div style="float:right;" id="upgrades">
    <center>
    <button onclick="buySmallNet();">small fishing net</button>
    <br>
    <span>costs 15 anchovies</span>
    <br>
    <span id="smallnets"></span>
    </center>
</div>
</body>

您正在调用goFish(smallnets)。smallnets是一个元素的id，所以您正在传递该元素。你期望goFish中有一个数字，并进行各种计算和赋值，但这些计算和赋值显然失败了，因为它是一个元素，而不是一个数字。最后，您输出的是anchovies，它现在被分配给了该元素，而不是计算的结果。

因此，在需要将元素转换为数字的地方缺少了一个链接，数字可能是元素的内容（即posession中的小网数量）。

原因是这一行：

goFish(smallnets);

您还没有在任何地方声明smallnets变量，但您的标记中有一个元素id "smallnets"，它是span。大多数浏览器为具有id值的元素创建全局变量，其中变量的名称为id，值为DOM元素。

然后在goFish中，此行：

anchovies = anchovies + num;

是（第一次通过时）：

anchovies = 0 + a_span_element;

由于span无法合理地转换为数字，因此它被转换为字符串，即"[object HTMLSpanElement]"。然后0被转换成一个字符串，就得到了"0[object HTMLSpanElement]"。

然后在下一次间隔激发时，您向其添加"[object HTMLSpanElement]"的另一个副本，等等。

如果您的目标是使用span的文本，则需要：

goFish(smallnets.innerHTML);

或更好的

goFish(parseInt(smallnets.innerHTML, 10));

或者更好的是，不要依赖通过id:创建的全局

goFish(parseInt(document.getElementById("smallnets").innerHTML, 10));

您还需要在跨度中放置0或其他东西，例如：

<span id="smallnets">0</span>
相关文章：