3

javascriptに詳しい方ぜひ教えていただきたいですが、下記のコードを個別指定ではなく、一つに統合するのにどう書けばよろしいでしょうか。

具体的にいうとgetElementByIdで各IDを同時に指定したいのですが、if文とかorとかいろいろ書いてみたのですが、作動せず難しいです。

document.getElementById("aform").onsubmit=function(){return CHECK("a");};
document.getElementById("bform").onsubmit=function(){return CHECK("b");};
document.getElementById("cform").onsubmit=function(){return CHECK("c");};
document.getElementById("dform").onsubmit=function(){return CHECK("d");};
document.getElementById("aform2").onclick=function(){BTN=2;};
document.getElementById("bform2").onclick=function(){BTN=2;};
document.getElementById("cform2").onclick=function(){BTN=2;};
document.getElementById("dform2").onclick=function(){BTN=2;};

※BTN=2はエラー関連の設定です。

よろしくお願いいたします。

早速のご回答ありがとうございます。
できれば、下記のように書きたいのですが、なぜなら、複数あるHTMLのほうには「aform」、「bform」、「aform2」と「bform2」までしかないものがあります。
いかがでしょうか。教えて頂けたらありがたいです。

function CHECK(ELE){
    if(document.getElementById(ELE+"form").onsubmit=function(){return CHECK("ELE");
       document.getElementById(ELE+"form2").onclick=function(){BTN=2;   
}
2
  • JavaScriptについては特に、環境によって特定のメソッドが使えたり使えなかったりしますので、対象となるブラウザをバージョン込みで特定(IE8以上、など)した方がより役立つ回答が得られると思います。
    – holywise
    Commented 2015年8月17日 17:57
  • サンプルコードのreturn CHECK("ELE")ですが、この場合自分自身を呼び出すのは誤りだと言えます。またonsubmitで呼び出されるスクリプトは真偽値を返す必要があります。
    – BLUEPIXY
    Commented 2015年8月18日 6:45

3 件の回答 3

6

そもそものHTMLの原理として、そのような目的ではidではなくclassを使うべきです。

idというのは個々の要素のそれぞれに全く別個の振る舞いを与えるときに使うもので、そもそもの目的が異なりますから、そのようなコードを書きにくいのは当然です。classを使えばquerySelectorAllでいとも容易く実現可能なのに、idでやろうとするから面倒になっているのです。

ただし、どうしてもgetElementByIdでidにもとづいて処理しなければならない何らかの理由が絶対にないとは言い切れないような気もしないでもないような可能性は否定しきれないと言えないこともありません。その場合は、すべての要素をひとつひとつ調べ、正規表現などで期待するパターンのidかどうかを個々に判別して行くしかありません。ただし私はgetElementByIdを使うという方針が根本的に誤っていると思います。

この質問は、「目の前にスプーンとフォークがあるが、スプーンでスパゲッティを食べるにはどうすればいいか」と訊いているようなものです。問題の本質を考えるなら、適切な回答は「フォークで食え」であって、「スプーンの先端をフォーク状に削りとればスプーンでも食えるよ」というような回答は意味がありません。

6

document.querySelectorAll("form[id*='form']")
とするとidにformという文字列が含まれるform要素の配列が取れると思います。

また、
document.querySelectorAll("*[id*='form']")
というふうに要素を指定している部分を*にすると、すべての要素の中でidにformが含まれているものの配列を取ることができます。

2

getElementByIdは、IDを指定してエレメントを得るメソッドで、
IDはページでユニークですから、複数のIDを指定するようにはなっていませんので、
「getElementByIdで同時多数取得」ということはできません。

なので指定したい要素を配列にしておいてforループで逐次実行するような処理が必要です。

ちなみに
jQueryのようなライブラリを使うことで、後半部分は

$("#aform2,#bform2,#cform2,#dform2").click(function () {
  BTN=2;
});

のようにまとめることができます。
前半部分は、IDを同時指定しても実行する内容が異なるのでそのまままとめることはできません。
(IDを取り出して先頭の文字でCHECKを呼び出すというように変更する必要があります。)

1
  • @downvoter ダウンボートの理由は何ですか?
    – BLUEPIXY
    Commented 2015年8月17日 17:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。