2012-01-17 4 views
0

私は卓上ゲーム用のキャラクター作成アシスタントを作成しようとしています。キャラクターレベルに応じて、プレイヤーが変えることができる開発ポイントの数が変化します。これはhtml5とjQueryの私の最初の主要なプロジェクトですが、それは十分に簡単だと思いました。 this questionからのアドバイスを使用しましたが、私の値は更新されていません。私はjsFiddleでそれを悩ませているが、役に立たない。私はウィットの終わりにいる!ここに私のjsFiddleへのリンクがあります。 jsFiddleには、関連したいコードだけがあります。私はフォームの残りの部分を稼働させました。jQueryが数学をして値を更新していません

HTML:

<strong>Level: </strong><input id="levelselect" type="number" min="0" max="20" /> 
You have <span id="DP"></span> DP to spend. 

JS:

function calcDP() { 
     var level = parseInt($('#levelselect').val(),10); 
     var DPatZero = 400; 
     var DPatOne = 600; 
     var workDP = 0; 

      if (level === 0){ 
       workDP = DPatZero; 
      } 
      else if(level == 1){ 
       workDP = DPatOne; 
      } 
      else { 
       workDP = DPatOne + (level * 100); 
      } 
      var DP = workDP; 

      $('#DP').text(DP); 
     } 

$('#levelselect').on('keydown keyup keypress', calcDP); 
+1

質問自体にあなたのコードの重要な部分を含めてください。そうでなければ、pastebinのリンクがある時点で期限切れになると、この質問はかなり壊れてしまいます。 – ThiefMaster

答えて

0

まず、セレクタを間違った要素にバインドしていました。代わりに

$('#DP') 

に結合事象のあなたは

$('#levelselect') 

第二にそれらを結合しなければならない、あなたはこれがわからないだけで、キーストロークがあるにするためのイベント「変更」を使用し、すべてのイベントをキャッチしたいです捕まるが、ペーストと入力プログラムの横、上下の矢印を押しても同様にキャッチされています:

また
function calcDP() 
{ 
    var level = parseInt($('#levelselect').val(), 10); 
    var DPatZero = 400; 
    var DPatOne = 600; 
    var workDP = 0; 

    if (level === 0) 
    { 
     workDP = DPatZero; 
    } 
    else if (level == 1) 
    { 
     workDP = DPatOne; 
    } 
    else 
    { 
     workDP = DPatOne + (level * 100); 
    } 

    $('#DP').text(workDP); 
} 

$(document).ready(function() 
{ 
    // Bind calcDP onchange to make sure every event is being caught. 
    $('#levelselect').on('change', calcDP); 

    // Call the onchange event to make sure the current value is evaluated 
    $('#levelselect').change(); 
} 

を、あなたの最初のJSfiddleにあなたはトンに必要なフレームワークとしてMooToolsはを使用彼はjQueryの代わりに辞めました。

完全なスクリプトの参照JSのFIDLE:http://jsfiddle.net/9M4cD/4/

+0

書かれているように、それは私の他のjQueryビットを壊しました。 '$(document).ready()'関数を削除し、スクリプトの本体に '.change()'と '.on()'ビットを残すことで、それはうまくいきました。 [jsFiddle](http://jsfiddle.net/tasuret/9M4cD/5/)。助けてくれてありがとう! – Tasuret

+0

'change'は**タイプではありません**あなたがタイプしている間にそれを更新したいのであれば十分です! – ThiefMaster

+0

ユーザーが入力している間ではなく、要素がぼかされるとすぐに解雇されます。あなたの設定や、イベントによって起動される機能に応じて、あなたのイベントタイプを賢明に選択してください。 1回のkeydown、keyup、およびkeypressごとにajaxリクエストを発生させたくありません。 –

2

あなたは間違った要素にイベントを結合しました。

$('#levelselect').on('keydown keyup keypress', calcDP); 

代わりの

$('#DP').on('keydown keyup keypress', calcDP); 

を使用し、それが動作します。

+0

これは機能していません。私はあなたの変更で質問を更新しました。ありがとうございました。 – Tasuret

+0

@Tasuret:jsfiddleでテストしましたか?最初にmootoolsを選択したように、左側の必要なフレームワークとしてjQueryを選択してください。これは実際に提供したコードでは機能しません。 –

+0

私は実際にjQueryに設定しました。私のローカルコピーと私の[jsFiddle](http://jsfiddle.net/tasuret/9M4cD/5/)の最新リビジョンの両方で意図どおりに動作します。 – Tasuret

関連する問題