JavaScript初心者のためのフォームの数字判定プログラム

このQ&Aのポイント
  • JavaScriptの初心者の方に向けて、フォームの中の数字が奇数なら赤、偶数なら青となるプログラムの作り方について解説します。
  • 以下のコードを使用することで、入力された数字に応じてテキスト欄の色が変わるように設定することができます。
  • 初心者の方でもわかりやすく、JavaScriptを活用したフォームの操作方法を学ぶことができます。
回答を見る
  • ベストアンサー

javascriptの初心者です。

初歩的質問で失礼します。 javascriptでフォームの中にテキスト欄が3つあり、 テキスト欄3に入力された数字が奇数なら赤、偶数なら青となるプログラムにしたいと思い、 下記のようにしまいしたが、elseの青文字にしかならずに悩んでいます。 本当に初心者ですいません。が、アドバイス頂けたら宜しくお願いいたします。            function men(){ tate=document.form1.text1.value; yoko=document.form1.text2.value; document.form1.text3.value=tate*yoko/2; if ((men%2)==0){ document.form1.text3.style.color="red"; }else { document.form1.text3.style.color="blue"; } }

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

  • ベストアンサー
  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.2

menは関数名であって、「テキスト欄3に入力された数字」ではありません。 だからANo.1の回答にはちゃんと > 「テキスト欄3に入力された数字を2で割った余り」==1 と書いた。

sinmaijava
質問者

お礼

昨日は、迅速なご回答を頂きまして本当に有難うございました。 毎日すっきりしない一日を過ごしていましたが、 今日早速やってみました。 解決する事が出来ました。 私の解釈不足と、知識不足で恥ずかしい限りです。 本当にすっきりしました。 感謝いたします。 有難うございました。 では、失礼いたします。

その他の回答 (1)

  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.1

