質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2628閲覧

JavaScript アラート表示の動作エラー

a-_.

総合スコア133

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/08/31 05:21

編集2016/09/06 02:36

・ラジオボタン「投稿」がチェックされている状態の場合はチェックボックス非表示
・ラジオボタン「更新」「削除」がチェックされた場合のみチェックボックス表示
・チェックボックス未チェックのままsubmitボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止
という条件をJavaScriptのみで処理したいんですが、ブラウザ表示してラジオボタンのps・up・deを選択し、psとupだったら条件以外の場合ERROR1~4を表示、upとdeを選択中chkid[](チェックボックス)をチェックしなかったらERROR5を表示という動作を追加したいんです
今のコードだと一応動作は出来るけど、チェックボックスにチェックをいれてもERROR5が表示されないため今ここで何が処理されてるのか確認したいんです
あと解読しきれていないconsole.logのコードがあるんですが、私の解釈としては
console.log(cde[bde]);
console.log(bde);
cde[bde].disabled = false;
return false;
・cde(=obj)はbdeの数だけ出力
・bdeをループ出力
・cde[bde]が選択できなかったらfalse
・submit処理を止めるためfalseとして返す
という解釈をしてるんですが、その考え方は合ってるんでしょうか

HTML

1<html> 2 <head> 3 <meta charset="utf-8"> 4 <script> 5 function condition() { 6 var ps = document.getElementById("r1"); 7 var up = document.getElementById("r2"); 8 var de = document.getElementById("r3"); 9 if (ps.checked == true || up.checked == true) { 10 if (document.getElementById('name').value.length >= 10) { 11 window.alert("ERROR1"); 12 return false; 13 } else if (document.getElementById('name').value.length == "") { 14 window.alert("ERROR2"); 15 return false; 16 } else if (document.getElementById('comment').value.length >= 300) { 17 window.alert("ERROR3"); 18 return false; 19 } else if (document.getElementById('comment').value.length == "") { 20 window.alert("ERROR4"); 21 return false; 22 } 23 } 24 if (up.checked == true || de.checked == true) { 25 cde = document.getElementsByName('chkid[]'); 26 for(var bde = 0; bde < cde.length; bde++) { 27 console.log(cde[bde]); 28 console.log(bde); 29 cde[bde].disabled = false; 30 return false; 31 } 32 if (bde == 0) { 33 window.alert ("ERROR5"); 34 } 35 } 36 } 37 function change(obj) { 38 console.log(obj.id); 39 if (obj.id == "r1") { 40 document.getElementById("send").value = "投稿"; 41 chkchange(true); 42 } else if (obj.id == "r2") { 43 document.getElementById("send").value = "更新"; 44 chkchange(false); 45 } else if (obj.id == "r3") { 46 document.getElementById("send").value = "削除"; 47 chkchange(false); 48 } 49 } 50 function chkchange(bool) { 51 chk = document.getElementsByName('chkid[]'); 52 for(var box = 0; box < chk.length; box++) { 53 console.log(chk[box]); 54 console.log(box); 55 chk[box].disabled = bool; 56 } 57 } 58 </script> 59 </head> 60 <body> 61 <form method="post" action="" onsubmit="return condition()"> 62 <table> 63 <tr> 64 <td> 65 名前:<input type="text" name="name" id="name"> 66 内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea> 67 <input type="radio" name="bbs" id="r1" value="post" onChange="change(this)">投稿 68 <input type="radio" name="bbs" id="r2" value="update" onChange="change(this)">更新 69 <input type="radio" name="bbs" id="r3" value="delete" onChange="change(this)">削除 70 <input type="submit" value="投稿" id="send"> 71 </td> 72 </tr> 73 </table> 74 75<?php 76 while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { 77?> 78 79 <table> 80 <input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>"> 81 <tr> 82 <td>名前: 83 <?php echo $row['name'] ?> 84 </td> 85 </tr> 86 <tr> 87 <td>内容: 88 <?php echo $row['comment'] ?> 89 </td> 90 </tr> 91 </table> 92 93<?php 94 } 95 mysqli_free_result($result); 96 97 mysqli_close($link); 98?> 99 100 </form> 101 </body> 102</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

bdeはループの変数なので、0にならないですよね。
なので
if (bde == 0)
の部分はかならずfalseになりますね。だからError5は表示されません。

ループ文の中でチェックボックスのチェックOn/Offをif文でしらべて、
全部OffならError5を表示、
もしくは、1個でもOnならError5を表示せずにスルー。
といった処理を書けばOKだとおもいます。

投稿2016/08/31 05:32

jm1156

総合スコア866

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

a-_.

2016/08/31 06:50

ご回答ありがとうございます 下記コードに訂正してみました if文でcdeが0であればアラート表示という条件式を書いたつもりなんですが、ERROR5は依然として表示されません 0であればfalseと書いたはずなに何故そうなってしまうのでしょうか if (up.checked == true || de.checked == true) { cde = document.getElementsByName('chkid[]'); for(var bde = 0; bde < cde.length; bde++) { console.log(cde[bde]); console.log(bde); cde[bde].disabled = false; return false; } if (cde.value.length == 0) { window.alert ("ERROR5"); return false; } }
jm1156

2016/08/31 07:00

cde.value.lengthなんてプロパティないですよ。 JavaScriptのエラーになりませんか? cdeはチェックボックスの配列なのですから、 その配列の中でチェックのOn/Offをみて、 全部OffならError5を表示というふうに書きましょう。
attercop

2016/08/31 07:04

そもそも、cdeには何が入っていると考えているんですか? また、「cdeが0であればアラート表示」とありますが、どこでcdeに0が設定されると考えていますか?
a-_.

2016/08/31 07:29

cdeにイコールを付けているのでそれ自体がgetelementsを含めたchkid[]であるという事ではないんですか?
jm1156

2016/08/31 07:48

cde はchkid[]でOKです。 チェックボックスの配列がはいっています。 なので、そのチェックボックスのOn\Offを見て、 全部OffならError5を表示と書けばOKです。 そもそも、 cde.value.length==0 っておかしいです。 配列のvalueはエラーになりますし、 lengthプロパティは文字の長さです。
attercop

2016/08/31 08:37 編集

「getelementsを含めたchkid[]」ここがちょっと気になりした。 document.getElementsByNameは関数なので、cmdにはdocument.getElementsByNameの実行結果が入ります。 document.getElementsByNameについては以下を参照してください。 https://syncer.jp/javascript-reference/document-getelementsbyname
a-_.
jm1156

2016/09/01 02:11

ラジオボタンのtrueじゃなくて、チェックボックスのtrueをみるんじゃないんですか? チェックボックスがoffならエラーというif文を書けばOKです。 forループの中で、チェックボックスがoffかどうか処理を入れて、 全部offならError5を表示とかけばOKです。
a-_.

2016/09/01 06:30

教えていただいたサイトと他に参考にしていたhttp://www.pori2.net/js/form/2.htmlのコードを元に再訂正してみました 気になったんですが、2つ目のサイトのコードに書かれているvalueは例文に動物名が各valueが定義され、そのvalueを変数に代入してアラート表示となっていますが、strの数によってアラート表示となるのであれば、私の場合だとそのvalueの箇所を書き換えてchkid[]にすることで、if文で数がない場合アラート表示になるのではと考えたんですが、この解釈だとどうでしょうか if (up.checked == true || de.checked == true) { cde = document.getElementsByName('chkid[]'); var str = ""; for(var bde = 0; bde < cde.length; bde++) { if (document.FM.elements[chkid[]][bde].checked) { str = str + document.FM.elements[chkid[]][bde].value; } } if (str == "") { window.alert("ERROR5"); return false; } }
jm1156

2016/09/01 07:11

document.FM.elementsは参考HPのコードなので違いますよ。 そのままもってくればいいってもんじゃないです。 っていうか、cdeをループしているのになぜそうなるw 全部offならError5としたいなら、 逆に1つでもONならreturnすればいいとおもいます。 for文の中に、cdeのcheckedがtrueならreturnして、 forのあとにwindow.alert("ERROR5")を書けばいいかと。 っていうか、本当にJavaScript基礎から学んだほうがいいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問