0

スコアボードを作成しようとしていますが、奇妙なことに数字が追加されています。

私のhtml：

<div id="game-info">
   Top score: <p id="top-score">0</p><br>
    Current score: <p id="current">0</p><br>
    Games played: <p id="played-games">0</p>
</div>

私のJavaScript：

var score = document.getElementById("current");
if(blabla scored points){
     score.innerHTML += 100;
}
if(blabla scored -points){
    score.innerHTML -= 10;
}

マイナスポイントはうまく機能します。少なくともマイナスになりますが、プラスのスコアは、次のように現在のスコアの最後に追加されます。

Current score: <p id="current">0100</p><br>

また

Current score: <p id="current">-20100</p><br>

これは、intではなく文字列と関係がありますか？同じマークアップの場合、なぜ負のスコアが機能し、正のスコアが機能しないのか混乱しています。

4

4 に答える 4

3

文字列を連結します...最初に現在のスコアを数値に変換する必要があります-次のようなものを試してください：

var score = document.getElementById("current");
if(blabla scored points){
     // parse current score as integer and then add 100
     score.innerHTML = parseInt(score.innerHTML,10) + 100;
}
if(blabla scored -points){
    // parse current score as integer and then subtract 10
    score.innerHTML = parseInt(score.innerHTML,10) - 10;
}

parseInt()文字列を整数に解析します

追記：parseInt()基数を使用および使用する場合

上記の文字列の基数を表す整数。読者の混乱を排除し、予測可能な動作を保証するために、常にこのパラメーターを指定してください。基数が指定されていない場合、実装が異なれば結果も異なります。

于 2013-03-27T11:33:25.467 に答える
1

スコアを減算する方がスコアを加算するよりもうまく機能する理由は、+演算子が文字列（などinnerHTML）に対してオーバーロードされて文字列の連結を意味するのに対し、-演算子は文字列に対して特別な意味でオーバーロードされないためです。

したがって、文字列に適用される演算子score.innerHTML += 100のオーバーロードを選択し、+暗黙的に100を文字列に変換し、現在のスコア文字列値に「100」を追加します。

ただし、数値に適用される演算子score.innerHTML -= 10の意味を選択するため-、innerHTML値を数値にキャストして（正常に実行できます）、その値から10を減算して、結果を変換する必要があります。結果をに割り当てるときに文字列に戻りますscore.innerHTML。実際、減算式に10前後の引用符を入れることもできますが、それでも機能します。それを数値に変換しようとするだけです。score.innerHTMLがたまたま「abc」のように数値に変換できない文字列である場合、その文字列はに変換されNaN、減算するとNaNになり、次の場合に文字列「NaN」に変換されます。 innerHTML値に割り当てられています。

この質問に対する他の回答で説明されているように、を使用することparseIntは、演算子の両方のオペランドを強制的+=に数値にするための良い方法です。これにより、文字列の連結ではなく加算が確実に実行されます。

于 2013-03-27T11:41:42.353 に答える
0

innerHTMLは文字列です。parseIntインクリメントする前に整数に変換するために使用できます。

于 2013-03-27T11:33:27.220 に答える
0

はい、それは「current」の値が実際には文字列であるためです。したがって、+=は2つの文字列であると見なすものを追加するだけです。

計算を行う前に値を解析する必要があります。parseInt（）を使用する前に値が数値であるかどうかを確認する例については、次の質問を参照してください。

javascriptで文字列をintに解析する方法

于 2013-03-27T11:35:06.723 に答える