• ベストアンサー

innerhtmlで出た値から、ifで返り値を出す

innerhtmlで出た値から、要素を判断し、if文で返り値を求めることは可能でしょうか。 具体的にはinnerhtmlで、2未満の数値が出た場合、 りんごを、4未満であればみかんと返すようにいたしたいです。 なお、回答が長くなることから、script文のみの記述でOKですが、 script文は省略なさらないでください。 <!--適当--> <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { judge(); } function selectboxChange111() { judge(); } function judge() { /* この場合は、varではなくletを使う。*/ let val101 = document.forms.form101.Select101.value; let val111 = document.forms.form111.Select111.value; /* そもそも両方が当てたら、メッセージを出すのなら、outputは1つでいいのでは？ */ let target = document.getElementById("output201"); let target2 = document.getElementById("output202"); if ((val101 == "要素101")&&(val111 == "要素111")) { target.innerText = "合っています。"; target2.innerText = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output201"></div> <div id="output202"></div> <div id="output203"></div> <div id="output204"></div> <div id="output205"></div> </body> </body> </html>

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

  • ベストアンサー
回答No.1

要件定義が間違っており、回答が存在しません。 >具体的にはinnerhtmlで、2未満の数値が出た場合、 >りんごを、4未満であればみかんと返すようにいたしたいです。 まず、innerへの代入は、スクリプト自体が行っており、 数値は持っていません。また、HTMLにも値がありません。 また、「りんご」になることはありえないので、 回答は存在せず、絶対に動作しません。 >innerhtmlで出た値から、要素を判断し、if文で返り値を求めることは可能でしょうか。 これは無意味です。 innerへの代入は、スクリプトが行っているので、 代入の時に判定を行えば、innerからの判定は必要ないです。 スクリプトという話でしたが、 逆にHTML側のoptionの問題です。 option valueをセットしましょう。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/select また、 <option value101 == "要素101">要素101</option> このようなタグはありません。 以上の事から今回の問題はスクリプトではなく、 HTMLコードの問題が多いという事と、 要定が問題があるので、回答が存在しない。 という事が回答になります。 （それと、このコードは私が書いたものですから、 　私が一番わかっていると判断しての回答です） 　一部追加されているそこに関しては関与しない。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • プルダウンのメニューを表示を2つ設定。

    プルダウンのメニューを表示を2つ設定したいのですが、 どこが間違っているのでしょうか。 基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。 間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>

  • jsでプルダウンで選択したものがうまく表示されない

    以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。 これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。 どうしたら改善されますか。

  • プルダウンを2個選び、その結果に基づき、値を返す。

    プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。

  • 質問Aと質問Bを選択して、メッセージを出したい。

    質問Aと質問Bを選択して、メッセージを出すプログラムを作っています。 ところが、functionについて、引数の場合は2つ同時に使用できますけれども、関数はできないのがネックです。 なぜそれが必要かというと、 funcの中にifが入っており、そこで、メッセージの挙動の操作をしているためです。 もし、関数を2つ同時に使うとしたらどのようにしたらいいですか。 以下はそのjavascript文です。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { var val101 = document.forms.form101.Select101.value; var target = document.getElementById("output101"); if (val101 == "要素101") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output101"></div> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output111"></div> </body> </body> </html>

  • 2個選択することで初めて表示というのができない

    <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (value == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // function selectboxChange11() { var value = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (value == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> ↑はjsの分ですが、 2個選んだら初めてイベントが発生するプログラムを作成しているのですが、 いかんせんうまくいきません。 恐らく、var value = document.forms.form1.Select1.value;のところで、躓いているのだと思います。 document.formsにカンマをつけてみたり、さらに、両端に[]をつけてみたり、いろいろ試しましたが、うまくいきません。 それとも、重ねること自体ができないのでしょうか。 どうしたらいいのでしょうか。

  • innerHTMLを使い、書き換えたい

    はじめまして。innerHTMLで文章を書き換えたいと思っています。 ■■■■■■■■■■■■ <div id='testid'>元の文章</div> <SCRIPT Laguage="JavaScript"><!-- document.getElementById('testid').innerHTML 　= "この文章に書き換える"; --></SCRIPT> ■■■■■■■■■■■■ とするとうまく<div>内の文章が書き換わるのですが、 以下のようにjavascriptの記述を先に持ってくるとうまくいきません。 ■■■■■■■■■■■■ <SCRIPT Laguage="JavaScript"><!-- document.getElementById('testid').innerHTML 　= "この文章に書き換える"; --></SCRIPT> <div id='testid'>元の文章</div> ■■■■■■■■■■■■ 検索して調べたところ、 「関数化させて id を指定したタグが表示されてから命令を実行させる」 必要があるとのことなのですが、書き方がわからずにいる次第です。 どなたかご教示いただければ幸いです。

  • innerHTMLを使ってID要素の内容を変えたい

    innerHTMLを使ってID要素の内容を変えたいのですが、 下記のような使い方はできないのでしょうか？ var changeTEXT = document.all("hoge2").innerHTML; できない場合、これに変わるようなものがありましたら教えていただけたら、うれしいです。 よろしくお願いします。 <html> <head> <script language="JavaScript" type="text/javascript"> <!-- var changeTEXT = document.all("hoge2").innerHTML; 　　　　　　　 function change1_ID(){ if(document.all){ document.all("hoge1").innerHTML = changeTEXT } if(document.getElementById){ document.getElemntById("hoge1").innerHTML = text1 } } //--> </script> <style type="text/css"> <!-- #hoge1 { margin: 0px; padding: 0px; height: 600px; width: 600px; } #hoge2 { margin: 0px; padding: 0px; height: 600px; width: 600px; } --> </style> </head> <body> <div id="hoge1" onclick="change_ID()"> ここの内容を変えたい</div> <div id="hoge2"> ここに入力されたHTMLの内容をhoge1の内容にしたい</div> </body> </html>

  • innerHTMLに重なるselectボックス

    小さな画面を出しているのですが、開いた画面がselectボックスに重なると、selectボックスが前面になってしまいます。 これはどうにかならないでしょうか？ 以下サンプルスクリプト <html> <head> <title>テスト</title> </head> <body> <script language="JavaScript"><!-- b_color="red"; //枠の色 g_color="#ffffff"; //背景の色 f_size="10"; //文字サイズ f_color="#000000"; //文字色 set_x=-20; //オフセットX set_y=-5; //オフセットY //-------------------------------------- document.write("<div ID='tiptext'STYLE='position:absolute;z-index:2;border:1px solid;padding:5px;"); document.write("border-color:"+b_color+";font-size:"+f_size+"pt;background-color:"+g_color+";"); document.write("color:"+f_color+";"); document.write("display:none'>"); document.write("</div>"); function openw(t1){ divid="tiptext"; if(document.all){ d_div=document.all(divid); rx = event.clientX + document.body.scrollLeft +set_x; ry = event.clientY + document.body.scrollTop +set_y; }else{ d_div=document.getElementById(divid); rx = NNX + set_x; ry = NNY + set_y; } if (t1) { d_div.style.display="block"; d_div.style.left = rx +"px"; d_div.style.top = ry +"px"; d_div.innerHTML = "<p>画面表示</p>"; d_div.innerHTML += "<span style=\"cursor:hand;color:#0000ff;text-decoration: underline;\" onclick=\"openw('')\">閉じる</span><br>"; d_div.innerHTML += '<br>'; d_div.innerHTML += 'a<br>'; d_div.innerHTML += 'i<br>'; d_div.innerHTML += 'u<br>'; d_div.innerHTML += 'e<br>'; d_div.innerHTML += 'o<br>'; d_div.innerHTML += '<br>'; //d_div.innerHTML = d_div.innerHTML +'<a href="#" onclick="openkeyboard(\'\')">閉じる</a><br>'; d_div.innerHTML += "<span style=\"cursor:hand;color:#0000ff;text-decoration: underline;\" onclick=\"openw('')\">閉じる</span><br>"; }else{ d_div.style.display="none"; d_div.innerHTML = ""; } } function MouseXY(NNevent){ NNX = NNevent.pageX; NNY = NNevent.pageY; } window.onmousemove = MouseXY; /* himajin.moo.jp */ // --> </script> <a href="#" onclick="openw('1')">子画面表示</a><br> あ<br> い<br> う<br> え<br> お<br> <a href="#" onclick="openw('1')">子画面表示</a><br> <form> <input type="text"><br> <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><br> <select name="zz"> <option value="0">00000000000000</option> <option value="1">11111111111111</option> <option value="2">22222222222222</option> <option value="3">33333333333333</option> </select> </form> <a href="#" onclick="openw('1')">子画面表示</a><br> </body> </html>

  • Mac版ＩＥ５でのinnerHTMLの動作について

    プルダウンメニュー（セレクトボックス）を２つ表示し、一つ目のメニューが選ばれると、それによって二つ目のメニューを変化させようとしています。WINDOWSのIEでは問題なく動作するのですが、MacのIE5では正しく動作しません。 フォームの画面では一つ目のメニューを選んだ時に二つ目のメニューの選択項目が変化し問題ないのですが、sendボタンを押したときにＣＧＩに二つ目のメニューの内容が伝わりません。MacのIE5ではinnerHTMLを使うと正しく動作しないのでしょうか。 ----------------フォーム------------------ <HTML> <HEAD> <SCRIPT language=javascript> <!-- var s0=""; s0 += '<option value="option0-1">option0-1</option>' s0 += '<option value="option0-2">option0-2</option>' var s1=""; s1 += '<option value="option1-1">option1-1</option>' s1 += '<option value="option1-2">option1-2</option>' function change() { switch (Number(document.form1.select1.selectedIndex)) { case 0: document.all.obj1.innerHTML = '<select name="select2">' + s0 + '</select>'; break; case 1: document.all.obj1.innerHTML = '<select name="select2">' + s1 + '</select>'; break; } } //--> </SCRIPT> </HEAD> <BODY> <FORM name=form1 action=test-cgi.cgi method=get encType=multipart/form-data> <SELECT onchange=change(); name=select1> <OPTION value="option0">option0</OPTION> <OPTION value="option1">option1</OPTION> </SELECT> <BR> <SPAN id=obj1> <SELECT name=select2></SELECT> </SPAN> <INPUT type="submit" value="send"> </FORM> </BODY> </HTML>

  • innerHTMLの初期値

    下記のソースがあります。 <SCRIPT TYPE="text/javascript"> <!-- function Change(id){ if(document.all){ document.all.result.innerHTML = document.all(id).innerHTML; }else if(document.getElementById){ document.getElementById('result').innerHTML = document.getElementById(id).innerHTML; } } //--> </SCRIPT> <a href="#" onClick='Change("ih2"); return false'>前</a><br> <a href="#" onClick='Change("ih3"); return false'>次</a><br> <div id="ih2" style="display:none">テキスト1</div> <div id="ih3" style="display:none">テキスト2</div> <br> <span id="result"></span> 前、次のリンクで表示されるテキストが切り替わるようにしているのですが、 クリックする前の段階では何も表示されていない状態です。 そこで、クリックする前でもid="ih2"の「テキスト1」が表示されている状態にしたいのですが、 なかなか出来ません。 functionの前に document.all.result.innerHTML = document.all.ih2.innerHTML; と記述してみましたが駄目でした。 id="ih2"の値を読み込んで表示させたいのですが、 何か良い方法はありませんか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する