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 ")はどういった書き方をすればよいでしょうか？
よろしくお願いします。

回答No.2

yyr446 · ベストアンサー

formのtextタイプのinput要素のチェックなら
他にも elwement.getElementsByTagName() でNodeListを取得して使う方法
　例↓

　var IPT_NAME = ["user","pass","pass2","staff_name","staff_mail","shop_no","employment"];
　var ERROR_MSG = ["ユーザー名","パスワード","パスワード(確認)","姓名","メールアドレス","店名","雇用形態"];

　var targets = document.forms['registform'].getElementsByTagName("input");
　for(var i=0;i<targets.length;i++){
　　if(targets[i].type=="text" && targets[i].value==""){
　　　for(var j=0;j<IPT_NAME.length;j++){
　　　　if(IPT_NAME[j] == targets[i].name){
　　　　　flag = 1;
　　　　　ERROR[j] = document.getElementById("error"+j);
　　　　　略
　　　　}else{
　　　　　略
　　　　}
　　　}
　　}
　}

なんてのもある。

input要素の選択も、新しいブラウザーだと、Selectors Api(CSS セレクタを渡す）
を使った
　document.querySelectorAll(selectors)
　elwement.querySelectorAll(selectors)
もある。

　var targets = [];　//注意：取得されるのはStaticNodeListです。
targets = document.querySelectorAll('form input[type="text"]');
とか、
targets = document.querySelectorAll('form input[name="user"]');
なんてできる。

お礼

前回に引き続きいろいろな情報ありがとうございます！

回答No.3

fujillin

補足説明の方はよく見てませんが、指定した項目だけ未入力をチェックするってことだと解釈して・・・
・基本的な処理はご質問文でご提示の処理に準ずるようにしています。
・エラーメッセージの表示位置やidが個別に指定されていますが、その必要はないような
　気がしましたが、そこはそのまま。
・再チェックした場合に以前のメッセージが消されないと思いますが、消えるように変更。
・エラーメッセージはspanをdivでラップしていますが、外側のdivを省略しました。

var data = [
["user","error1","td_error1","ユーザー名"],
["pass","error2","td_error2","パスワード"],
["pass2","error3","td_error3","パスワード(確認)"]
];

function check() {
var i, mes, dat, flag = true;
var elms = document.forms["registform"].elements;

for (i=0; i<data.length; i++) {
mes = "", dat = data[i];
if (elms[dat[0]].value == "") {
flag = false;
mes = '<span class="error0" id="' + dat[1] + '">' + dat[3] + 'を入力してください。</span>';
}
document.getElementById(dat[2]).innerHTML = mes;
}
return flag;
}

お礼

返事が遅れてしまい申し訳ありませんでした。
ありがとうございます！
フォームの内容をとってこれるところがたいへん便利ですね！
当方初心者なので、一つ一つ動作確認していきます！
ありがとうございました！

回答No.1

yyr446

for(key in array)はarray:配列の各要素を処理するのには使わないほうがよい。
for(key in object)でobjectの各プロパティを処理するのに使うと覚えておく。
（javascriptでは配列とobjectを同じようにアクセスできるのでfor in でも処理
　出来るが、余計なものまで処理する場合がある）

document.registform.user.value　という、オブジェクトのプロパティを使った
アクセスは昔のjavascript1.0のやり方で、互換性をもたせるために現在でも使える
が今は
document.forms['registform'].elements['user'].value
(等価document.forms.namedItem('registform').elements.namedItem('user').value)

(等価document.forms[0].elements[0].value)
(等価document.forms.item(0).elements.item(0).value)

のようにHTMLColectionで取得し、HTMLColectionのlength属性を使って
forでループした方がよいと思う。

　for (var i=0,i<document.forms['registform'].elements.length;i++){
　　if(document.forms['registform'].elements[i].value === ""){
　　　var ojbody1=document.getElementById("error"+(i+1));
　　}
　}

お礼

HTMLColection初耳です。
ヴァージョンによって違いがあるんですね！
特に気にせず情報源はサイトだけでしたのでこれからは情報の新鮮度も気をつけたいと思います！
ありがとうございます。

補足

function check(){
var flag = 0;

var IPT_NAME = ["user","pass","pass2","staff_name","staff_mail","shop_no","employment"];
var ERROR_MSG = ["ユーザー名","パスワード","パスワード(確認)","姓名","メールアドレス","店名","雇用形態"];
var HIKAKU = ["","","","","","0","選択してください"];
//input未入力処理
for(i=0;i<=4;i++){
if(document.forms['registform'].elements[IPT_NAME[i]].value===""){
flag = 1;
var ERROR[i] = document.getElementById("error"+i);
if(ERROR[i] == null){
var CRT_ELMT[i]=document.createElement("div");
CRT_ELMT[i].innerHTML='<span class="errorx" id="'+ERROR_ID[i]+'"><img src="error_button.jpg" border="0" alt="error" />'+ERROR_MSG[i] + 'を入力してください。</span>';
var OJ_ID[i]=document.getElementById("td_error"+i);
OJ_ID[i].appendChild(CRT_ELMT[i]);
}
}
}
//select未選択処理
for(i=5;i<=6;i++){
if(document.forms['registform'].elements[IPT_NAME[i]].value!==HIKAKU[i]){
flag = 1;
ERROR[i] = document.getElementById("error"+i);
if(ERROR[i] == null){
CRT_ELMT[i]=document.createElement("div");
CRT_ELMT[i].innerHTML='<span class="errorx" id="'+ERROR_ID[i]+'"><img src="error_button.jpg" border="0" alt="error" />'+ERROR_MSG[i] + 'を選択してください。</span>';
OJ_ID[i]=document.getElementById("td_error"+i);
OJ_ID[i].appendChild(CRT_ELMT[i]);
}
}
}
//パスワードが一致してない場合の処理
if(document.forms['registform'].elements['pass'].value !== document.forms['registform'].elements['pass'].value){
flag = 1;
ERROR[7] = document.getElementById("error7");
if(ERROR[7] == null){
CRT_ELMT[7] = document.createElement("div");
if(CRT_ELMT[2] == null){
CRT_ELMT[7].innerHTML = '<span class="errorx" id="error7"><img src="error_button.jpg" border="0" alt="error" />パスワードが一致しません</span>';
}else{
CRT_ELMT[7].innerHTML = '<span class="errorx" id="error7"><パスワードが一致しません</span>';
}
OJ_ID[7]=document.getElementById("td_error7");
OJ_ID[7].appendChild(CRT_ELMT[7]);
}
}
}
書いてみたのでもしよければ評価をお願いします。