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.1
- 回答日時:
何をどうしたいのかがよくわかりませんが、ご提示のものが動作すればよいのであれば…
最後の document.getElementById('stasel')でエラーになっていますので、
(該当するidの要素がないので)
想像するところセレクト要素を取得したいのでしょうから、セレクトを生成した時に
Slt.id = "stasel";
の定義をしておけば動作するようになります。
(querySelectorに未対応のブラウザだと動きませんが)
でも、このままだと、ボタンを押される毎に同じidのセレクト要素が作成されることになってしまいます。
それなので、document.getElementById('stasel')も意図した要素が返されない可能性が…
この回答への補足
早速のご回答有難うございます。
まず、IDがないというご指摘ですが、23行目に「Slt.id = "stasel";」と記述しております。
ですので、IDがないのでエラーが出たとは思えないのですが間違っているでしょうか?
もう1つの、「同じidのセレクト要素が作成される」という事ですが、ボタンを押したときに既に要素が作られていたら削除する仕様になっていますので、同じ要素が繰り返されることはありません。
一応関数として定義しているので、今回の質問には関係ないかと思い載せていませんでした。
querySelectorに未対応のブラウザについては、確認してみたいと思います
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
などでイベントをセットする方法もあります。
回答ありがとうございます。
教えて頂いた通り、書き直しましたところ意図した通り動作しました。
この度は本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
onchangeイベントを強制的に発生させる
JavaScript
-
プルダウン選択を変更すると、変更する前に戻るJavaScript
JavaScript
-
selectタグに直接onChangeを書かないイベント取得方法
JavaScript
-
-
4
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
5
リクエストに応じたselectedの初期値設定方法
Java
-
6
Selectの中身をfor文で入れる
JavaScript
-
7
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
JQueryでテーブルの行を追加し...
-
テキストエリアに入力した改行...
-
動的なcheckboxのcheckedについて
-
jquery.csv2table.jsのテーブル
-
簡単なJavaスロットマシーンに...
-
selectのonChangeが動作しません
-
外部のデータファイルの読み込...
-
テーブルの行数を可変長にした...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
submitボタン押下時にPOSTされ...
-
onchangeイベントを強制的に発...
-
大文字か小文字かを判断する方法
-
【jQuery】input nameの文字列...
-
Selectボックスの幅を自動で広...
-
ラジオボタンにタブインデック...
-
Javascriptの電卓で最初の何も...
-
ハイパーリンクを別ウインドウ...
-
selectを変更不可にしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
idの振り直しについて
-
プルダウンメニューを表の中に...
-
javascriptで画像をテーブルに...
-
javascriptで<table>背景色の取得
-
どこに挿入?
-
javascriptでクリックするごと...
-
jquery にて、アラートダイアロ...
-
Javascriptでテーブルタグの座...
-
動的なcheckboxのcheckedについて
-
javascriptで画像の移動
-
<iframe>内にHTMLをランダム表...
-
クリックごとに文字色が交互に...
-
javascriptでスロットマシン
-
連動テーブルのクロスハイライト
おすすめ情報