• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:イベントハンドラをタグ外に記述するには)

イベントハンドラをタグ外に記述するには

Blaiseの回答

  • Blaise
  • ベストアンサー率33% (13/39)
回答No.4

No.3へのコメント W3C的には問題ありとはいえないのでは? しかし、ブロック要素を要求するケースもあるわけで、 改行を嫌う必然性がない限り、理想的には、<span>よりも <div>を使用するのがよいのかも。以下参考抜粋: Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

hiyonari
質問者

お礼

ご指摘ありがとうございます。

関連するQ&A

  • INPUTタグ以外からイベントハンドラを起動する方法

    はじめまして。 いろいろ調べたのですが、的確な答えが見つかりませんでしたので、ご教授お願いいたします。 訳あってonchangeイベントをタグの外から起動したいのですが、関数に括弧を付けると「実装されていません」というエラーが出てしまいます。 括弧を付けていない関数はうまく起動します。 どうしても関数に引数を渡してあげたいのですが、どのようにすればよいのでしょうか? 動作環境は IE5.5 windows2000 ASPにてJavaScriptを作成しています。 以下ソースを簡略化して記述しました。 よろしくお願いいたします。 <html> <head> <script TYPE="text/javascript"> <!-- function f_AAA(){ alert("AAA"); } function f_BBB(a_value){ alert(a_value); } --> </script> </head> <body> <form> <input type="text" name="text1" value="1"> <input type="text" name="text2" value="2"> <script TYPE="text/javascript"> <!-- // ↓括弧の付いていない関数は起動します。 document.forms[0].text1.onchange = f_AAA; // ↓括弧の付いている関数は起動しません。 document.forms[0].text2.onchange = f_BBB("OK"); --> </script> </body> </form> </html>

  • onClickイベントの記述方法

    こんばんは、皆さん。 JavaScriptのonClickイベントで、うまく動きません。 以下のようにしました。一部関連する箇所の抜粋です。 どこがおかしいかご指摘ください。 <SCRIPT TYPE="text/javascript"> <!-- function ActionChange(CGI){ document.form.action='http://x.x.x.x/cgi-bin/b.cgi'; document.form.submit(); } //--> </SCRIPT> <FORM METHOD="POST" NAME="FORM" ACTION="http://x.x.x.x/cgi-bin/a.cgi"> <INPUT TYPE="submit" VALUE="aaa"> <INPUT TYPE="button" VALUE="bbb" onclick="ActionChange('b.cgi)"> よろしくおねがいします。

  • 複数のsubmitボタンで押されたボタンを取得する方法

    form内の、submitボタンの値が拾えません。 1つだけsubmitボタンを設置すると値が拾えますが、 2つ以上submitボタンを設置すると拾えません。 仕様上、無理なのでしょうか? <SCRIPT language="JavaScript"> function move_post(){ alert(document.frmMvPost.btn.value); } </SCRIPT> <FORM name="frmMvPost" action="" method="post" onsubmit="return move_post()"> <INPUT type="submit" name="btn" value="テスト1"> <INPUT type="submit" name="btn" value="テスト2"> <INPUT type="submit" name="btn" value="テスト3"> </form>

  • 文書オブジェクトについて???

    フォームボタンの画像を入れ替えたいのですが、 正しく動きません。何が悪いのでしょうか? 文字コードはEUC-JPを使っていますが、関係あるのでしょうか? <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <TITLE>Javascript</TITLE> <script type="text/javascript"> <!-- function btn_click(dat) { if(teban == 1){ document.forms['btn'].elements['btn1'].src = "./img/b.gif"; }else{ document.forms['btn'].elements['btn2'].src = "./img/d.gif"; } } --> </script> </HEAD> <BODY> フォームのボタンを使ってクリックすると画像が変わる  ようにしたい <form name="btn"> <input name="btn1" type="image" src="./img/a.gif" onClick="play_start(1); return false;"> <input name="btn2" type="image" src="./img/c.gif" onClick="play_start(2); return false;"> </form> </BODY> </HTML>

  • submit()の動作について。

    <style type="text/css"> .p1{display=none;} </style> <script language="JavaScript"> function BtnNone(){ document.btn1.style.display = "none"; document.msg1.style.display = "inline"; document.frm1.submit(); } </script> </head> <form name="frm1" method="post" action="send.cgi"> <div id="btn1"> <input type="text" name="a"> <input type="submit" name="submit" value="SEND" onClick="BtnNone()"> <input type="submit" name="submit" value="BACK"> </div> <p class="p1" id="msg1">送信中</p> </form> ------------------------- 主旨が変わったので新しく質問します。 こういうソースで"SEND"をクリックするとボタンが消えて「送信中」のメッセージが表れるのですが、secd.cgiがsubmitされません。 どこが間違っているのでしょうか。 よろしくお願いいたします。

  • 変数の記述について教えてください。

    こんにちは。 ご指導のほど、宜しくお願い致します。 javascriptで<form>のname="menu"を変数:formnameに 代入し、実行するように記述をしたいのですが どうもうまくいきません。 誤りの部分を教えて下さい。 <script Language="JavaScript"> <!-- var formname="menu"; // 本登録検索============================================== function itiran_onClick(){ document.+formname+.action" = "itiran.asp"; document.+formname+.submit()"; } ============================================== --> </script> <中省略> <form action="" method="post" name="menu"> <input type="text" name="TEST" value="1"> <input type="bottun" value="次へ" onclick="itiran_onClick()"> </form>

  • ボタンの並び替えとマウスイベント

    分かりにくいかも知れませんが、以下のソースを用いてJavaScriptの部分でボタンの並び替え、 マウスイベントを実行したいんですが、うまく実行できないので教えてください。 <html><head><title>a</title> <input type='button' value='34' style='background-color:#f60;left:137px;position:absolute;top:100px;width:100' onMouseOver='b()'> <input type='button' value='58' style='background-color:#f60;left:163px;position:absolute;top:100px;width:100' onMouseOver='b()'> <input type='button' value='100' style='background-color:#f60;left:250px;position:absolute;top:100px;width:100' onMouseOver='b()'> <SCRIPT LANGUAGE="JavaScript"> function a(){ ここでボタンをvalue='数値'の小さい物が最前に来るよう並び替え (value = 100,58,34の順でhtmlで書くのではなく、ここで並び替えをしたい) } function b() { ここでマウスがボタンに乗ったらそのボタンを最前に表示したい } </SCRIPT></body></html> function a,bの部分を教えてもらえると幸いです。 以上、質問が下手で分かりづらいですが、よろしくお願いします。

  • Imageオブジェクトを使って赤か白かを判定

    Imageオブジェクトがどんなものかよくわからずにソースを書いていますが、 <html> <head> <script type="text/javascript"> <!-- function Color(obj) { if (obj.style.backgroundColor == 'red') obj.style.backgroundColor = 'white'; else obj.style.backgroundColor = 'red'; } // --> </script> </head> <body> <a href="javascript:Color(document.outlet1)"> <img src="co.png" alt="outlet1" id="outlet1"/></a> <a href="javascript:Color(document.outlet2)"> <img src="co.png" alt="outlet2" id="outlet2"/></a> <form action="judge.cgi" method="get"> <input type="submit" value="設定" /> </form> </body> </html> 画像にリンクを貼り、クリックするたびに赤と白が交互になるように設定しています。 目的は背景画像を選択してsubmitを押した後、judge.cgiに移動します。 そのときにURLにhttp://IPアドレス?outlet1=red&outlet2=whiteなどという風に表示したいのです。 JavaScriptのimages配列を使えば出来ると聞いたのですが使い方がよくわかっていません。 どなたかご存じないでしょうか?ぜひ回答のほうお待ちしております。

  • 無効な viewstate

    無効な viewstate 事情があり、javascriptからaspのフォームをサブミットしたいと考えています。 後述したプログラムを記述しましたが、「無効な viewstate です」といった エラーが発生します。 おそらく、javascriptから実行したsubmitが、aspのviewstateの値をサーバに 送信していない為だと思うのですが、javascriptでviewstateを取得する方法など 回避策はあるのでしょうか? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function btn_onclick() { document.getElementById("form1").submit(); }; </script> </head> <body> <form id="form1" runat="server" action="nextpage2.aspx"> </form> <input type="button" value="test" onclick="javascript:btn_onclick();" /> </body> </html>

  • 複数ボタンのクリックイベント

    JavaScriptのイベントなのか変数のスコープなのかで質問がございます。 (一番下に全ソースを貼りました。見づらくて申し訳ありません。) htmlに複数の似た名前のボタンがあります。 名前:button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ 望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) {    document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。 私の認識、以下です。  ・0~9のイベントは正しく登録されている。  ・しかし、全てがchecked(10)を呼んでいる 質問1  これを回避する方法と、その対処理由を教えて頂きたくお願い致します。   質問2(オプション)  参考になる資料を教えていただければ幸いです。  例)サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等 よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。 */ for (i=2; i<4; i++) {    document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>