> if ((men%2)==0){ 「menを2で割った余り」==0じゃなくて「テキスト欄3に入力された数字を2で割った余り」==1にしないとだめじゃないの?

sinmaijava
質問者

お礼

早速の回答を有難うございます。 試してみましたが、==1でも偶数、奇数共、青文字になってしまいます。 menは関数の呼び出しでテキスト3をmenとしていますが、何が足りないのでしょうか?

関連するQ&A

  • javascriptでわからないことがあります。

    javascriptで判定ボタンを押したらぐ偶数、奇数の判定をするプログラムを作っているのですが数値以外が入力されたら2回目のelse ifで「数値を入力してください」と表示したいのですが調べてもよくわかりません。 また、判定ボタンを押したときにテキストボックスの中が空白であったり、数値以外が入力された場合に「数値を入力してください」と表示しますが続けて偶数、奇数の判定もしてしまうので困っています。 ソースコードです↓ function han2(){ var frm_txt1=document.F1.han1.value; var frm_txt2=parseInt(frm_txt1); if(frm_txt2=="") { alert("数値を入力してください"); } else if() { alert("数値を入力してください"); } if(frm_txt2%2==0) { alert(frm_txt2+"は偶数です"); } else { alert(frm_txt2+"は奇数です"); } } 文章が下手ですみませんがよろしくお願いします。

  • JavaScript 複数のIDがある時の処理

    時々お世話になっております。今回はJavaScriptを始めたばかりでどうにもイメージが湧かずに質問させて頂きます。以下のサイトでformのselectを選択したら情報が表示されるものを作りたいと思い、イメージに近いソースを拝見しました。 https://memorva.jp/memo/html/javascript_onchange_select_menu.php ーーーー以下HTMLーーーー <form action="#" method="post" name="form"> <select name="kaizoudo" id="kaizoudo"> <option value="manual">手入力(以下のテキストボックス)</option> <option value="8k">8K(7680×4320)</option> <option value="4k">4K(3840×2160)</option> <option value="fhd">FHD(1920×1080)</option> <option value="hd">HD(1280×720)</option> </select> <br /> 画面の横のピクセル数<br /> <input type="text" value="" name="yoko" id="yoko"><br /> 画面の縦のピクセル数<br /> <input type="text" value="" name="tate" id="tate"><br /> </form> ーーーー以下JavaScriptーーーー <script> document.getElementById("kaizoudo").onchange = function(){ var kaizoudo = document.getElementById("kaizoudo"); var dw = ''; var dh = ''; switch(kaizoudo.value){ case 'manual': dw = ''; dh = ''; break; case '8k': dw = 7680; dh = 4320; break; case '4k': dw = 3840; dh = 2160; break; case 'fhd': dw = 1920; dh = 1080; break; case 'hd': dw = 1280; dh = 720; break; } document.getElementById("yoko").value = dw; document.getElementById("tate").value = dh; }; </script> ーーーーここまでーーーー 問題はこれを複数のselectを選択できるようにしたいのですが、どのように設定すれば良いのかイメージが湧きません。。。 <イメージ> 商品1 選択肢 選択した情報(yoko) 選択した情報(tate) 商品2 選択肢 選択した情報(yoko) 選択した情報(tate) 商品3 選択肢 選択した情報(yoko) 選択した情報(tate) ・ ・ ・ 【送信】 ※選択肢は全て同じです 当然IDはユニークなためid="kaizoudo"を繰り返し使う訳にはいかないので、kaizodo1,kaizodo2のように固有のIDを作りselectを設置するようになると思いますが、JavaScriptをIDごとに書くには字数が多くなりますし、選択肢はこれよりもっと多くなることを想定しておりますので、できればWhileやforで反復処理できないかと考えております。 (PHPなら少々分かるのですが、JavaScriptはまだ勉強しておらず) 上記内容にてヒントを頂ける方がいらっしゃいましたら、よろしくお願い致します。

  • JavaScript 初心者です。

    急遽ホームページ作成をやることになり大変困っています。 何もかも初心者で全くわからない状態ですのでよろしくお願い致します。 お客様情報入力で送信ボタンで押すとメールで情報が届く様にしています。 送信ボタンを押したときに、入力チェックをかけているのですが、複数のテキストボックス(郵便番号を入力するテキストボックス)のチェック方法が分かりません。 郵便番号は、3桁-4桁で入力して頂く様にしています。 HTML(郵便番号のみです)・・・ <INPUT maxlength="3" size="3" type="text" name="iyubin" value="" style="ime-mode:disabled;" id="01">-<INPUT type="hidden" name="iyubin" value="-"><INPUT maxlength="4" size="4" type="text" name="zyubin" value="" style="ime-mode:disabled;" id="02"> JavaScriptでの入力チェック(省略をしていますが、正常に動作しているヵ所です)・・・ //お客様情報 function check(){ var flag = 0; // お名前 if ((flag==0) && (document.form.gName1.value == "")){ flag = 1; } if(flag){ window.alert('【お名前】を入力して下さい。'); // 入力されていない場合は警告ダイアログを表示 return false; // 送信を中止 } // ふりがな if ((flag==0) && (document.form.hName2.value == "")){ flag = 1; } if(flag){ window.alert('【ふりかな】を入力して下さい。'); // 入力されていない場合は警告ダイアログを表示 return false; // 送信を中止 } // 性別 if((flag==0) && (document.form.iSeibetsu.length)) { // 選択肢が複数ある場合 flag = 1; var i; for(i = 0; i < document.form.iSeibetsu.length; i ++){ if(document.form.iSeibetsu[i].checked){ flag = 0; break; } } } else{ // 選択肢が1つだけの場合 if((flag==0) && (!document.form.iSeibetsu.checked)){ flag = 1; } } if(flag){ window.alert('【性別】を選択して下さい。'); // 選択されていない場合は警告ダイアログを表示 return false; // 送信を中止 } //このヵ所に郵便番号の入力チェックを入れたいです。 すみませんが、よろしくお願い致します。

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示/非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

  • スタイルがうまく表示できません。

    スタイルがうまく表示できません。 関数を作って収入と支出の計算をしているのですが、残高が0より小さい時は赤字で表示。0以上の時は青字で表示しています。 以下がソースなのですが、数字を何度も変更して確認したのですが、うまくいく時と行かない時があります。(マイナスでも青字になったり、マイナスではないのに赤字になったりすることがあります。何度やってもうまく行く時もあります) <html lang="ja"> <head> <script type="text/javascript"> <!-- function zandaka(){ moneyin = document.form1.text1.value; moneyout = document.form1.text2.value; document.form1.text3.value=moneyin-moneyout; if(moneyout>moneyin){ document.form1.text3.style.color="red"; } else{ document.form1.text3.style.color="blue"; } } --> </script> <title>簡単計算機</title> </head> <body> <h1>簡単計算機</h1> <hr> <h2>収支計算</h2> <form name="form1"> <p>収入&nbsp;<input type="text" value="0" class="right" name="text1">円</p> <p>支出&nbsp;<input type="text" value="0" class="right" name="text2">円</p> <p>残高&nbsp;<input type="text" value="0" class="right" name="text3" onfocus="zandaka()">円</p> </form> </body> </html> うまくいかない時と行く時の区別がつかないため原因がわかりません。 初心者なのでつまらないミスだとは思うのですが、原因がわかればお願いします。

  • style.color の謎

    以下のスクリプトを書いたのですが、色の変更が最初の一度だけしかできません。 色を元に戻すために、どのような訂正をすれば良いのか教えて下さい。 <SCRIPT> function ChangeColor(sw) { if (sw = 1) { document.getElementById('inputBox').style.color = 'red'; } else if (sw = 0) { document.getElementById('inputBox').style.color = 'blue'; } } </SCRIPT> <FORM> <INPUT type="text" id="inputBox" > <INPUT type="button" value="Change my color " onClick="ChangeColor(1)"> <Button onClick="ChangeColor(0)" > Reset </Button> </FORM>

  • JavaScriptの配列

    お世話になります。初心者なのでどうすればいいか分かりません。 <? $form = @$_GET["form"]; $name = @$_GET["name"]; function write_color() { RGB = color(); END_OF_HTML; print "window.opener.document.".$form.".".$name.".style.backgroundColor = RGB;"; print "window.opener.document.".$form.".".$name.".value = RGB;"; print <<< END_OF_HTML window.close(); return true; } と現在このように書いているのですが… ここで$nameが配列であった場合、例えばn0[1]といった感じ であった場合どうしても上手くいきません。 単にn0であれば上手くいくのですが。 document.FA1.n0[1].value=RGBとしてみても駄目でした。 何方か教えて頂けませんでしょうか?

  • JavaScriptについて

    以下のコードなのですが document.getElementById('input').syoriEventListener の部分にエラーが出ます なぜでしょうか?? inputEventListener <body> <button id = "input">Click</button> <script> document.getElementById('input').inputEventListener('click', function(){ var txt = prompt("数字を入力"); if(txt == 0){ document.write("0以外でお願いします") }else if(txt % 2 == 0){ document.write("偶数です"); }else{ document.write("奇数です"); } }) </script>

  • Javascriptで文字の足し算?

    1というテキストボックスにblueという文字が入っていたとします。 その文字を引っ張って、2というテキストボックスに <font color=blue> と入れたいのです。 javascriptで document.フォーム名.テキストボックス2.value = '<FONT COLOR=>'; とすれば、「<FONT COLOR=>」とテキストボックス2に入りました。 document.フォーム名.テキストボックス2.value = '<FONT COLOR=' + document.フォーム名.テキストボックス1.value + '>'; とすると、 「<FONT COLOR=[object]>」となってしまいます。 どのようにしたらきちんと入るでしょうか?

  • テキストのデフォルト非表示に関して

    テキストのデフォルト非表示に関して 以下のように、プルダウンの選択によってテキストの表示、非表示をjavascriptを使って コントロールしようとしていまいすが、そもそもデフォルトでテキストを非表示にしたい場合は どのように記述すれば良いでしょうか。。。 初歩的な質問で申し訳ありません。 よろしくお願いします。 《内容》 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function ChangeSelection(form, selection) { if (selection.value=="休み") { document.getElementById("text_note").style.display = "block"; }else if (selection.value=="出張") { document.getElementById("text_note").style.display = "block"; }else { document.getElementById("text_note").style.display = "none"; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="fm_a" ACTION="koudou_update2.php" METHOD="POST"> <TD NOWRAP SIZE="30"><input name="text_note" style="width:100%" VALUE=$out_goto></input></TD> <TD><select name="am_note" ONCHANGE="ChangeSelection(this.form, this)" style="width:145px;"> <option value=""></option> <option value="自席" style="background-color:#FFFFFF; color:#3366FF" $sqlline1>自席</option> <option value="離席" style="background-color:#3366FF; color:#FFFFFF" $sqlline2>離席</option> <option value="帰宅" style="background-color:#FFFFFF; color:#3366FF" $sqlline3>帰宅</option> <option value="午前休暇" style="background-color:#3366FF; color:#FFFFFF" $sqlline4>午前休暇</option> <option value="午後休暇" style="background-color:#FFFFFF; color:#3366FF" $sqlline5>午後休暇</option> <option value="休み" style="background-color:#3366FF; color:#FFFFFF" $sqlline5>休み</option> <option value="出張" style="background-color:#3366FF; color:#FFFFFF" $sqlline13>出張</option> </select></TD> </FORM> </BODY>

専門家に質問してみよう