なぜNANを表示しますか？他の

Question

を計算した結果を使用しようとすると、私は "DEMO2" 結果表示することはできません理由を理解しない：

function test() { 
 
    var userInput = document.getElementById("myId").value; 
 
    document.getElementById("demo").innerHTML = userInput * 120; 
 
    document.getElementById("demo2").innerHTML = demo * 1, 21 + " €"; 
 
}

<input type="text" oninput="this.value=this.value.replace(/[^0-]/g,'');" id="myId"/> Trucks No<button onclick="test()">Submit</button> 
 
<!-- RESULT1 --> 
 
<p id="demo"></p> 
 
<!-- RESULT2 --> 
 
<p id="demo2"></p>

Answer 1

いくつかの問題：

1. のJavaScriptの数値リテラルは.を使用します、,ではなく、小数点として：

   document.getElementById("demo2").innerHTML = demo * 1.21 + " €"; 
   // Changed to . -------------------------------------^ 
   

   （JavaScriptがカンマ演算子を持っているので、あなたは構文エラーを取得できませんでした。）

2. あなたのinput前oninput属性を終了しました。

3. demoは明示的に値を割り当てずに使用しています（つまり、id="demo"があるため）、ブラウザで要素用に作成された自動グローバルに頼っています。 強くはそれらに頼らないことをお勧めします、グローバル名前空間はあまりにも混雑しています。最初の計算で何をしましたか：getElementByIdを使用してください。おそらく一度それを見つけ、変数を使用するのが最も良いでしょう。

4. 要素（demo）を数字のように使用しました。そうではありません。あなたはそうちょうどそれらの変化とそのテキスト（innerHTML）

を取得する必要があるだろう、それが動作します：

function test(){ 
 
    var userInput = document.getElementById("myId").value; 
 
    var demo = document.getElementById("demo"); 
 
    demo.innerHTML = userInput * 120; 
 
    document.getElementById("demo2").innerHTML = demo.innerHTML * 1.21 + " €"; 
 
    }

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/> 
 
Trucks No<button onclick="test()">Submit</button> 
 

 
<!-- RESULT1 --> <p id="demo"></p> 
 
<!-- RESULT2 --> <p id="demo2"></p>

しかし、私はさらに行くだろう：

1. 目的に応じて数値を解析することで、さまざまな解析方法でさまざまなことが可能になります。 parseIntを使用すると、番号が正しい番号のベースで解析されるようにすることができますが、最初の無効な文字で停止することもあります。parseInt("123abc", 10)はNaNではなく123です。​​にはその問題はありませんが、数字ベースを文字列から推測し、""を0として扱います。だからあなたはどんなやり方でもあなたを合理的に扱うことを望んでいるでしょう。

2. はあなたが二calcuationへの入力としてdemoに置かれている文字列結果を使用しないでください。代わりに、数値結果を覚えておいてください。

3. onxyz -attribute-styleイベントハンドラを使用しないでください。代わりに、あなたの関数がグローバルである必要がないように、近代的なイベント処理を使用してください。