「…は宣言されていません。」エラー回避方法とは?

このQ&Aのポイント
  • スクリプトコードによるプルダウンメニュー表示時に「エラー:'sss'は宣言されていません。」と表示される場合、回避する方法があります。
  • 「id='sss'」という要素がスクリプトコード内では宣言されていません。このため、エラーが発生しています。
  • エラーを回避するためには、宣言や定義の処理が必要です。具体的には、(2)の行で宣言した要素をスクリプトコード内で宣言する必要があります。
回答を見る
  • ベストアンサー

「…は宣言されていません。」エラー回避

下記のようなスクリプトコードがあります。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>test</title> </head> <body> <script type="text/javascript"> <!-- function pulldown() { sss.style.display="block";  --- (1) sss.style.left=event.x; sss.style.top=event.y; } function listsel() { var kintaicode = document.form1.kintaicode.options[document.form1.kintaicode.selectedIndex].value ; document.form1.an.value = kintaicode ; sss.style.display="none"; } //--> </script> <form name="form1"> <select id='sss' style='display:none;position:absolute' name='kintaicode' onchange='listsel()'>  --- (2) <option value='1'>東京都</option> <option value='2'>神奈川県</option> </select> <table> <tr> <td onClick="pulldown()">A</td> </tr> <tr> <td onClick="pulldown()">B</td> </tr> </table> <input type='text' name='an'> </form> </body> </html> (2)のところでidを宣言しているのですが、実行させAをクリックすると「エラー:'sss'は宣言されていません。」と表示されます。 回避させる方法はありますか? ちなみに、何をしたいのかというと、クリックしたところにプルダウンメニューを出したいのです。

質問者が選んだベストアンサー

  • ベストアンサー
  • kalze
  • ベストアンサー率47% (522/1092)
回答No.1

▼質問文に書かれているもの function pulldown() { sss.style.display="block";  --- (1) sss.style.left=event.x; sss.style.top=event.y; } function listsel() { var kintaicode = document.form1.kintaicode.options[document.form1.kintaicode.selectedIndex].value ; document.form1.an.value = kintaicode ; sss.style.display="none"; } ▼修正したもの function pulldown() { document.all.sss.style.display="block";  --- (1) document.all.sss.style.left=event.x; document.all.sss.style.top=event.y; } function listsel() { var kintaicode = document.form1.kintaicode.options[document.form1.kintaicode.selectedIndex].value ; document.form1.an.value = kintaicode ; document.all.sss.style.display="none"; }

gaogao30
質問者

お礼

御回答ありがとうございます。 うまく動きました! こんなに単純だったなんて… Javascriptを勉強しながらコードを書いていて、試行錯誤しながらやっているもんですから… 勉強が足りませんね。すいません。

