2011-12-09 6 views
0

私はテキストボックスの下にテキストボックスと一連のボタンを持っています。ユーザーがテキストボックス内の数字を入力し、その数によってクリックできるボタンの数が決まると考えられます。たとえば、テキストボックスの値が2の場合、ユーザーは2つのボタンのみを選択でき、ボタンが赤色に変わるとボタンが選択され、変わった場合には選択されずに白いままになります。ボタンの正しい量を選択する方法

問題は、値が1以上の場合、ユーザーはすべてのボタンを選択できます。言い換えれば、ボタンをクリックし続けると、すべてのボタンが赤色に変わりますユーザーが値を超えた場合、制限を超えたことを示すエラーメッセージが表示されます。別のボタンを選択する場合は、ボタンの選択を解除してください。

選択したボタンの数がテキストボックスの値と一致するようにするにはどうすればよいですか?

コードはhereをクリックしてください(いくつかの奇妙な理由から、私はボタンをクリックさせないようにして、正確なコードで私のアプリでもテキストボックスにjsfiddleの文字の入力を許可しています。

答えて

2

クリックごとに合計をリセットするので、実際にはカウントされていません。 currenttotal = 0;をクリック機能の外に移動してください(varで宣言してください)。

第2に、あなたは本当に同じコードを持っています。あなたはまた、ボタンの.className割り当ては、もう少し簡潔にするために反復することができます:

for(var i = 65; i <= 90; i++) { // iterate over character codes for A to Z 
    var letter = String.fromCharCode(i); 
    document.getElementById("answer" + letter).className = "answerBtnsOff"; 
} 

またclass="answerBtnsOff"属性をHTMLでクラス名を入れることができます。 JavaScriptを使用してボタンを作成することもできます。これにより、よりクリーンで読みやすいコードが作成されますが、もちろんこれらの最適化は必要ありません。

http://jsfiddle.net/7WwaK/3/

(jsFiddleを機能させるには、左パネルのno wrap (body)を選択する必要があり、それはjsFiddleではJavaScriptを挿入するだけの方法です。)

0

私は右のあなたを取得していた場合、あなたがすべき

  1. var currenttotal = 0;をあなたの機能の外に移動してください(IMHO)。ボタンをクリックするたびにリセットします。
  2. ユーザーが回答の数を変更した後に、currenttotalを編集します。したがって、currenttotal = document.getElementById('numberAnswerTxt').value();行をgetButtons()という関数に追加します。
  3. あなたは(=

あなたのコードを削減することを提案pimvdbループを実装することができ、これが動作しているか教えてください。

関連する問題