Question

我正在制作一款出售凤尾鱼的简单游戏。我有升级购买小渔网。渔网需要花费一定数量的凤尾鱼，因此我从总数中减去该数字，然后使用innerHTML重写。我希望这个小网每秒添加1个凤尾鱼，所以我使用window.setInterval。但是，现在每秒[对象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>

Answer 1

您正在呼叫goFish(smallnets)。 smallnets是元素的id，所以你传递了那个元素。您期望goFish中的数字并执行各种计算和分配，这显然会失败，因为它是一个元素而不是数字。最后，您输出anchovies，现在已分配该元素，而不是计算结果。

所以在某些地方你需要将元素转换为数字，这可能是元素的内容（是posession中小网的数量）。

Answer 2

原因是这一行：

goFish(smallnets);

您尚未在任何地方声明smallnets变量，但您的标记中包含id "smallnets"的{{1}}元素。大多数浏览器为具有span值的元素创建全局变量，其中变量的名称为id，值为DOM元素。

然后在id中，这一行：

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));或其他内容，例如：

Javascript返回[object HTMLSpanElement]

2 个答案: