2016-12-26 11 views
2

私のalert("No money")はうまく動作しますが、どうすれば私のalert("works!")は動作しませんか?私が書いたものが構文的に正しいと感じるので、エラーは私にとっても意味をなさない。読む時間を割いて私のプロトタイプはなぜ機能しませんか?

ありがとう:ここでD

はここに私のgameTime.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>WOMP</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="gameTime.css"> 
</head>  
<body> 
    <form class="col-md-4 col-md-offset-4" name="formHandler" id="handle"> 
     <div id="allFields"> 
      <div class="moveUsername"> 
       <h1>(All numbers inputted will be assumed that it's in dollars)</h1> 
       <label for="usr">What's your annual salary?</label> 
       <input type="field" class="form-control" id="salary" placeholder="What's your annual salary?" required="required"> 
      </div> 

      <div class="ageMovement"> 
       <label for="usr">How much do you spend every month on bills?</label> 
       <input type="field" class="form-control" id="monthlyBills" name="ageChecker" placeholder="How much do you spend every month on bills?" required="required"> 
      </div> 

      <div class="emailMovement"> 
       <label for="usr">How much do you spend when going out?</label> 
       <input type="field" class="form-control" id="goingOut" name="emailChecker" placeholder="How much do you spend when going out?" required="required"> 
      </div> 
     </div> 
     <button type="submit" class="btn btn-default" onclick="fin.isSalaryZeroOrLess()">Submit</button> 
    </form> 
    <script type="text/javascript" src="gameTime.js"></script> 
</body> 
</html> 

であるここに私のgameTime.js

function Finance(salary, fixedExpense, variableExpense) { 
    this.salary = salary; 
    this.fixedExpense = fixedExpense; 
    this.variableExpense = variableExpense; 
    this.isSalaryZeroOrLess = function() { 
     var s = parseInt(document.getElementById("salary").value); 

     if(s <= 0) { 
      alert("No money"); 
     } 
    } 
} 



Finance.prototype.greaterThan = function() { 
    var s = parseInt(document.getElementById("salary").value); 
    var userSalary = s/12; 

    if(userSalary < 30000) { 
     alert("works!"); 
    } 
} 

    var fin = new Finance(1000,1000,1000); 

はエラーですされています

Uncaught TypeError: Cannot set property 'greaterThan' of undefined 
    at gameTime.js:14 
gameTime.html:28 Uncaught TypeError: Cannot read property 'isSalaryZeroOrLess' of undefined 
    at HTMLButtonElement.onclick (gameTime.html:28) 
+0

は、最初のエラーを再現することはできません。 'Finance'prototype.greaterThan = function(){'に '}'がありません。 – Xufox

+0

@Xufoxこの質問を投稿した直後に私はそれを見つけました。私はそれを修正しましたが、それでも動作しません:( – chompy

+0

@Xufoxエラーをキャッチして修正したところ、他のエラーでコンソールをチェックしましたが、何も表示されませんでした。 () 'プロトタイプは動作しません – chompy

答えて

1

としては、あなたがエラーになっている、コメント:あなたがHTML

<button type="submit" class="btn btn-default" onclick="fin.isSalaryZeroOrLess()">Submit</button> 
</form> 
<script type="text/javascript" src="gameTime.js"></script> 

にイベントをバインドしようとしている、ので

gameTime.html:28 Uncaught TypeError: Cannot read property 'isSalaryZeroOrLess' of undefined at HTMLButtonElement.onclick (gameTime.html:28)

をしかし、あなたが見るように、あなたのgameTime.jsはまだロードされていません。したがって、finはまだ定義されていません。

クイックソリューション:

は頭にスクリプトタグを移動し

。 JSファイルへ

堅牢なソリューション

Moveイベントリスナーとグローバルスコープを汚染しないように、.addEventListenerを使用して、関数内のコード(生命維持)を包みます。


私はあなたのコードを更新し、その正常に動作していますJSFiddle

+0

時間を割いてくれてありがとうございました:)しかし、今は 'Uncaught TypeError:nullのプロパティ 'addEventListener'を読み取ることができません at gameTime.js:31 at gameTime.js:33 ' – chompy

+0

あなたが気づいたら、私はボタン上のIDを追加し、それを使ってフェッチしました。任意のメカニズムを使用して要素を取得できます – Rajesh

0

あなたは前夜ではありませんrはgreaterThan関数を呼び出します。あなたはそれを定義してFinanceプロトタイプに添付するだけで、あなたはそれで何かをやっていることはあなたには見えません。

+0

それをそう呼んでいるのなら、そのようにしてください。 'greaterThan();'。私はすでにそれを試して&それは動作しませんでした。どのように呼び出すのですか? – chompy

+0

あなたは単にFinance.prototype.greatherThan()のような処理を行います。 –

+0

これをいつ実行するか、つまりイベントにバインドするのはいつか分かりません。私は今もそれに慣れていません。また、最初のエラーを取得していますbacause finはonclickへのisSalaryZeroOrLess()関数のバインド時に定義されていません。あなたのスクリプトを頭に入れてください。それはうまくいくはずです。これは非常に悪い習慣であり、あなたはこのようにjsを書くことに慣れてはいけません。 –

関連する問題