IE11でのGetElementByIdの使い方について
- html(5)内に、inputのhiddenに、複数のデータが設定されていまして、そのデータをJavaScriptで取得し、alert表示したい場合、IE11ではGetElementByIdでエラーが発生することがあります。
- IE11での正しいGetElementByIdの使い方は、document.getElementByIdを使用し、要素のid属性の値を指定することです。
- 具体的には、getElementById('A'+i)のようにid属性の値に変数を組み込んで指定することで、指定したidの要素を取得することができます。
- ベストアンサー
GetElementById の使い方(IE11)
お世話になります。 html(5)内に、inputのhiddenに、複数のデータが設定されていまして、 そのデータをJavaScriptで取得し、alert表示したいのです。 例えば、 <input type="hidden" name="A0" id="A0" value="名称[1]"> <input type="hidden" name="A1" id="A1" value="名称[2]"> <input type="hidden" name="A2" id="A2" value="名称[3]"> を for(i=0;i<3;i++){ if( document.xxxform.GetElementById("A"+i) ){ data = document.xxxform.GetElementById("A"+i).value; str += data ; } } alert(str); のような感じにしたのですが、IE11でエラーになってしまいます。 if( document.xxxform.GetElementById("A"+i) ){ → ここでエラーのようです。 正しくはどのようにしたらよいのでしょうか？ どなたか、アドバイスをお願いいたします。
- jg1wjz
- お礼率91% (148/162)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
document.getElementById("A" +i) で取得できないでしょうか？ ・xxformをはずす ・頭文字を小文字に。GetElementById → getElementById
関連するQ&A
- .getElementByIdでnameを拾う？
javascriptで.getElementByIdでなぜかname属性を拾ってしまいます。 <script> function gets() { aa = document.getElementById('idid').innerHTML; bb=document.getElementById('idid').tagName; alert(aa+bb); } </script> <input type="submit" value="ボタン" name="idid" onclick="gets();"><span id="idid">ああああ</span> 上記は大分省略してえいますが、このようなコードで aaに「ああああ」が代入されず、bbに「INPUT」が代入されます。 通常ならアラーとは「ああああSPAN」のはずが「INPUT」になってしまいます。 どのような理由が考えられるでしょうか。 ちなみに、HTMLページはフレーム内で表示しています。
- 締切済み
- JavaScript
- 値の受け渡し（少し複雑）
失礼いたします。 質問させてください。 サーブレットから値（id[i]）を受け取り画面に表示させ、そのリンクをクリックした時サーブレットのservに値（id[i]とi）を受け渡したいです。その際JavascriptとしてvalueDeliveryを使いました。 (全体をiが0からリスト数まででループさせている。) <form action="serv" name=frm method=post> <a href="JavaScript:valueDelivery('<%=id[i]%>')" onclick="document.frm.id.value='<%=id[i]%>';"><%=id[i]%></a><br> <input type="hidden" name="id" value="<%=id[i]%>"><input type="hidden" name="i" value="<%=i%>"><input type="hidden" name="action" value="addAnkenn"> <script> function valueDelivery(js_id) { if(js_id == "" || js_id == null) { alert(js_id); } else { alert(js_id); document.frm.id.value = js_id; document.frm.submit(); } } </script> ところが、アラートではちゃんとidが表示されるものの送った先のサーブレットではid[i]の値がすべてid[0]の値になっています。iはいつも0ですし。。。これはサブミットした時またiを０から数え始めているということでしょうか？ よくわかりません、分かる方、よろしくお願いします。m(__)m
- ベストアンサー
- Java
- WSH
フォームにデータがないまま実行するとEROORメッセージを出し、書き込み処理を行わないようにしたいのですが、 if （ひとつでもフォームに値が入っていないとき） msgbox("eroor") else （全部入っているとき） （書き込み） end if としているはずなのですが、なぜか動きません。 （入力しなくても書き込み処理をしてしまい、保存しましたと表示されてしまいます。） <script language=vbscript> <!-- Sub ok_OnClick n=1 Set fso = CreateObject("Scripting.FileSystemObject") Set tmpFile = fso.OpenTextFile("C:\borland\bcc55\t\1203\a.txt",8, True) if File1Name1="" Or File1Name2="" Or File1Name3="" Or File1Name4="" Or File1Name5="" Or n="" Then msgbox("eroor") else for I=1 to n str1=document.all("File" & CStr(I) & "Name1").value str2=document.all("File" & CStr(I) & "Name2").value str3=document.all("File" & CStr(I) & "Name3").value str4=document.all("File" & CStr(I) & "Name4").value str5=document.all("File" & CStr(I) & "Name5").value str=str1 & "," & str2 & "," & str3 & "," & str4 & "," & str5 tmpFile.WriteLine str next Document.Write "<center><br><br><br><br>" Document.Write "保存しました。" end if End Sub --> </script> <html><body><center> <table><tr><td><input SIZE=12 type=text id=File1Name1></td><td><input SIZE=12 type=text id=File1Name2></td><td><input SIZE=12 type=text id=File1Name3></td><td><input SIZE=12 type=text id=File1Name4></td><td><input SIZE=12 type=text id=File1Name5></td></tr></table><br><br><input type=button name=ok value=登録></center></body></html>
- ベストアンサー
- Microsoft ASP
- document.getElementByIdがIE8だけ動きません
javascript 初心者です。 HP上で問い合わせページを作っています。 質問の内容によって入力項目を表示/非表示させるために以下のようなスクリプトを書きました。 q-1 を選んだ時は”名前”と”質問内容”を入力，q-2 を選んだ時は”名前”，”入力１”，”質問内容”を入力するという形式です。 質問内容の選択はプルダウンメニューから行います。 IE8以外では動くのですが、IE8だけ動きません。 どうすればよいかを教えて下さい。 <head> 略 <script type="text/javascript"><!-- function checkmenu( disp ) { var a = disp ; document.getElementById('basic-info').style.display = "block"; document.getElementById('question').style.display = "block"; switch(a){ case "select_q-1" : document.getElementById('disp_q-2').style.display = "none"; break; case "select_q-2" : document.getElementById('disp_q-2').style.display = "block"; break; } } --> </script> </head> <body> <略> <select name="naiyou"> <option onclick="checkmenu('select_q-1')" value ="q-1">質問１<br> <option onclick="checkradio('select_q-2')" value ="q-2">質問２<br> <div id="basic-info" style="display:none"> <table class="aaa"> <tr> <td class="aaa" width="30%" valign="top"><b>お名前:</b></td> <td class="bbb" width="70%"><input type="text" name="name" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="disp_q-2" style="display:none"> <table class="aaa" > <tr> <td class="bbb" width="30%" valign="top"><b>入力１：</b></td> <td class="td_toumei" width="70%"><input type="text" name="nyuuryoku1" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="question" style="display:none"> <table class="aaa"> <tr> <td class="aaa" colspan="2"><b>質問内容: </b></td> </tr> <tr> <td class="bbb" valign="top" colspan="2"> <textarea name="question" cols="60"rows="10"></textarea> </td> </tr> <tr> <td class="bbb" colspan="2"> <input type="hidden" name="language" value="j"> <input type="submit" value="送信"> <input type="button" name="del" value="本文 クリア" onclick="msgclear()"> </td> </tr> </table> </div> 略 </body> 実際の質問の項目や入力内容はもう少し複雑ですが、おおまかにはこんな感じです。 プルダウンメニューで選択しても、IE8だけまったく動きません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascript 要素取得
htmlでチェックボックスを作り、その値をjavascriptで取得したいと思い、 下記のようなプログラムを書きました。 セレクトボックスから複数選択できるようにしたいのですが、 表示されるのは複数選んだ際に一番初めに選択したものだけです。 例) 「あああ」と「いいい」を選ぶと「あああ」のみ表示される。 しかし、これを「あああ.いいい」としたいのです。 できれば、 「あああ いいい」 と改行できるといいです。 formの中にたくさんの項目があるため、 forのところがうまくいっていないのでしょうか？ どなたかよろしくお願いします。 javascript側 function checkbox(){ var str=""; for(i=0;i<document.form1.elements.length;i++){ if(document.form1.elements[i].checked){ if(str != "") str = str + "."; str = str + document.form1.document[i].value; } } if(str == ""){ alert("入力してください"); return false; }else{ document.form1.submit(); } } HTML側 <form action="<%=遷移先ページ%>" method="post" name="form1"> <select 複数> <input 複数> <input type="checkbox" name="document" value="・あああ"/>あああ <input type="checkbox" name="document" value="・いいい"/>いいい <input type="checkbox" name="document" value="・ううう"/>ううう <input type="submit" value="Submit" onclick="return checkbox();">
- 締切済み
- JavaScript
- javascriptにてHTMLのhiddenエリアのvalueを変更したい
javascriptにてHTMLのHIDDENエリアのVALUEをフォームの値が変わるごとに更新していきたいのですが、やり方がいまいちわかりません。 <input type = "text" value="10" id="aaa" onchange=aaa();/> <input type = "text" value="20" id="bbb" onchange=aaa();/> <input type = "hidden" name="abc" value="aaa"/> <script> function aaa(){ document.abc.value = document.getElementById("aaa").value+document.getElementById("bbb").value ; } </script> このような感じで考えていますが、進みません。どなたかご教授お願いいたします。
- 締切済み
- JavaScript
- javascriptがIEだけ動作しません
javascript初心者です。 サイトに、ラジオボタンの選択に応じて、 値をテキストボックスに返す仕組みを作りたいと思っています。 Chrome,FireFox,Operaでは正しく動作していすが、 IEでは、テキストボックスのみ表示され、 ラジオボタンと選択肢が非表示になってしまいます。 お手数ですが、ご教示をお願いしたく、 よろしくお願いします。 <form> <script type="text/javascript"> NoDHTML=(!document.all && !document.getElementById) || (navigator.userAgent.indexOf('Opera/6.')>=0) || (navigator.userAgent.indexOf('Opera 6.')>=0); function changeMenu2(n) { if (NoDHTML) return; if (n==100) { if (document.all) { document.all['TNAME'].style.display='none'; document.all['TNAME2'].style.display='none'; } else if (document.getElementById) { document.getElementById('TNAME').style.display='none'; document.getElementById('TNAME2').style.display='none'; } with(document.forms[0].TNAME) { options.length=1; options[0].text=''; options[0].value=''; } document.forms[0].TNAME2.value=''; } else { if (document.all) { document.all['TNAME2'].style.display='none'; document.all['TNAME'].style.display='none'; } else if (document.getElementById) { document.getElementById('TNAME2').style.display='none'; document.getElementById('TNAME').style.display='none'; } if (n==0) { document.forms[0].course_name.value='りんご'; document.forms[0].course_price.value='600円'; } else if (n==1) { document.forms[0].course_name.value='メロン'; document.forms[0].course_price.value='1000円'; } else if (n==2) { document.forms[0].course_name.value='マンゴー'; document.forms[0].course_price.value='5000円'; } } document.forms[0].TNAME.options[0].selected=true; } if (!NoDHTML) { document.write( ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(0);" onkeypress="return(true)" />リンゴ</label><br />'+ ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(1)" onkeypress="return(true)" />メロン</label><br />'+ ' <label><input type="radio" name="TNAME2" onclick="changeMenu2(2);" onkeypress="return(true)" />マンゴー</label>'+ '<input type="hidden" name="course_name">' ); } </script> <!-- ★★ここの部分はCSSで強制的に見えないようになっています --> <select name="TNAME" id="TNAME" style="display:none !important;"> <option value="" selected="selected" style="display:none !important;"></option> </select> <!-- /★★ここの部分はCSSで強制的に見えないようになっています --> <script type="text/javascript"> if (!NoDHTML) { document.write( '<input type="hidden" name="TNAME2" id="TNAME2" value="" size="20" />' ); } </script> <br /> <br /> <br /> <!-- ★★ここに"course_priceの値が表示されます --> <input type="text" name="course_price" readonly="readonly"> <!-- /★★ここに"course_priceの値が表示されます --> </form>
- ベストアンサー
- JavaScript
- javascriptの動作で困ってます。
動作不良が三箇所あります。 プログラムに詳しい方がいらっしゃいましたら原因を教えて下さい。 ・未入力の質問をアラートで一括表示させたいのですが、 （３）のテキストエリアの箇所が未入力なのにアラートに表示できません。 判定のtrueとfalseを逆にして試すと、（３）のアラートは表示されるものの、記入しても アラートが出続けます。 ・１度しか指定していないにも関わらず同じ内容の警告アラートが２回出てしまう原因が分かりません。 ・入力した項目や選択した項目に関しては未入力項目のアラートとは別のアラートを用意してvalueの値をアラートで一括表示させたいのですが、関数を定義しているにも関わらず、関数が定義されていないとエラーメッセージが帰ってきて、表示されません。 ソースコードは以下になります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check(){ var msg = ""; var msg2 = ""; var str = document.form.id.value; var str2 = document.form.pass.value; if (str.match(/[^0-9]+/)) { alert("客番号は数字のみ"); } if (str.length>5) { alert("客番号は4～5桁"); } if(str.length<4){ alert("客番号は4～5桁"); } if(str==""){ msg += "客番号が未入力です。\n"; }else{ msg2 += document.form.id.value; } if(str2==""){ msg += "パスワードが未入力です。\n"; }else{ msg2 += document.form.pass.value; } if(radioCheck()==false){ msg += "(1)が未入力です。\n"; } if(checkboxCheck()==false){ msg += "(2)が未入力です。\n"; } if(textareaCheck()==false){ msg += "(3)が未入力です。\n"; } if(selectCheck()==false){ msg += "(4)が未入力です。\n"; } if(msg != ""){ //メッセージを出力 alert(msg); } if(radioCheck()==true){ msg2 += document.form.eng.value ; } if(checkboxCheck()==true){ msg2 += document.form.lang.value ; } if(txtareaCheck()==true){ msg2 += document.form.opinion.value ; } if(selectCheck()==true){ msg2 += document.form.age.value ; } if(msg2 != ""){ //メッセージを出力 alert(msg2); } } function radioCheck(){ var count = 0; var eng=document.getElementsByName("eng"); for(var i=0;i<eng.length;i++){ if(eng[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function checkboxCheck(){ var count = 0; var checklist=document.getElementsByName("lang[]"); for(var i= 0;i<checklist.length;i++){ if(checklist[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function textareaCheck(){ var textarea=document.getElementById("demand").value; if(textarea!=""){ return true; } else{ return false; } } function selectCheck(){ var selectValue=document.getElementById("age").value; if(selectValue!="選択されていません"){ return true; } else{ return false; } } </script> </head> <body> <form action="http://www" method="post" name="form"onSubmit="return check()"> <h1>アンケート</h1> <p><label>客番号：<input type="text" name="id"></label></p> <p><label>パスワード：<input type="password" name="pass"></label></p> <h2>（１）</h2> <p>食べたいですか？<br> <br> <input type="radio" name="eng" value="yes"> はい <input type="radio" name="eng" value="neither"> どちらでもない <input type="radio" name="eng" value="no"> いいえ </p> <h2>（２）</h2> <p>食べたい物<br> <br> <input type="checkbox" name="lang[]" value="apple"> りんご <input type="checkbox" name="lang[]" value="banana"> バナナ <input type="checkbox" name="lang[]" value="pasta"> パスタ <input type="checkbox" name="lang[]" value="pizza"> ピザ <input type="checkbox" name="lang[]" value="supu"> スープ </p> <h2>（３）</h2> <p>意見（自由記述）<br> <textarea id="demand" name="opinion" cols="40" rows="4" maxlength="20"> </textarea> </p> <h2>（４）</h2> <p> 年齢を選択 <select id="age" name="age"> <option selected value="選択されていません">以下から選択</option> <option value="10～19才">10～19才</option> <option value="20～29才">20～29才</option> <option value="30～39才">30～39才</option> <option value="40～49才">40～49才</option> <option value="50～59才">50～59才</option> <option value="60～69才">60～69才</option> <option value="70才～">70才～</option> </select> </p> <p> <input type="submit" name="button" value="送信" onclick="check();"> <input type="reset" value="クリア"> </p> </body> </form> </html>
- 締切済み
- JavaScript
- IEの半角スペースの連続とinnerHTMLについて
IEだと文頭に半角スペースがある場合は詰められ、文中に半角スペースが連続する場合は一つにまとめられてしまいます。 ただ、innerHTMLだと正しく取れると思っていましたがやはり詰められて取得されてしまいます。 ただしく取得できる方法を模索しております。 hiddenに値を設定などではなく、現在のHTMLからの取得方法をお願い致します。 下記のソースで状況を再現できますのでご確認ください（blankの間のスペースは2つ空いています） <html> <head> <script> function testfunc() { str = document.getElementById('test2').innerHTML alert('[' + str + ']'); } function testfunc2() { str = document.getElementById('test').childNodes[0].firstChild.nodeValue; alert('[' + str + ']'); } </script> </head> <body> <div id="test"><div id="test2"> blank blank </div></div> <input type="button" value="CLICK ME1" onclick="testfunc()"><br> <input type="button" value="CLICK ME2" onclick="testfunc2()"> </body> </html>
- ベストアンサー
- JavaScript
- Firefoxで表示できないのは何故でしょう？
お世話になります IE6、Operaでは表示できたのですがFirefoxでは表示できませんでした（＞＜） 何か見落としがあるのでしょうか？ <script language="javascript"> <!-- window.onload = function() { n=document.getElementById("div1").innerText; if(n == "a0"){ document.getElementById("img1").style.display = "block"; document.getElementById("img1").style.top = "100px"; document.getElementById("img1").style.left = "100px"; } if(n == "a"){ document.getElementById("img2").style.display = "block"; document.getElementById("img2").style.top = "100px"; document.getElementById("img2").style.left = "200px"; } } //--> </script> <div id="div1">a</div> <form action="test.cgi" method="post"> <input type="hidden"name="a" value="leap_day"> <input type="image" src="sample0.gif" id="img1" style="position:absolute;display:none;"> </form> <form action="test.cgi" method="post"> <input type="hidden"name="b" value="leap_day"> <input type="image" src="sample1.gif" id="img2" style="position:absolute;display:none;"> </form> n=document.getElementById("div1").innerText; if(n == "a0"){ } if(n == "a") { } を消すと表示はできるのですが・・・
- ベストアンサー
- JavaScript
お礼
hinso_at さん、有難うございます。 早速試したところ、バッチリうまく取得できました。 form名はいらないんですね。 というか、つけてはいけないんですね。 あんなに時間をかけて悩んだことが悔やまれます。 もっと早く質問していればよかった！ 助かりました！ またよろしくお願いいたします。