Javascript; フィールドの属性変更

このQ&Aのポイント
  • JavaScriptを使用してフォームのフィールド属性を変更する方法について質問です。
  • 特定のフィールドの属性を変更する際に、 'readOnly' および 'onchange' プロパティに関するエラーが発生しています。
  • 対策として、エラーが発生している行でオブジェクトがNullまたは未定義であるかを確認する必要があります。また、ループ内でのフィールドの属性変更やイベントの設定にも注意が必要です。
回答を見る
  • ベストアンサー

Javascript; フィールドの属性変更

作成したフォームに対してJavaScriptでの処理を行おうとしています。 セットした社名やDB検索した値の属性変更をしたいのですが、下記エラーが表示されます。 どのような対策がございますか? SCRIPT5007: プロパティ 'readOnly' の値を設定できません: オブジェクトは Null または未定義です。 SCRIPT5007: プロパティ 'onchange' の値を設定できません: オブジェクトは Null または未定義です。 下記のJavaScriptでの処理を行おうとしています。 function SetEvent() { document.getElementById("CompanyTextBox").readOnly="readonly";  //ここで、エラーになります。 //DB検索処理........ //配列 var counter = 0; var code = new Array(); for (var i = 0; i <10; i++) { code[i] = new Array(); code[i][0] = 'TextBox' + ((i * 4) + 1); code[i][1] = 'TextBox' + ((i * 4) + 2); document.getElementById(code[i][1]).readOnly="readonly"; //ここで、エラーになります。 } //検索結果のセット do { var elem = document.getElementById(code[counter][0]); elem.onchange = function(event) //ここで、エラーになります。 ・ ・ counter++; } while(counter < 10) }

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

かならずもれなく合致するオブジェクトが存在するなら バージョンなどの問題の可能性もあるので document.getElementById(code[i][1]).readOnly="readonly"; をより一般的な document.getElementById(code[i][1]).readonly=true; などの表現に変えてみてはどうでしょうか?

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

code[i][1]やcode[counter][0]で得られる値に合致するidをもったユニークな要素が必ずあるのでしょうか?

genesis50
質問者

補足

はい、ユニークな値が存在します。

関連するQ&A

  • javascriptで編集可能不可能の切り替え

    いつもお世話になっております。 javascriptを用いて、テキストボックスを状況によって編集可能、不可能を 変更するものを作っております。 現在、テキストボックス単品ではその動作が可能となっていますが、 複数のものに対してその動作を行うには、どうすればよいかわからず困っています。 現在のソースは以下のようになっています。必要な部分だけ抜き出しています。 <script type="text/javascript"> function display() { var tmp = prompt("password?",""); //表示させるかどうか判別する if (tmp == 1) { document.getElementById("textboxのID").readOnly = false; } else if (tmp == 2) { document.getElementById("textboxのID").readOnly = true; } } </script> <body onload="display();"> ・・・・ </body> テキストが一つや二つ程度ならこれでも十分ですが、今回は テキストボックスが多数(100程度)あるので、このまま地道にやるのはどうかと思いました。 IDを数字にして、 for (var i = 0; i < 100; i++) { document.getElementById(i).readOnly = true; } とやってみましたが、これもdocument.getElementById("0") = true;単品では 成功しましたが、iが定義されていないというようなエラーメッセージが表示されて、 うまくいきませんでした。 以上の件を、ご教授お願いします。

  • javascript バーコード読み取りについて

    バーコードを読み込んだ際に、重量だけ表示させたいので自分で考えてソースコードを書きましたが、実行されません。 下記のコードの何処を直せばいいかわかりません。教えてください。 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var textbox = document.getElementById("barcode"); function extract() { var textbox2 = document.getElementById("toridasi"); if(textbox.value !== null) { if (textbox.value.length > 47) { var amount = textbox.value.substr(22,3); textbox2.value =amount/10; } } } textbox.onchange = extract(); </script> </head> <body> バーコード: <input type="text" id="barcode" size="64" value="1"> <input type="button" value="部分取り出し" onclick="extract()"> <input type="text" id="toridasi" size="10" value=""> </body> </html>

    • ベストアンサー
    • HTML
  • javascript getelementsbytagnameについてです。

    var keisan=document.getElementsByTagName('input'); for(i=0;i<=keisan.length;i++){ if(keisan[i].getAttribute('value').match('Click')){ keisan[i].onclick=add(); } } function add() { var a = document.getElementById('number1').value; var b = document.getElementById('number2').value; var c = a - -b; alert(c); } 上のプログラムを入れると、"keisan[i]はnullです"といったエラーがでます。 kaisan.length=0になっているみたいです…。 xhtmlだと作動するのですが、htmlだと作動しません。 対応してないのでしょうか? 宜しくお願いいたします。

  • getElementByIdでASP.NETのTextBoxを取得できない

    以下のようなJavaScriptのソースで、 TextBoxの値を取得しようとしています。 ------------------------------------------- 【ASP.NET】 <asp:TextBox ID="txtTemp_Jigyo" runat="server" ReadOnly="True">DataTemp</asp:TextBox> 【JavaScript】 var strData = document.getElementById("txtTemp"); alert(strData); var strDataValue = strData.value; alert(strDataValue ); ------------------------------------------- 実行すると4行目でエラーとなっているようで、 また、2行目のalertではobjectではなく、nullが返ってきています。 ほぼ、同環境の別PGでは正常に取得できているのですが、 なにかASP.NET or JavaScriptの記述に問題がある可能性はありませんか? よろしくおねがいします。

  • JavaScriptのプルダウン処理について

    最近JavaScriptを勉強し始め、うるう年に対応した日付プルダウン処理が可能、という事なので、ネットを参考に以下のようにしてみました。 //月によって日数を変更する処理 function setDay(year,month,day) { var y = parseInt(document.getElementById(year).value,10); var m = parseInt(document.getElementById(month).value,10); // 閏年判定 if (2 == m && (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0))) { //月の最終日の変数 var last = 29; } else { var lastday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); last = lastday[m-1]; } // 要素取得と初期化 var obj = document.getElementById(day); obj.length = 0; // 日の要素を追加 for (var i = 0; i < last; i++) { obj.options[obj.length++] = new Option(i + 1, i + 1); } } これでうるう年対応とする事は出来たのですが、恥ずかしい事にネットの情報なので、何をしているのかおぼろげにしか理解出来ません。大変申し訳ないのですが、このソースについて解説して頂けないでしょうか?どうぞよろしくお願い致します。

  • for in と 接続演算子について

    <!-- function check(){ var flag = 0; if(document.registform.user.value==""){ flag = 1; var error1 = document.getElementById("error1"); if(error1 == null){ var element1=document.createElement("div"); element1.innerHTML='<span class="error0" id="error1">ユーザー名を入力してください。</span>'; var ojbody1=document.getElementById("td_error1"); ojbody1.appendChild(element1); } } if(document.registform.pass.value==""){ flag = 1; var error2 = document.getElementById("error2"); if(error2 == null){ var element2=document.createElement("div"); element2.innerHTML='<span class="error0" id="error2">パスワードを入力してください。</span>'; var ojbody2=document.getElementById("td_error2"); ojbody2.appendChild(element2); } } if(document.registform.pass2.value==""){ flag = 1; var error3 = document.getElementById("error3"); if(error3 == null){ var element3=document.createElement("div"); element3.innerHTML='<span class="error0" id="error3">パスワード(確認)を入力してください。</span>'; var ojbody3=document.getElementById("td_error3"); ojbody3.appendChild(element3); } } if(flag == 0){ return true; }else{ return false; } } //--> javascript初心者です。 この処理をfor(key in array)を使って簡単にできるかも... と思ったんですが接続演算子の使い方がよくわかりません。 プログラム自体初心者独学で手探りでやっているため考え方が間違っている場合などありましたらアドバイス等もいただけたらうれしいです。 if(document.registform.user(☆).value==""){ flag = 1; var error1(☆) = document.getElementById("error1(☆)"); if(error1(☆) == null){ var element1(☆)=document.createElement("div"); element1(☆).innerHTML='<span class="error0" id="error1(☆)">ユーザー名(☆)を入力してください。</span>'; var ojbody1(☆)=document.getElementById("td_error1(☆)"); ojbody1.appendChild(element1(☆)); }} (☆)のところが接続演算子が使えればと思いました。 例えばvar element + key でelement1の変数というのは無理なのでしょうか? もし可能ならgetElementById("error + key ")はどういった書き方をすればよいでしょうか? よろしくお願いします。

  • javascriptバーコードについて

    <!DOCTYPE html> <html> <head> <title></title> </head> <body> バーコード: <input type="text" id="barcode" size="64" value="1234567890abcdefghijklmnopqrstuvwxyz"> </body> <script type="text/javascript"> var textbox = document.getElementById("barcode"); var amount = textbox.value.substr(22,3); textbox.value = amount; </script> </html> 上記のプログラムで何度やってもわからないので再度教えてください。※value="1234567890abcdefghijklmnopqrstuvwxyz valueの中の値は無いものとします。 バーコードリーダーでバーコードを読み込んだ時に、重量だけ表示させたいのですが、ボタンを押すと(textbox.value.substr(22,3))必要な値が表示されますが、ボタンを押さずに表示をさせたいです。 やはりjavascriptはダメでしょうか? 他の言語も考えていますが、VBも視野にいれてますがとりあえずjavascript、phpを使う予定です。 是非お願いいたします。

    • ベストアンサー
    • Ruby
  • javascriptでhiddenに二次元配列を格納したい

    現在、Webのシステムでクライアント側のJavaScriptから サーバー側のPHPに値を渡そうと思ってます。 その際に、JavaScriptの配列と連想配列を組み合わせた二次元配列に 値を格納してサーバー側に渡そうと思ってます。 それで以下のような方法を試しているのですが、 hiddenに二次元配列を格納する方法が分からず困ってます。 分かる方がいらしたら教えて頂けますでしょうか。 よろしくお願いいたします。 =========================================== var actionName = document.forms[0].action; var bodyObj = document.body; var formObj = document.createElement("FORM"); var hiddenObj = document.createElement("HIDDEN"); formObj.name = "updateTest"; formObj.action = actionName; formObj.method = "post"; hiddenObj.name = "alltest[][]"; var norArr = new Array(); var hashArr = new Array(); var i = 1; hashArr['test'] = document.getElementById("test" + i).value; norArr[i-1] = hashArr; hiddenObj.value = hashArr; formObj.appendChild(hiddenObj); bobyObj.appendChild(formObj); formObj.submit();

  • JavaScriptエラーについて

    お世話になります。 おわかりになる方、ぜひ教えてください。 タブメニューのボタンを押すと、内容が切り替わるというJavaScriptなのですが、いちよう正常に動作はしているようなのですが、エラーがでてしまいます。 エラーを無くしたいのですが、どうすればいのでしょうか? 【エラー内容】 'document.getElementById()'はNullまたはオブジェクトではありません。 【HTML】 <div id="javascript_tab_sample"> <ul> <li><a href="#W3C">W3C</a></li> <li><a href="#xhtml">xhtml</a></li> </ul> <dl id="w3c"> <p>内容1</p> </dl> <dl id="xhtml"> <p>内容2</p> </dl> </div> 【JavaScript】 window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('w3c'), document.getElementById('xhtml') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } よろしくお願いします。

  • javascriptによる動的なリンクの変更

    javascriptによって、ラジオボタンをチェックする度に(チェックを変える度に) 動的にリンクを変更したいのですが、上手くいきません。 すみませんが、どなたか教えていただけないでしょうか? ちなみに、下記は私が試したコードです。(全く動きませんが。) ラジオボタンのチェックを変えると、<a>タグのhrefの中身のURLが、そのボタンのvalueに対応して変わるようにしたいのですが。。 <FORM NAME="sample"> 選択して下さい -->  <input type="radio" name="list" OnChange="UpdateLink()" value="http://www.yahoo.co.jp" />s <input type="radio" name="list" OnChange="UpdateLink()" value="http://www.vector.co.jp/authors/VA011407/" />m <input type="radio" name="list" OnChange="UpdateLink()" value="mailto:akirayu@a2.mbn.or.jp" />l <A href="samplelink">リンク更新!!</A> </FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- var pos; for(var i=0; i < document.links.length; i++) { if (document.links[i].href.indexOf("samplelink") != -1) pos = i; } function UpdateLink() { checked = document.sample.list.checked Index; document.links[pos].href = document.sample.list[checked ].value; } //--> </SCRIPT>

専門家に質問してみよう