2017-02-27 28 views
0

JavaScriptを使用してフォームの入力から値を取得しようとしています。しかし、私が提出したときはいつでも、私は何も得ていないか、0または未定義です。ほとんど定義されていない。いずれの値も得られないようです。Javascriptは入力から値を取得できません

は、ここで私は別の質問で周りを見回してきましたが、まだこれに対する解決策を見つけていないコード

<form id="ecoCalculator"> 
     <div class="form-group"> 
      <label for="k0">Start Kapital</label> 
      <input type="number" name="k0" class="form-control" id="k0"> 
     </div> 

     <div class="form-group"> 
      <label for="kn">Slut Kapital</label> 
      <input type="number" name="kn" class="form-control" id="kn"> 
     </div> 

     <div class="form-group"> 
      <label for="x">Rente</label> 
      <input type="number" name="x" class="form-control" id="x"> 
     </div> 

     <div class="form-group"> 
      <label for="n">Terminer</label> 
      <input type="number" name="n" class="form-control" id="n"> 
     </div> 

     <div class="ecoButtons"> 
      <input type="button" value="Udregn" class="btn btn-default" onclick="k0Eco()"> 
      <input type="reset" value="Ryd" class="btn btn-default"> 
     </div> 

    </form> 

    <div class="ecoResult"> 
     <p id="ecoResult">Resultat</p> 
    </div> 

</div> 

<script type="text/javascript"> 
     // Public Variables 
     var k0 = document.getElementById('k0').value(); 
     var kn = document.getElementById('kn').value(); 
     var x = document.getElementById('x').value(); 
     var n = document.getElementById('n').value(); 

     // Calculation of Initial Capital 
     function k0Eco() { 
      // Calculation 
      var k0Value = kn/(1 + x)^n; 
      // Show Result 
      document.getElementById("ecoResult").innerHTML = k0; 
     } 

です。

私は入力の名前を変更しようとしましたが、関数は単一の値しか表示しませんが、結果は表示されません。

ありがとうございました

+0

最初に計算を実行できるようにデフォルトの動作を妨げるサブミット機能を作成したい場合があります – happymacarts

+0

入力から値を取得できるかどうかわかりません。あなたのコードは最終結果のみを出力します。 –

+1

'value'ではなく' value'を試してください。これは関数ではないプロパティです。そして、値を取得するスクリプトはページの読み込み時に実行されるため、必然的にフィールドは空白になります。その時点で値を取得するには、そのすべてをk0Eco関数に移動する必要があります。 – ADyson

答えて

1

値は機能ではありません。変更

var k0 = document.getElementById('k0').value() 

var k0 = document.getElementById('k0').value 

へのスクリプトは、ページのロード時に実行されるので、何もまだ満たされていません。

document.getElementById('ecoCalculator').addEventListener('submit', function(e) { 
    e.preventDefault(); 
    // your code here 

}); 

今すぐボタンからインラインJSを削除し、それを提出入力します:あなたが提出ハンドラ内で全部を配置する必要があり

<input type="submit" value="Udregn" class="btn btn-default" /> 

をそして、あなたのjsファイル内の関数を削除

var k0 = document.getElementById('k0').value; 
var kn = document.getElementById('kn').value; 
var x = document.getElementById('x').value; 
var n = document.getElementById('n').value; 

// Calculation 
var k0Value = kn/(1 + x)^n; 
// Show Result 
document.getElementById("ecoResult").innerHTML = k0Value; 

Here's a working fiddle

+0

私はsubmitを押すとまだ未定義と言われています –

+0

回答を編集しました@zerovacpls – baao

+0

今投稿しても何もしません@baao –

0

あなたはint型で入力値を解析する必要があります。たとえば。

// Public Variables 
    var k0 = parseInt(document.getElementById('k0').value); 
    var kn = parseInt(document.getElementById('kn').value); 
    var x = parseIntdocument.getElementById('x').value); 
    var n = parseIntdocument.getElementById('n').value); 
+2

'.value'は' document.getElementBy'あなたは括弧を削除する必要があります。 – scrappedcola

0
  • 利用valueの代わりvalue()。これは関数ではないプロパティです。

  • 変数を関数内に配置します。ページがロードされると、変数 は入力の値を取得しており、そこには何もありません。

function k0Eco() { 
    var k0 = document.getElementById('k0').value; 
    var kn = document.getElementById('kn').value; 
    var x = document.getElementById('x').value; 
    var n = document.getElementById('n').value; 

    var k0Value = kn/(1 + x)^n; 

    document.getElementById("ecoResult").innerHTML = k0Value; 
} 
  • <head>タグ内または少なくともボタンの前にあなたのjavascriptのコードを入れてください。 onclick()イベントを起動しようとすると、関数はまだ作成されていません。
+1

Javascriptはheadタグ内にある必要はありません。最後の 'body'タグの前にページの一番下に置くことができます。これはページ読み込み速度の優位性のために推奨されます。また、クロム開発ツールのエラーは、関数k0Eco()が定義されていないことです。ですから、.valueまたは.value()は実際の問題ではないと思います。 – user3526204

+1

ひどいコメント@ user3526204。問題の1つは、関数としてのプロパティの使用を確実にすることです。そして、あなたが指示に従わないので、あなたがchrome開発者用ツールで得ているエラーは、あなたのjavascriptをheadタグの中に入れてみてください。 –

+0

@PaulCastilho、私はそれが問題ではないと言わなかった。しかし、頭のタグにjavascriptを置くことでここの状況が解決すれば、それは間違いありません。ただし、受け入れられた回答では、サブミットハンドラとイベントリスナの使用についても説明しています。また、レンダリングのブロックを避けるために、ボディの最後にJavaScriptを置くことを提唱している多くの投稿があると思います。 – user3526204

関連する問題