createElementで、フォームを生成しています。
コンボボックスが変更されたら、アラームを表示させるようにしたいのですが上手くいきません。
どのようにしたら、良いのでしょうか?
よろしくお願いします。
以下ソースになります。
上から24行目付近で、selectにonChangeを設定しています。
--------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テスト</title>
<script type="text/javascript">
function test() {
var buf = document.createElement('div');
buf.innerHTML = document.form1.src.value;
var nodes = buf.querySelectorAll('*[class="line"]');
//formの生成
var Frm = document.getElementById("setform"); //要素を表示する場所(親要素)
var Form = document.createElement("form"); //新規にform要素を生成
Form.name = "dynform";
Frm.appendChild(Form); //Frmの子要素としてFormを追加
// select要素 コンボボックス作成
var Slt = document.createElement("select"); //selectタグを生成
Slt.name = "stasel";
Slt.id = "stasel";
Slt.onChange = "alert('今だ')"; //この部分でselectにonChange を設定している
Slt.size="1"; //コンボボックス用にサイズを1にする
for (var i=0; i<nodes.length; i++) {
var Ops = document.createElement("option");
if (/Firefox/.test(navigator.userAgent)) {
var regm = nodes[i].rows[0].cells[0].textContent.match(/20[0-9][0-9]年[0-1]?[0-9]月/);
} else {
var regm = nodes[i].rows[0].cells[0].innerText.match(/20[0-9][0-9]年[0-1]?[0-9]月/);
}
var listval = document.createTextNode(regm); //生成する要素の文字列
Ops.value = regm;
Ops.appendChild(listval); //Spnに表示する文字列追加
Slt.appendChild(Ops); //Sltの子要素としてOpsを追加
}
Frm.appendChild(Slt); //Frmの子要素としてSltを追加
var Br=document.createElement("br"); //改行
Frm.appendChild(Br); //Frmの子要素としてBrを追加
var Br=document.createElement("br"); //改行
Frm.appendChild(Br); //Frmの子要素としてBrを追加
document.getElementById('stasel').options[0].selected = true;
}
// -->
</script>
</head>
<body>
<p>自動出力</p>
<form name="form1">
<p>テキストエリアにソースを張り付けて下さい</p>
<p>
<textarea id="src" rows="5" cols="200">
</textarea>
</p>
<p>
<input type="button" value="実行" onClick="test()">
</p>
</form>
<div id="setform">
</div>
</body>
</html>
--------------------------------------------------------------------
以下の文をテキストエリアに入力しています。
--------------------------------------------------------------------
<table class="line">
<tr>
<td>2011年1月14日</td>
</tr>
</table>
<table class="line">
<tr>
<td>2011年2月14日</td>
</tr>
</table>
<table class="line">
<tr>
<td>2011年3月14日</td>
</tr>
</table>
<table class="line">
<tr>
<td>2011年4月14日</td>
</tr>
</table>
--------------------------------------------------------------------
No.2ベストアンサー
- 回答日時:
#1です。
>Slt.id = "stasel";」と記述しております。
大変失礼いたしました。 うっかり、見落としていました。
ただし、無条件でセレクト要素を追加しているので、対象とするclass="line"の要素が存在しない場合、空のセレクト要素になってしまうために、同じ行でoptions[0]が存在しないことでエラーになる可能性があります。(実はこれで勘違いしてしまいました)
>コンボボックスが変更されたら、アラームを表示させるようにしたいのですが上手くいきません。
肝心なところを書き忘れていましたね。(これまた失礼いたしました)
//Slt.onChange = "alert('今だ')"; //この部分でselectにonChange を設定している
Slt.onchange = function(){ alert('今だ'); };
で、いけるかと思います。
他の方法としては、
Slt.addEventListener( "change", function(){~~}, false ); //for fx
Slt.attachEvent( "onchange" , function(){~~} ); //for IE
などでイベントをセットする方法もあります。
回答ありがとうございます。
教えて頂いた通り、書き直しましたところ意図した通り動作しました。
この度は本当にありがとうございました。
No.1
- 回答日時:
何をどうしたいのかがよくわかりませんが、ご提示のものが動作すればよいのであれば…
最後の document.getElementById('stasel')でエラーになっていますので、
(該当するidの要素がないので)
想像するところセレクト要素を取得したいのでしょうから、セレクトを生成した時に
Slt.id = "stasel";
の定義をしておけば動作するようになります。
(querySelectorに未対応のブラウザだと動きませんが)
でも、このままだと、ボタンを押される毎に同じidのセレクト要素が作成されることになってしまいます。
それなので、document.getElementById('stasel')も意図した要素が返されない可能性が…
この回答への補足
早速のご回答有難うございます。
まず、IDがないというご指摘ですが、23行目に「Slt.id = "stasel";」と記述しております。
ですので、IDがないのでエラーが出たとは思えないのですが間違っているでしょうか?
もう1つの、「同じidのセレクト要素が作成される」という事ですが、ボタンを押したときに既に要素が作られていたら削除する仕様になっていますので、同じ要素が繰り返されることはありません。
一応関数として定義しているので、今回の質問には関係ないかと思い載せていませんでした。
querySelectorに未対応のブラウザについては、確認してみたいと思います
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
これ何て呼びますか Part2
あなたのお住いの地域で、これ、何て呼びますか?
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
onchangeイベントを強制的に発生させる
JavaScript
-
selectタグに直接onChangeを書かないイベント取得方法
JavaScript
-
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptのカルーセル
-
jquery にて、アラートダイアロ...
-
テーブルの行数を可変長にした...
-
指定した箇所へスクロールさせたい
-
slickのレスポンシブ > center...
-
至急!GetElementById でtdの...
-
クリックされた罫表セルの行番...
-
フォームの値が0だったら空白...
-
return trueとreturn falseの用...
-
自動的に連番生成したURLにリン...
-
ドロップダウンリストの値の足...
-
XMLHttpRequestを利用してPHPへ...
-
チェックボックスにチェックが...
-
FormのonsubmitでJavaスクリプ...
-
フィールドを有効(enabled?)に...
-
Javascriptの"return "について
-
objectのindex値って取れますか?
-
プルダウン4つ連動+α
-
CSVファイルを読みこみ、プルダ...
-
VBScriptでHTMLのセレクトボッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
<iframe>内にHTMLをランダム表...
-
javascriptで画像をテーブルに...
-
WEB制作に関する質問です。コン...
-
javascript でテーブル操作
-
カレンダーに印を付けたい
-
日にち指定によるテーブル/行の...
-
テーブルのtdの中に、重複避け...
-
innerHTMLでのテーブル作成
-
プルダウンメニューを表の中に...
-
簡単なJavaスロットマシーンに...
-
javascriptで表に画像を貼る
-
javascriptで画像の移動
おすすめ情報