• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：▲▲JavaScriptに詳しい人見てください▲▲）

JavaScriptの計算練習プログラムを作成する方法

このQ&Aのポイント
  • JavaScriptを使用して、計算練習プログラムを作成する方法について説明します。
  • フォームを使用して、10問の足し算問題を表示し、解答と正誤を入力するためのテキストボックスを用意します。
  • 正解を保存する配列を準備し、答え合わせボタンのイベントハンドラから参照できるようにします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.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"]');

hideyuki-man
質問者

お礼

難しいけど　わかりました☆ ありがとうです♪

すると、全ての回答が全文表示されます。

その他の回答 (3)

回答No.3

貴方に与えられた課題だからね、まともに答えては勉強を阻害してしまうと思って、あえて習わないであろう方法をとりました。でもいずれそんな形に近づくと思うよ。 どうやって、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) {～ ところで提出期限は過ぎましたか？

hideyuki-man
質問者

補足

なんども何度もありがとうございます。 とりあえずは提出が出来ましたっ！ ノードリストとは何でしょうか？

すると、全ての回答が全文表示されます。
回答No.2

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 (); }

hideyuki-man
質問者

補足

Array.prototype.forEach.call～とか、初めて見るものだらけでした！笑 new.Array～やdocument.フォーム名.elements["部品名"].valueを習ったんですが、 それではこのプログラムは動かせないですかね＞＜ new.Arrayやdocument.フォーム名.elements["部品名"].valueを使える方法はお聞きしたいです(´・ω・｀)

すると、全ての回答が全文表示されます。
回答No.1

さんこうにもならないね。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を

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する