現在、JavaScriptを勉強中なのですが、
コンストラクタについて質問です。
下記のようなコードの場合、document.getElementByIdで取得したID
以外、使いまわしが出来ませんが、
コンストラクタを使って、1ページで複数使用出来るようにするには、
どのように記述すれば良いのでしょうか?
//-----JavaScript-----
function addEvent(elm,listener,fn){
try{
elm.addEventListener(listener,fn,false);
}catch(e){
elm.attachEvent("on"+listener,fn);
}
}
var c,y,m,d;
addEvent(window,"load",function(){
c = document.getElementById("customer_birthday_c");
y = document.getElementById("customer_birthday_y");
m = document.getElementById("customer_birthday_m");
d = document.getElementById("customer_birthday_d");
if(c.options[0].selected == true){
y.disabled = true;
m.disabled = true;
d.disabled = true;
}
});
//-----JavaScript-----
どなたかご教授ください。
宜しくお願いいたします。
No.3ベストアンサー
- 回答日時:
IEの事を考えるとこうするしかないのか...
<script type="text/javascript">
function hoge(doc,parm){
this.c = doc.getElementById(parm.c);
this.y = doc.getElementById(parm.y);
this.m = doc.getElementById(parm.m);
this.d = doc.getElementById(parm.d);
var win = doc.defaultView || window;
if("undefined" !== typeof document.addEventListener)
win.addEventListener("load",this,false);
else if ("undefined" !== typeof document.attachEvent)
win.attachEvent("onload",(function(obj){
return function(){obj.func();};
})(this));
}
hoge.prototype.handleEvent = function(event){
if (event.type == "load" && event.target == this.doc)
this.func();
}
hoge.prototype.func = function(){
if(this.c && this.y && this.m && this.d){
if(this.c.options[0].selected == true){
this.y.disabled = "disabled";
this.m.disabled = true;
this.d.disabled = true;
}
}
};
var fuga_1 = new hoge(document,
{
c:"customer_birthday_c",
y:"customer_birthday_y",
m:"customer_birthday_m",
d:"customer_birthday_d"
}
);
</script>
別パターンもきっとあるはずだ。
この回答への補足
ご回答ありがとうございます。
上記のやりかたで上手くいきました。
this.c.onchangeとかイベントを
設定する方法もわかれば教えていただきたい次第です。
よろしくお願いいたします。
No.4
- 回答日時:
「コンストラクタ&使い回し」ってことから、SELECT要素へのアクセスを簡単な記述にしたいと勝手に解釈しました。
もしそうであれば、普通にSELECT要素を包括するクラスを設計すればいいかと思います。
// JSUIselect class. (constructor)
function JSUISelect( id ) {
this.selectElm = document.getElementById( elementid );
}
JSUISelect.prototype = {
selected : function() {
return this.selectElm.selected == true;
},
disable : function() {
this.selectElm.disabled = true;
}
};
他にもやりたいことがあればメンバ関数を追加の方向で。
(恐らく、OPTION要素を簡単に追加したいなどの要望があるはず)
ここでは、質問にあった内容をそのまま実現するコードに置き換えるだけにします。
// omitted addEvent()
var c,y,m,d;
addEvent(window,"load",function(){
c = new JSUISelect('customer_birthday_c'),
y = new JSUISelect('customer_birthday_y'),
m = new JSUISelect('customer_birthday_m'),
d = new JSUISelect('customer_birthday_d');
if(c.selected()) {
y.disable();
m.disable();
d.disable();
}
});
ライブラリ依存のフロントエンド開発では一般的じゃないです。
拠って動作確認していませんので悪しからず。
No.2
- 回答日時:
そのまま、書いてみただけ
<script type="text/javascript">
function hoge(doc,parm){
this.c = doc.getElementById(parm.c);
this.y = doc.getElementById(parm.y);
this.m = doc.getElementById(parm.m);
this.d = doc.getElementById(parm.d);
var win = doc.defaultView;
if("undefined" !== typeof doc.addEventListener)
win.addEventListener("load",this.func,false);
else if ("undefined" !== typeof doc.attachEvent)
window.attachEvent("onload",this.func);
}
hoge.prototype.func = function(){
if(this.c && this.y && this.m && this.d){
if(this.c.options[0].selected == true){
this.y.disabled = true;
this.m.disabled = true;
this.d.disabled = true;
}
}
}
var fuga_1 = new hoge(document,"load",{
c:"customer_birthday_c",
y:"customer_birthday_y",
m:"customer_birthday_m",
d:"customer_birthday_d"
});
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- その他(プログラミング・Web制作) VS CodeでTEXファイルにPDF形式の図を挿入する方法 2 2023/01/19 11:56
- JavaScript 正規表現について質問です。条件に合う場合はtrueを返したい 3 2022/10/06 23:02
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
Javascriptで引数の参照渡しか...
-
CDの曲をケータイのSDに移す
-
ASP 最終日の表示
-
JavaScript 、function、return
-
jQueryでzipを解凍読み込みする...
-
小数点以下を5刻みで表示
-
jQuery cssメソッドでの変数の...
-
現在地の取得について
-
Javascriptで文字列操作
-
jQueryを使用したギャラリー
-
idを使わずにonclickで自身の要...
-
jQueryの"return false"の役割...
-
javascriptで自動計算フォーム...
-
日本語入力の禁止
-
URLの一部をコピーできるブック...
-
google apps scriptの終了のさせ方
-
空の配列に2次元配列の追加
-
第3日曜日のみの日付を取得、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
クリックすると上に開くアコー...
-
XMLHttpRequestでキャッシュを...
-
ajax反映後のjqueryが動かない
-
function(e)の意味を教えてくだ...
-
要素名がスペースを含む場合のj...
-
jQueryの :not() .not() が有効...
-
jQueryでzipを解凍読み込みする...
-
関数名をテキストから読み込む...
-
getElementByIdを使用したグロ...
-
jqueryuiのdialog
-
jqueryのグローバル変数とロー...
-
jQuery 同じ処理を関数にまとめ...
-
XMLHttpRequestオブジェクトが...
-
addEventListener()でリスナー...
-
drawImageの描画順序の指定につ...
-
javascript(jQuery)でセル内...
おすすめ情報