関連するQ&A

  • ifで<TR>を段落ごと消す・表示切り替えをしたいんですが…

    ifに持ってきた数字で<TR>を段落ごと消す表示切り替えをしたいんですが上手くいきません document.form1.test1.style.display = "none";のところがおかしいとは思ってるんですが… 昨夜からあれこれやってみたけどもう駄目>< どなたかお時間のある方がいらっしゃいましたら教えてください http://kissho.xii.jp/1/src/1jyou57340.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja-JP"> <HEAD><TITLE>表示切り替えテスト</TITLE> <SCRIPT TYPE="text/javascript"> <!-- function kirikae(){ var test_in = document.form1.test_in.options[document.form1.test_in.selectedIndex].value; if (test_in == "1") { document.form1.test1.style.display = "none"; //ここがおかしいとは思うんですが document.form1.test2_2.style.display = "inline";} else if (test_in == "2") { document.form1.test2_2.style.display = "none"; document.form1.test1.style.display = "inline";} else { document.form1.test2_2.style.display = "inline"; document.form1.test1.style.display = "inline";} } </SCRIPT> </HEAD><BODY><FORM NAME="form1"><TABLE border="1"> <TR id="test1"> <TD> test1 </Td> </Tr> <TR id="test2"> <TD> test2 <input type="text" size="10" id="test2_2"> </Td> </Tr> <TR> <TD> <SELECT NAME="test_in" onChange="kirikae()"> <OPTION VALUE="0">0 <OPTION VALUE="1">1 test1をTRの段落ごと消す(ようにしたいんだけど消えない) <OPTION VALUE="2">2 test2のテキストエリアを消す </SELECT> </Td></Tr> </TABLE></FORM></BODY></HTML>

  • Javascriptで自動計算の合計の式でエラー

    度々すみません。 前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。 色々調べてみたのですが、この現象の原因がよくわかりません。 何かエラーがあるのでしょうか。 お知恵を貸して頂けると嬉しいです。 宜しくお願いします。 <スクリプト> <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> <HTMLソース> <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'>&nbsp;</td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>

  • DOCTYPE宣言とjavascript

    United Statesを選んだ場合、州を選択。 それ以外の国の場合はtextフィールドで県なりを直接書き込む と言うようにしたく、下記の様にページを作成したのですが、 IE、Opera、Safariなど他では全て動作したのですが、 Firefoxのみ動作しませんでした。 但し、DOCTYPE宣言の"http://www.w3.org/TR/html4/loose.dtd" を削除したらFirefoxでも動作しました。 ただ、ここを削除すると全体的にデザインがズレてしまいます。 Firefoxでも動くようにjavascriptの部分を変更すると言う事で解決したいのですが、 良い書き方が解りません。どなたかご教授願えますでしょうか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <script type="text/javascript"> function changeField(){ index= test_form.country.value; if (index != "UnitedStates"){ document.getElementById("select1").style.display="inline"; document.getElementById("select1").disabled=false; document.getElementById("select2").style.display="none"; document.getElementById("select2").disabled=true; } else { document.getElementById("select1").style.display="none"; document.getElementById("select1").disabled=true; document.getElementById("select2").style.display="inline"; document.getElementById("select2").disabled=false; } } </script> <form name="test_form"> <select name="country" onChange="changeField()"> <option value="Japan" selected="selected">Japan</option> <option value="UnitedStates">United States</option> </select> <input id="select1" name="state" type="text" size="20" /> <select id="select2" name="state" style="display:none" disabled> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> </select> </form> </div> </body> </html>

  • HTML内の指定の位置にプルダウンを読み込みたい

    まずラジオボタンがあって、 選択するとfunctionに格納してあるプルダウンを ラジオボタンの下の指定した箇所に表示させたいです。 ラジオボタンを変更すると、プルダウンも変わるようにしたいです。 教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"><!-- function pulldown1(){ document.write('<select name="AAA" size="1">'); document.write('<option value="1-1" selected>1-1</option>'); document.write('<option value="1-2">1-2</option>'); document.write('</select>'); } function pulldown2(){ document.write('<select name="BBB" size="1">'); document.write('<option value="2-1" selected>2-1</option>'); document.write('<option value="2-2">2-2</option>'); document.write('</select>'); } //--></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ1 <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ2 </FORM></BODY> </HTML>

  • ラジオのチェックでフォーム表示、PHPへPOSTさせたい

    見よう見まねで作成したのですが、わからないので教えてください。 ラジオボタンのOKをクリックするとアカウントとパスワードの入力フォーム、ログインボタンが表示され、aaa.phpに飛びたいです。 「OK」で表示、「NO」で非表示はなんとかできましたが、問題が2点あります。 1.test.htmlにアクセスしたときすでに「OK」にチェックがついていて、テキストエリアとログインボタンが表示されてしまいます。 「NO」のほうにcheckedをいれてみましたがダメでした。 2.phpへとばず、test.htmlにとんでしまいます。 宜しくお願いいたします。 test.html - - - - - - - - - - - - - - - - - - - <script type="text/javascript"> <!-- function Sel(me){ if(me.value=="1"){ me.form.account.disabled=false; me.form.password.disabled=false; me.form.btn.disabled=false; document.getElementById('SelA').style.display=(document.all)? 'block':'table-row'; document.getElementById('SelB').style.display='none'; }else{ me.form.account.disabled=true; me.form.password.disabled=true; me.form.btn.disabled=true; document.getElementById('SelA').style.display='none'; document.getElementById('SelB').style.display='none'; } } //--> </script> <form name="Quick1"> <form name="send" method="POST" action="aaa.php"> <input type="radio" name="AB" value="1" checked onclick="Sel(this)">OK <input type="radio" name="AB" value="2" onclick="Sel(this)">NO</td></tr> <tr id="SelA"> <td></td><td> <input type="text" size="30" maxlength="5" name="account" ><br> <input type="password" size="24" maxlength="5" name="password" > <input type="submit" name="btn" value="ログイン"> </form> </td></tr> <tr id="SelB" style="display:none">・・・</form>

  • javascriptがIEで機能しない

    ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択1"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択1</option> <option>選択2</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択1を選択しても非表示のままです どこを修正してやればいいでしょうか? ぜひ御指南ください。

  • JavaScriptでの表の行の表示・非表示の切り替え

    現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。 テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "test1"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "test1"){ if(document.getElementById){ document.getElementById("test1").style.display = "none"; } } } // --> </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト1</option> <option value="test2">テスト2</option> <option value="test3">テスト3</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p>&nbsp;</p> </td> <td width="217"> <p>&nbsp;</p> </td> </tr> </table> <div id="test1" style="display:none;"> (本来はここに2行追加したい) </div> </body> </html>

  • TABLEの行を非表示にした際の隙間

    テーブルの行をクリックアクションにて開閉したいのですが、 開いたテーブルを閉じた際に隙間ができてしまいます。 これはIE6で発生し、FireFox3では隙間無く閉じています。 IE6でも、この隙間を無くすことは可能でしょうか? ご教授願います。 現状のスクリプトは以下のようにしています。 (クリックするのは左上のプラス/マイナスの画像です) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <TITLE></TITLE> </HEAD> <BODY> <script type="text/javascript"> function close_list(){ document.getElementById("img").src = '../images/plus.gif'; document.getElementById("img").onclick = new Function(" open_list(); "); document.getElementById("mark").rowSpan = '1'; document.getElementById("tr_yuubin").style.display = 'none'; document.getElementById("tr_ken").style.display = 'none'; document.getElementById("tr_stat").style.display = 'none'; return; } function open_list(){ document.getElementById("img").src = '../images/minus.gif'; document.getElementById("img").onclick = new Function(" close_list(); "); document.getElementById("mark").rowSpan = '5'; document.getElementById("tr_yuubin").style.display = ''; document.getElementById("tr_ken").style.display = ''; document.getElementById("tr_stat").style.display = ''; return; } </script> <FORM> <TABLE width="755" border="1"> <TBODY align="left"> <TR> <TD width="15" align="center" id="mark" valign="top"><img name="img" id="img" src="../images/plus.gif" onclick="open_list()"></TD> <TD width="135" >タロウ </TD> <TD width=""> <INPUT type="checkbox" id="chk" name="chk" value="1">登録 </TD> </TR> <TR id="tr_yuubin" style="display: none;"> <TD width="135">郵便</TD> <TD><input name="yuubin" type="text" id="yuubin" style="width:150px" ></TD> </TR> <TR id="tr_ken" style="display: none;"> <TD width="135">都道府県</TD> <TD> <select style="width:400px"><option> </select> </TD> </TR> <TR height="20" id="tr_stat" style="display: none;"> <TD width="135">ステータス</TD> <TD> </TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

  • <form>を使用しないことによる、干渉の回避策

    以下の様に、 セレクトボックスで選択した値を、 ボタン押下でそれぞれのテキストボックスに一括で代入する スクリプトがあるのですが、この様式を使用するつもりであった場所は、他のJavaScriptの関数で定義した<form>と干渉してしまい、 動かない現象が起きてしまいました。 このスクリプト中で、<form>を使用しない形で、 同じ動作をさせるには、どの様に修正したらよろしいでしょうか。 ご教授、よろしくお願いします。 <HEAD>要素 function my1() {a=document.form1.eiji.value; document.form1.eiji2.value=a;} function my2() {a=document.form2.moji.value; document.form2.moji2.value=a;} function my3() {a=document.form3.suuji.value; document.form3.suuji2.value=a;} <BODY>要素 <form name="form1"> <SELECT NAME = "eiji" style="width:150px;"> <OPTION VALUE = "">↓-選んで下さい-</OPTION> <OPTION VALUE = "a">a</OPTION> <OPTION VALUE = "b">b</OPTION> <OPTION VALUE = "c">c</OPTION></SELECT> <input type="text" name="eiji2" style="width:150px;"> </form> <form name="form2"> <SELECT NAME = "moji" style="width:150px;"> <OPTION VALUE = "">↓-選んで下さい-</OPTION> <OPTION VALUE = "あ">あ</OPTION> <OPTION VALUE = "い">い</OPTION> <OPTION VALUE = "う">う</OPTION></SELECT> <input type="text" name="moji2" style="width:150px;"> </form> <form name="form3"> <SELECT NAME = "suuji" style="width:150px;"> <OPTION VALUE = "">↓-選んで下さい-</OPTION> <OPTION VALUE = "1">1</OPTION> <OPTION VALUE = "2">2</OPTION> <OPTION VALUE = "3">3</OPTION></SELECT> <input type="text" name="suuji2" style="width:150px;"> </form> <input type="button" value="入力" onClick="my1();my2();my3();">  

  • javascriptの変数の渡し方

    ラジオボタンで選択した値によって表示するテーブルを変えるフォームを作っています。 AAAは入力ボックスが1つ BBBは入力ボックスが2つ 同じphpへ送信して、入力ボックスへデータは入るのですが、javascriptの値を渡すことが出来ません。 BBBでsubmit後、BBBの入力ボックスを表示することは出来ますでしょうか。 <? echo "<form method=post action=?>"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=1"; if($user==1){ echo " checked"; } echo ">AAA"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=2"; if($user==2){ echo " checked"; } echo ">BBB"; echo "<br>"; echo "<span id=inner>"; echo "<table>"; echo "<tr>"; echo "<td>AAAのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<span id=outer>"; echo "<table>"; echo "<tr>"; echo "<td>BBBのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "<td><input name=form2 type=text value=$form2></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<br>"; echo "<input type=submit value=submit>"; echo "</form>"; ?> <script language='javascript'> var inner = document.getElementById('inner'); var outer = document.getElementById('outer'); function change_user (uid) { if (uid == '2') { inner.style.display = 'none'; outer.style.display = ''; } else { inner.style.display = ''; outer.style.display = 'none'; } } change_user(document.getElementById('user').value); </script>

    • ベストアンサー
    • PHP