0

「+1」をクリックすると、「0」に「NaN」が表示されます。なんで ？

HTML：

<table>
<tr><td id="run">0</td></tr>
</table>
<a href="#" onclick="plus();">+ 1 </a>

JS：

function plus(){
document.getElementById("run").innerHTML = ( document.getElementById("run").value + 1 );
}
4

6 に答える 6

5

これは、プロパティがまたは要素valueにのみ適用できるために発生します。inputselect

文字列値を数値に変換する必要があることに注意してください。変換しないと、文字列が連結されます。parseIntまたはparseFloat関数を使用して実行できます。

var val = parseInt(document.getElementById("run").innerHTML, 10);
document.getElementById("run").innerHTML = ( val + 1 );
于 2012-06-15T11:08:02.993 に答える
4

それは理由です：

document.getElementById("run").value

とにundefinedなりundefined + 1 == NaNます。

入力ボックスにはプロパティがありますが、 haveや。valueのようなノードがあります。<td />.innerHTML().innerText()

また、注意してください'0' + 1 == '01'。したがって、キャストも行う必要があります。

parseInt(document.getElementById('run').innerHTML, 10) + 1;

8進数として解釈される可能性のある文字列を変換するには、追加の基数-10が必要です:)

于 2012-06-15T11:08:52.770 に答える
0

これを試して

function plus(){
document.getElementById("run").innerHTML = parseInt( document.getElementById("run").value) + 1;
}
于 2012-06-15T11:08:47.697 に答える
0

この質問はまだより良い答えに値すると思いますが、間違っているかもしれません。)

関数で何が起こるかを確認しましょうplus。まず、ID で要素を取得します。

var targetElement = document.getElementById('run');

これは実際にはDOMElement型のオブジェクトへの参照です。これは、nodeType プロパティを確認することで非常に簡単に確認できます。

if (targetElement.nodeType === 1) { alert("It's an element!"); }

DOM 要素には多くの優れたプロパティがありますが、それらnodeValueは常に null に等しくなります。したがって、そのテキスト コンテンツを操作する場合は、子の textNodes を探すか、単にinnerHTMLプロパティを使用します。はい、文字列ですが、数値の場合、Javascriptはそれを通常の数値に変換します（私が覚えていることから、0は数値です:)。

したがって、plus関数は実際には次のように記述できます (証明):

document.getElementById('run').innerHTML++;
于 2012-06-15T11:23:39.043 に答える
0

属性値は常に文字列であり、JavaScript では文字列 + 1 は NaN であるためです。

これを解決するには、次を使用しますstring.toFloat()。

function plus(){
    document.getElementById("run").innerHTML = ( document.getElementById("run").value.toFloat() + 1 );
}

または使用parseInt()：

function plus(){
    document.getElementById("run").innerHTML = ( parseInt(document.getElementById("run").value) + 1 );
}

または、~~()関数をトリックとして使用しますが、これは読み取り不能なソースになります。

于 2012-06-15T11:09:45.303 に答える
0

はHTMLInputElementvalueのプロパティであり、要素は ではなく であるため、そのプロパティはなく、次のようになります。TDHTMLInputElementHTMLTableCellElement

undefined + 1; // NaN - Not a Number

基本的にinnerHTML、コンテンツの設定に使用したのと同じプロパティを使用して、コンテンツを取得することもできます。

function plus() {
    // no need to execute `getElementById` twice
    var td = document.getElementById("run");

    td.innerHTML = +td.innerHTML + 1;
}

Number の値を変換するには、単項プラス演算子を使用しました。NaN次のように、使用前かどうかを確認することもできます。

function plus() {
    var td = document.getElementById("run");
    var value = +td.innerHTML || 0;

    td.innerHTML = value + 1;
}

その場合、NaN(または 0 ですが、その場合は ID です) は 0 に設定され、カウントは1エラーなしで開始されます。

さらに、サポートされている場合はtextContentプロパティを使用する方がよいと思いますが、すべてのブラウザーを処理するにはコードが少し複雑になり (たとえば、一部の IE バージョンではinnerText代わりに使用する必要があります)、innerHTMLほとんどの場合はうまくいく可能性があります。ケースの。

于 2012-06-15T11:29:56.230 に答える