javascriptでコメントアウトができない理由と解決方法
- JavaScriptでコメントアウトができない理由とは、コメントアウトの開始と終了を示す「/*」と「*/」が非表示にならず、表示されてしまうためです。
- コメントアウトの枠も表示されてしまう問題を解決する方法として、コメントアウトの代わりに、HTMLの特殊な文字である「><」や「<!-- -->」を使用する方法があります。
- これらの特殊な文字を使用することで、コメントアウトの開始と終了を示す枠やコメント自体が表示されずに非表示にすることができます。
- ベストアンサー
javascriptでコメントアウトができません
下記の様に 「/* ・・・・・ */」でコメントアウトしていますが、「/*」 「*/」も文字としてそのまま画面に表示され、非表示にしたいSELECTの枠も表示されてしまいます。 ご助言いただきたく宜しくお願い致します。 <body style="margin:0px; padding:0px;" onload="load()"> /* <body style="margin:0px; padding:0px;" onload="load()"> <FORM NAME=formMain > <SELECT id="categorySelect" NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(カテゴリーを選択してください) <OPTION VALUE="0">食事 <OPTION VALUE="1">病院 <OPTION VALUE="2">小売店 <OPTION VALUE="3">洋服 </SELECT> <SELECT id="subcategorySelect" NAME="city"> <OPTION VALUE="" SELECTED>(サブカテゴリーを選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> </FORM> */ <div> <input type="text" id="addressInput" size="40"/> <select id="radiusSelect"> <option value="0.5" selected>0.5km</option> <option value="1">1km</option> <option value="20">20km</option> </select> <input type="button" onclick="searchLocations()" value="検索へGO!"/> </div> <div><select id="locationSelect" style="width:25%;visibility:hidden"></select></div> <div id="map" style="width: 100%; height: 80%"></div> </body> </html>
- wai8605
- お礼率51% (20/39)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
.＞javascriptでコメントアウトができません どっからどう見ても、HTMLにしか見えませんが・・・ <!-- <body style="margin:0px; padding:0px;" onload="load()"> ・ ・ ・ ・ </FORM> --> とするか、 <!-- body style="margin:0px; padding:0px;" onload="load()"> ・ ・ ・ ・ </FORM --> とするか。
その他の回答 (1)
- notnot
- ベストアンサー率47% (4847/10260)
＞javascriptでコメントアウトができません 見るからに、JavaScriptじゃなくてHTMLのように見えますが。 HTMLでコメントにしたいのなら、<!-- と --> で囲みます。
お礼
ありがとうございます。 あせっていて、JavaScript・HTMLを間違えていました。 お恥ずかしいしだいです。 このたびはありがとうございました。
関連するQ&A
- css フォームのプルボタンを使う場合
cssでselect（プルダウンメニュー）を定義すると、 その後のフォーム（例えばテキストフィールド）のレイアウトが崩れます。 お詳しい方、ご教授いただければ幸いです。 ======================================= html側の記述です ======================================= <form accept-charset="UTF-8" action="/mmm" > <div style="margin:0;padding:0;display:inline"></div> <div class="field"> <label for="vvv">氏名</label> <input id="vvv_name" name="vvv[name]" size="30" type="text"> </div> <div class="field"> <label for="xxx">好きな果物</label> <select id="xxx" name="site[ftp_id]"><option selected="selected" value=""></option> <option value="1">りんご</option> <option value="2">さくらんぼ</option></select> </div> <div class="field"> <!--＃ここのレイアウトが崩れます--> <label for="yyy">好きな動物</label> <input id="yyy" name="yyy[yyy]" size="30" type="text"> </div> </form> ======================================= cssの記述です ======================================= * { margin: 0; padding: 0; } .field { width:500px;} .field label { width:230px; float:left; color:#FFFFFF; background-color:#001207; display:block; height: 2em; line-height :2em; margin-top:10px; } .field input { width:200px; float:left; color:#FFFFFF; margin-top:10px; height: 2em; } .field select { width:200px; float:left; color:#FFFFFF; margin-top:10px; height: 2em; } どうぞよろしくお願い致します。
- 締切済み
- CSS
- javascriptで可能ですか？
javascript初心者です。 以下の様なものは実装可能でしょうか？ セレクトメニューで選択→inputボタンクリック→3つのレイヤーを1枚ずつチェンジ。みないな感じです。 「表示切り替え」ボタンをいれたいのですが、そこがよくわかりません。。。 お分かりになる方がいらしたら 教えていただけると助かります！ 一応htmlはこんな感じで・・・ <html> <body> <form action="" method="get"> <select name="test"> <option value="1">AAAAAAAA</option> <option value="2">BBBBBBBBB</option> <option value="3">CCCCCCCC</option> </select><br> <input name="" type="button" value="表示切り替え"> </form> <div id="a" style="background-color:#FF0000">AAAAAAAAAAAAA</div> <div id="b" style="background-color:#0000FF">BBBBBBBBBBBBB</div> <div id="c" style="background-color:#00FF00">CCCCCCCCCCCCCC</div> </body> </html>
- 締切済み
- JavaScript
- javascriptでセレクトボックスを動的に
javascriptでセレクトボックスの"selected"を動的に変更する方法を教えてください＞＜ 下記のselectedを"１０"から"５０"に変更したいのですが、 某ASPサービスの環境下での作業のため制約があり直接変更できません。 <body onload="event"> <select name="select"> <option value="10" selected="selected">10件</option> <option value="30">30件</option> <option value="50">50件</option> </select> そこで、JavaScriptで何とかしようと思うのですが、 <select>～ </select>の間（selectタグ含む）は、ASPサービスの制約でIDやclassを入れることもできず、 変更できるのは、body開始タグ部分、headerタグ内、body内（一部）です。 ページを読み込んだ際に、「５０件を選択」、「１０件からselected外す」状態にしたいです。 いろいろサイトを見てなんとなくできそうな気はするのですが、 スキル的に初心者レベルのため、わかりませんでした。 何卒よろしくお願いします！
- ベストアンサー
- JavaScript
- javascript cssの値を取得、変更
タイトルの通りですが、javascriptにてcssの値を取得することはできますでしょうか？ 考えている機能は、URLを指定するtextboxがあり、そこに入力したURLのボックスを解釈し、分解してmarginやpadding、border、width、height、合計縦幅、合計横幅…といった情報を出してくれる。その際できればcssで指定のないものも表示したい。いらない要素は破棄。 例： <html><style type="text/css"> #wrap{ width:250px; height:300px; margin:5px 10px; padding:10px 5px; } #hoge{ width:250px; height:50px; border:5px solid; } #moge{ width:100px; height:150px; margin:5px 10px; padding:10px 5px; } </style> <body> <div id="wrap"> <div id="hoge"> <ul> <li>aaa</li><li>bbb</li> </ul> </div> <div id="moge"> <img src="dammy1.gif" /> <img src="dammy2.gif" /> </div></div> </body></html> 適当ですけど、こんな感じだったら、 <html><style type="text/css"> #wrap{ background:#333; width:250px; height:300px; } #hoge{ background:#666; width:250px; height:50px;} #moge{ background:#999; width:100px; height:150px; } </style> <body> id名<br /> #wrap<br /> #hoge<br /> #moge<br /> … <div id="wrap"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="hoge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="moge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> </body></html> こんな感じにしてhtmlを吐き出す。 そんなことは可能でしょうか？少し大変になっても可能なら頑張って作ろうと思っています。よろしければ教えていただけないでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
- これってJavaScriptですか？？
以下のソースはJavaScriptになりますか？ HPを（初心者ながら）作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？ <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ１ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ２ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ３ </div></td><td style="width:100%;border-bottom:1px solid #000"> </td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ１の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ１の文章 </div><div style="display:none" id="NAME22"> ここにタブ２の文章 </div><div style="display:none" id="NAME33"> ここにタブ３の文章 </div>
- ベストアンサー
- JavaScript
- Javascriptで質問です２
セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを２段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
- DOCTYPE宣言とjavascript
United Statesを選んだ場合、州を選択。 それ以外の国の場合はtextフィールドで県なりを直接書き込む と言うようにしたく、下記の様にページを作成したのですが、 IE、Opera、Safariなど他では全て動作したのですが、 Firefoxのみ動作しませんでした。 但し、DOCTYPE宣言の"http://www.w3.org/TR/html4/loose.dtd" を削除したらFirefoxでも動作しました。 ただ、ここを削除すると全体的にデザインがズレてしまいます。 Firefoxでも動くようにjavascriptの部分を変更すると言う事で解決したいのですが、 良い書き方が解りません。どなたかご教授願えますでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <script type="text/javascript"> function changeField(){ index= test_form.country.value; if (index != "UnitedStates"){ document.getElementById("select1").style.display="inline"; document.getElementById("select1").disabled=false; document.getElementById("select2").style.display="none"; document.getElementById("select2").disabled=true; } else { document.getElementById("select1").style.display="none"; document.getElementById("select1").disabled=true; document.getElementById("select2").style.display="inline"; document.getElementById("select2").disabled=false; } } </script> <form name="test_form"> <select name="country" onChange="changeField()"> <option value="Japan" selected="selected">Japan</option> <option value="UnitedStates">United States</option> </select> <input id="select1" name="state" type="text" size="20" /> <select id="select2" name="state" style="display:none" disabled> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> </select> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
- セレクト文
下記のセレクト文に配列をセットしたいのですが、”onchange”を使った２段階？にするとエラーになってしまいます。 <html> <head> <body> <?php $selected[] = array(); unset($selected); $selected[$***[ "t" ][ "VALUE" = "SELECTED"; print("<select name=\"t\" onchange="if(t.value==1){s1.style.display='inline';s2.style.display='none'; }else{s1.style.display='none';s2.style.display='inline';}">") print("<option selected> print("<option value=1>1 print("<option value=2>2 print("<</select> $selected[] = array(); unset($selected); $selected[$***[ "s1" ][ "VALUE" ]] = "SELECTED"; print("<select name=\"s1\" style=display:none>") print("<option value=a>a") print("<option value=aa>aa") print("</select>") $selected[] = array(); unset($selected); $selected[$***[ "s2" ][ "VALUE" ]] = "SELECTED"; <select name=\"s2\" style=display:none>") <option value=b>b") <option value=bb>bb") print("</select>") ?> </body> </head> </html> よろしくお願いします。
- 締切済み
- PHP
- javascriptでオブジェクトの重なりを判定
お世話になります。 javascriptを使用して、<div>で作られた複数のオブジェクトが重なったかどうかを判定したいのです。 果たして、そんなことは可能なのでしょうか。 <body> <div id="block1" style="background:#F00; width:200px; height:200px; marglin-left:200px;" onclick="javascript=aaa();"></div> <div id="block2" style="background:#0F0; width:200px; height:200px; margin-left:200px;"></div> <div id="block3" style="background:#0F0; width:200px; height:200px; margin-left:600px;"></div> <div id="block4" style="background:#0F0; width:200px; height:200px; margin-left:800px;"></div> <div id="block5" style="background:#0F0; width:200px; height:200px; margin-left:1200px;"></div> <div id="block6" style="background:#0F0; width:200px; height:200px; margin-left:2000px;"></div> </body> <script> fucntion aaa(){ var bbb = document.getElementById("block1"); var move= parseFloat(bbb.style.left); bbb.style.left = (move+10)+"px"; } </script> というのがあったとして、block1がblock2、block3・・・・のいずれかと重なった瞬間にalertか何かで「重なりました！」という感じで表示することはできないのでしょうか。javascript オブジェクト 重なり とかで検索しても、目的のものが出てこなかったので… どうぞ、よろしくお願い致します。
- ベストアンサー
- JavaScript
- javascript 問題と答え
独学でjsをやっているのですが、わからないところがあるので質問させてください。 ラジオボタンを選択し、解答ボタンクリックで、オレンジの欄に解答が出るようなプログラムを書いたのですが、実行されません。どこが間違っているのでしょうか。 /* ---------------- ▽▽▽ここから▽▽▽ -------------------------- */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js問題</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0; } img{ border:0; } h1 { font-size:22px; } h2 { font-size: 12px; } #box { width: 500px; overflow:hidden; /*子要素にfloatがあり、高さ算出のため使用*/ } div.box { width: 150px; float: left; background-color: #CCC; margin-left: 10px; } li { list-style:none; } div#ans { width: 500px; height: 20px; clear:both; margin-top: 20px; margin-bottom: 30px; } div#ans p { width: 150px; background-color: #FC6; margin-left:10px ; float:left; } div#ans_btn { width: 200px; clear:both; margin-left:200px; } </style> </head> <body> <h1>Q.問題</h1> <br /> <div id="box"> <div class="box"> <ul> <h2>問題その１</h2> <li><input type="radio" name="q0" value="1">あいうえお</li> <li><input type="radio" name="q0" value="2">正解</li> <li><input type="radio" name="q0" value="3">あいうえお</li> <li><input type="radio" name="q0" value="4">あいうえお</li> </ul> </div> <div class="box"> <ul> <h2>問題その2</h2> <li><input type="radio" name="q1" value="1">あいうえお</li> <li><input type="radio" name="q1" value="2">あいうえお</li> <li><input type="radio" name="q1" value="3">正解</li> <li><input type="radio" name="q1" value="4">あいうえお</li> </ul> </div> <div class="box"> <ul> <h2>問題その3</h2> <li><input type="radio" name="q2" value="1">正解</li> <li><input type="radio" name="q2" value="2">あいうえお</li> <li><input type="radio" name="q2" value="3">あいうえお</li> <li><input type="radio" name="q2" value="4">あいうえお</li> </ul> </div> </div> <div id="ans"> <p>問い１答え</p> <p>問い2答え</p> <p>問い3答え</p> </div> <div id="ans_btn"> <input type="button" value="ここを押すと解答" onClick="saiten()"> </div> <script type="text/javascript"> var ans = ["2","3","1"]; function saiten(){ var p_node=document.getElementsByTagName("p"); for(var i=0;i<ans.length;i++){ if(ans[i]==document.getElementById("q"+i).value){ p_node[i].innerHTML = "正解"; }else{ p_node[i].innerHTML = "間違い"; } } } </script> </body> </html> /* ----------------△△△ここまで△△△------------------------ */ よろしくおねがいします。
- ベストアンサー
- JavaScript
お礼
おっしゃるとおりです。 お恥ずかしいかぎりです。 くじけず、精進いたします。 このたびは本当にありがとうございました。