- ベストアンサー
JavaScriptの計算練習プログラムを作成する方法
- JavaScriptを使用して、計算練習プログラムを作成する方法について説明します。
- フォームを使用して、10問の足し算問題を表示し、解答と正誤を入力するためのテキストボックスを用意します。
- 正解を保存する配列を準備し、答え合わせボタンのイベントハンドラから参照できるようにします。
- hideyuki-man
- お礼率42% (121/287)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
var node = document.getElementById ('test'); 例えば、これは１つのノードを返す var input = document.getElementsByTagName ('input'); これだと、document にあるすべての input 要素を返す。つまりこれは、複数のノードを返している なので、課題の中の、input 要素の名前 p1から p10 までは、name を p とだけにし、以下のように集めればよかったのだ。 var p = document.forms['f'].getElementsByName ('p'); ここで、p.length は、10を返す。 プログラムのどこかで、１１番目の input要素で、name ="p" を追加したとしよう (node.appendChildなどを利用して) すると p.length は、自動的に11を返すようになる。なのでこのgetElementsByName の戻り値は「生きたノードリスト」を返す。 これとは別に querySelectorAll は「死んだノードリスト」を返す。追加しても lengthの値は増えない var p = document.querySelectorAll ('form[name="f"] input[name="p"]');
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
貴方に与えられた課題だからね、まともに答えては勉強を阻害してしまうと思って、あえて習わないであろう方法をとりました。でもいずれそんな形に近づくと思うよ。 どうやって、input 要素の name が p1 から p10 まで集める？ var input = []; var es = document.forms['f'].elements; for (var i = 1; i <= 10; i++) input.push (es['p' + i]); これが、１行で済む。上は配列だけど、下はノードリストを返す。 var input = document.querySelectorAll ('form[name="f"] input[name^="p"]'); 配列ならば、これで済むけど、 input.forEach (function (e) {～ ノードリストなら、こうなる。 Array.prototype.forEach.call (input, function (e) {～ ところで提出期限は過ぎましたか？
補足
なんども何度もありがとうございます。 とりあえずは提出が出来ましたっ！ ノードリストとは何でしょうか？
- babu_baboo
- ベストアンサー率51% (268/525)
Firefox だけにとっかしないようにしました。ふるいIEはむりですが、めじゃーなぶらうざならうごくとおもいます。ぜんかくくうはくははんかくにして！ var hoge = { 'start' : (function () { Array.prototype.forEach.call (this.p, function (_, i) { this.p[i].value = (Math.random () * 10 + 1 |0) + ' + ' + (Math.random () * 10 + 1 |0); this.a[i].value = this.c[i].value = ''; }, this); this.o.value = this.n.value = ''; }), 'handleEvent' : (function (event) { for (var i = 0, ok = 0, ng = 0, p; p = this.p[i]; i++) { eval ('var f =(' + this.p[i].value + ')==' + (this.a[i].value || '""')); (f) ? (this.c[i].value = '○', ok++): (this.c[i].value = '×', ng++) } this.o.value = ok; this.n.value = ng; }), 'demo' : (function () { var f = document.querySelector ('form'); this.p = f.querySelectorAll ('table input[name^="p"]'); this.a = f.querySelectorAll ('table input[name^="a"]'); this.c = f.querySelectorAll ('table input[name^="c"]'); this.o = f.querySelector ('input[name="ok"]'); this.n = f.querySelector ('input[name="ng"]'); f.querySelector ('input[type="button"][value="答え合わせ"]') .addEventListener ('click', this, false); this.start (); }) }; function initialize() { hoge.demo (); }
補足
Array.prototype.forEach.call～とか、初めて見るものだらけでした！笑 new.Array～やdocument.フォーム名.elements["部品名"].valueを習ったんですが、 それではこのプログラムは動かせないですかね＞＜ new.Arrayやdocument.フォーム名.elements["部品名"].valueを使える方法はお聞きしたいです(´・ω・｀)
- babu_baboo
- ベストアンサー率51% (268/525)
さんこうにもならないね。Firefox とかなら、みじかくかけるよ <!DOCTYPE html> <title>JavaScript Task 8-1, prototype</title> <script type="application/javascript; version=1.8"> var sol; function initialize() { sol = Array.prototype.map.call ( document.querySelectorAll ('form[name="f"] table input[name^="p"]'), (function (e) let (q1 = Math.random () * 10 + 1 |0, q2 = Math.random () * 10 + 1 |0) (e.value = q1 + "+" + q2, q1 + q2))); } </script> いかHTMLを
お礼
難しいけど わかりました☆ ありがとうです♪