JavaScriptを外部ファイル化してHTMLと連携する方法
- JavaScriptを外部ファイル化する方法とHTMLとの連携方法について教えてください。
- また、テキストエリアの内容をコピー・クリアするボタンを付ける方法も教えてください。
- HTMLファイルにJavaScriptを切り離して記述し、テキストエリアの内容をコピー・クリアするボタンを追加したいです。具体的な方法を教えてください。
- ベストアンサー
JavaScriptを外部ファイル化したい。
以下の内容のhtmlファイルを作成しました。 この中から、JavaScriptを外部ファイル化したいのですが、 どの部分をどう切り離せばいいのか、 html側・JS側にはどういう風に記載すればいいのかが分かりません。 どなたかご教示ください。 また、以下のテキストエリアの下に、「コピー」と「クリア」のボタンを付け、 クリックでテキストエリアの内容コピー・選択全クリアができるようにしたいのですが、 その点についても方法をご存知の方がいらっしゃいましたらご教示ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <form action=""> <p>氏名：<input type="text" name="hoge0" value=""></p> <p> <input type="checkbox" name="hoge1" value="A型">A <input type="checkbox" name="hoge1" value="B型">B <input type="checkbox" name="hoge1" value="AB型">AB <input type="checkbox" name="hoge1" value="O型">O </p> <p> <input type="radio" name="hoge2" value="男">男 <input type="radio" name="hoge2" value="女">女 </p> <textarea name="hoge4" value="" rows="5" cols="40"></textarea> </form> <script type="text/javascript"> //@cc_on document./*@if (1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/, function (evt) { var d = ''; d += getValue('hoge0').join('\n') + '\n'; d += getValue('hoge1').join('\n') + '\n'; d += getValue('hoge2').join('\n') + '\n'; d += getValue('hoge3').join('\n') + '\n'; document.getElementsByName('hoge4')[0].value = d.replace(/^\n/gm, ''); function getValue(name) { var o, c = 0, r = [], objs = document.getElementsByName(name); while (o = objs[c++]) { switch(o.type){ case 'text': case 'select-one': case 'textarea': r.push(o.value); break; case 'checkbox': case 'radio': if(o.checked) r.push(o.value); break; default: } } return r; } }, false); </script>
- welle_well
- お礼率4% (2/48)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
文字化けしてるのかな。 <script type="text/javascript"> ～ </script> （この ～ 部分のみを コピーし他のファイル(たとえば sample.js)に 拡張子jsで もとのhtmlと同じフォルダ(階層)に保存、そしてhtmlの文を削除) のこった <script type="text/javascript"> </script> を <script type="text/javascript" src="./sample.js"> </script> にかきかえる。
関連するQ&A
- 指定された場所に、取得した値を表示したい。
アンケート結果を入力するツールを作成したいと思っています。 ラジオボタン・チェックボックス・テキストエリアに必要項目を入力し、 「作成」ボタンをクリックする事で、テキストエリアに情報を取得（吐きだし）したいのですが、 HTML部分は完成しているのですが、JavaScript部分をどう組んでいいのか分かりません。 どなたかご教示ください。 また、色々検索し、たくさんのサイトを拝見したのですが、 イメージしているものが記載されたサイトになかなか辿りつけませんでした… 本も探してみたのですが、求めている情報が記載されておらず… 参考になるサイト・本をご存知の方いらっしゃいましたら、併せて教えてください。 HTML部分は、以下のようなイメージです。 上側に入力した内容を、下のテキストエリアに吐き出したいです。 <title></title> <form action=""> <p>氏名：<input type="text" name="hoge0" value=""></p> <p> <input type="checkbox" name="hoge1" value="A型">A <input type="checkbox" name="hoge1" value="B型">B <input type="checkbox" name="hoge1" value="AB型">AB <input type="checkbox" name="hoge1" value="O型">O </p> <p> <input type="radio" name="hoge2" value="男">男 <input type="radio" name="hoge2" value="女">女 </p> <textarea name="hoge4" value="" rows="5" cols="40"></textarea> <br> <button type="button">内容反映</button> <input type="reset" value="リセット"> <br> <br> <br> <textarea name="hoge4" value="" rows="5" cols="40"></textarea> </form>
- 締切済み
- JavaScript
- 以下のソースの改善点を教えてください。
以前こちらで、アンケートツールを作成したいと書き込み、以下のような返答を頂きました。 理想としていた吐き出し方法で、まさにこれ！といった感じだったのですが、 職場のPCで入力した所、エラーが出てしまい反応しませんでした。 （メールでの送信等ができないので、すべて手打ちで作成しました） エラー内容を確認し忘れてしまったのですが。。 以前他のソースで動作確認をした際も正常に作動せず、 その時は、ＩＥでは作動しにくいソースが使われていると指摘されました。 以下のソースでエラーが起きてしまう原因として、入力ミス以外に、 考えられる原因はありますでしょうか。 ブラウザはＩＥです。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script> function update(form) { form.hoge4.value = form.hoge0.value + '\n'; if(form.hoge1[0].checked) { form.hoge4.value += form.hoge1[0].value + '\n'; } else if (form.hoge1[1].checked) { form.hoge4.value += form.hoge1[1].value + '\n'; } else if (form.hoge1[2].checked) { form.hoge4.value += form.hoge1[2].value + '\n'; } else if (form.hoge1[3].checked) { form.hoge4.value += form.hoge1[3].value + '\n'; } if(form.hoge2[0].checked) { form.hoge4.value += form.hoge2[0].value + '\n'; } else { form.hoge4.value += form.hoge2[1].value + '\n'; } } </script> </head> <body> <form action=""> <p>氏名：<input type="text" name="hoge0" value=""></p> <p> <input type="checkbox" name="hoge1" value="A型">A <input type="checkbox" name="hoge1" value="B型">B <input type="checkbox" name="hoge1" value="AB型">AB <input type="checkbox" name="hoge1" value="O型">O </p> <p> <input type="radio" name="hoge2" value="男">男 <input type="radio" name="hoge2" value="女">女 </p> <textarea name="hoge4" value="" rows="5" cols="40"></textarea> <br> <button type="button" onclick="update(this.form);">内容反映</button> <input type="reset" value="リセット"> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスをクリックした際、自動的に他の値も
■チェックボックスをクリックした際、自動的に他の値も追加したい 下記のようなチェックボックスがあった際に、 <input type="checkbox" name="hoge[]" value="1" />ホゲ <input type="checkbox" name="piyo[]" value="1" />ピヨ <input type="checkbox" name="puyo[]" value="1" />プヨ ホゲをクリックしたら、value="1"になるかと思うのですが、 このvalue部分を動的に生成することはできるでしょうか？ 例えば、ホゲをクリックしたら(ホゲをクリックした時だけ)、 自動的に、 <input type="checkbox" name="hoge[]" value="1" /> <input type="checkbox" name="hoge[]" value="2" /> <input type="checkbox" name="hoge[]" value="3" /> <input type="checkbox" name="hoge[]" value="4" /> <input type="checkbox" name="hoge[]" value="5" /> <input type="checkbox" name="hoge[]" value="6" /> <input type="checkbox" name="hoge[]" value="7" /> <input type="checkbox" name="hoge[]" value="8" /> <input type="checkbox" name="hoge[]" value="9" /> をクリックしたのと同じ処理が走るよう、スクリプトで書くには、 どうすればよいでしょうか？
- ベストアンサー
- JavaScript
- JavaScriptで選択問題作成(3)
お世話になります。 以前ここで質問をさせてもらった件で不具合が出来たのでまた質問をさせてもらいます。 以前のスレはこれです。 http://okwave.jp/qa/q9170301.html ここで教えてもらった通りに作成していたのですが、以下のような感じです。 <!DOCTYPE html> <meta charset="utf-8"> <style> fieldset.q ul { list-style: none; } </style> <body> <h1>問題</h1> <fieldset class="q"> <legend>Q1. 九州の県は次のうちどれですか?</legend> <ul> <li><label><input type="checkbox" name="q1" value="true">福岡</label> <li><label><input type="checkbox" name="q1" value="false">岡山</label> <li><label><input type="checkbox" name="q1" value="false">山形</label> <li><label><input type="checkbox" name="q1" value="true">長崎</label> <li><label><input type="checkbox" name="q1" value="true">熊本</label> <li><label><input type="checkbox" name="q1" value="false">新潟</label> <li><label><input type="checkbox" name="q1" value="false">山口</label> <li><label><input type="checkbox" name="q1" value="true">鹿児島</label> <li><label><input type="checkbox" name="q1" value="true">佐賀</label> <li><label><input type="checkbox" name="q1" value="false">青森</label> <li><label><input type="checkbox" name="q1" value="true">宮崎</label> <li><label><input type="checkbox" name="q1" value="false">千葉</label> </ul> <input type="button" value="解答"> <input type="hidden" name="q1" value=""> </fieldset> <p> <input type="button" value="リセット"> <input type="button" value="終了"> <script> function check (e) { var fieldset = e.parentNode; var seikai = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]'); var kaitou = fieldset.querySelectorAll ('input[type="checkbox"]:checked'); var hidden = fieldset.querySelector ('input[type="hidden"]'); var kotae; if (seikai.length === kaitou.length) { hidden.value = 'true'; alert ('正解です。'); } else { hidden.value = ''; kotae = Array.prototype.map.call (seikai, function (e) { return e.parentNode.textContent; }).join (', '); alert ([ '不正解です。', '答えは、'+ kotae + 'です。' ].join ('\n')); } } function ending () { var es0 = document.querySelectorAll ('fieldset.q input[type="hidden"]'); var es1 = document.querySelectorAll ('fieldset.q input[type="hidden"][value=""]'); alert ([ '問題数は、'+ es0.length + 'です。', '間違いは、' + es1.length + '問あります。' ].join ('\n')); } function reset () { var es = document.querySelectorAll ('fieldset.q input[type="hidden"]'); Array.prototype.forEach.call (es, function (e) { e.value = ''; }); } function listener (event) { var e = event.target; if ('button' === e.type) switch (e.value) { case '解答' : check (e); break; case 'リセット' : reset (); break; case '終了' : ending (); break; } } reset (); document.addEventListener ('click', listener, false); </script> ここでなぜか 福岡 長崎 熊本 鹿児島 佐賀 宮崎にチェックを入れて解答したら もちろん正解になります。 その後に長崎のチェックを外してかわりに山形にチェックを入れて解答したらなぜか正解になります。もちろん山形はfalseにしています。 しかし福岡 山形 長崎 熊本 鹿児島 佐賀 宮崎にチェックを入れた状態で 解答をすると不正解になります。 何故でしょうか? 教えてください
- 締切済み
- JavaScript
- チェックボックスから配列を使って値を受け取る方法
チェックボックスから配列を使って値を受け取る方法について、 以下の通りに試してみたのですが、上手く行かず、 配列$fCに値が入りません。 どなたか原因を教えていただけないでしょうか。 ------------------------------------------------ hoge.html <form action="hoge.php"> <input type="checkbox" name="fC[]" value="hoge"> hoge <br> <input type="checkbox" name="fC[]" value="foo"> foo <br> <input type="checkbox" name="fC[]" value="bar"> bar <br> <input type="submit" value="OK"> </form> ---------------------------------------------------------- ------------------------------------------------- hoge.php <? for( $i=0; $i<count($fC); $i++ ) { print $i ." ::: " . $fC[$i] . "<br>\n"; } ?> ----------------------------------------------------------
- ベストアンサー
- PHP
- javascriptについて
<script type="text/javascript"> <!-- function df(){ var scr=100; if(document.ad.y.checked){ var sty=document.ad.a; for(var i=0;i<3;i++){ if(sty[i].checked){ scr+=20+10*i; break; } } } document.ad.ad1.value=scr; } --> </script> </head> <body> <form action="#" method="POST" name="ad"> <h4>毎日歯を磨きますか？</h4> <p><input type="checkbox" name="y" value="">はい<br> <input type="checkbox" name="n" value="">いいえ</p> <h4>何回</h4> <p>1回<input type="radio" name="a" value=""><br> 2回<input type="radio" name="a" value=""><br> 3回<input type="radio" name="a" value=""></p> <p>何<input type="text" size="20" name="ad1">点</p> <p><input type="button" value="配点" onClick="df()"> <input type="reset" value="リセット"></p> </form> </body> </html> プログラムとしては成功しているんですが 解らないところが for(var i=0;i<3;i++) のところです。ラジオボタンに添え字を使って計算をしているという プログラムなのでしょうが たとえばlengthではなくあえて数字を入れてるのは 配列ではないからでしょうか？ もう一点 formをつかって button やimage などを使うと 間違いを指摘してもデーターが流れて言ってしまいます。 return falseなど工夫はしてますが データーをtextに入っている文面を消さずに修正させるいい方法はありませんか お願いします。
- ベストアンサー
- JavaScript
- JavaScriptでcheckboxの入力個数制限
以下のようなチェックボックスがあります。 ３つ以上チェックできないようにしたいのですが、JavaScriptで可能でしょうか？ <FORM method=POST action="aaa.cgi" name="FORM1"> <input type="checkbox" name="Q1" value="1">1<br> <input type="checkbox" name="Q2" value="1">2<br> <input type="checkbox" name="Q3" value="1">3<br> <input type="checkbox" name="Q4" value="1">4<br> <input type="checkbox" name="Q5" value="1">5<br> </form>
- ベストアンサー
- JavaScript
- Javascriptでフィールドを埋める方法
Javascript初心者です。 HTML <input type="text" id="hoge" value="piyo"> <input type="checkbox" onclick="AutoFill();" > <input type="text" id="foo" value=""> Javascriptでcheckboxをクリックすると、fooというidを持つテキストフィールドの値をhogeというidを持つテキストフィールドと同じ値で埋めたいと思います。 bodyの終りに <script> AutoFill(){ document.elementGetById(foo).value=document.elementGetById(hoge).value; } </script> checkboxをクリックしても何も起こらない。どうすればいいんですか。 ご回答をよろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptの動作で困ってます。
動作不良が三箇所あります。 プログラムに詳しい方がいらっしゃいましたら原因を教えて下さい。 ・未入力の質問をアラートで一括表示させたいのですが、 （３）のテキストエリアの箇所が未入力なのにアラートに表示できません。 判定のtrueとfalseを逆にして試すと、（３）のアラートは表示されるものの、記入しても アラートが出続けます。 ・１度しか指定していないにも関わらず同じ内容の警告アラートが２回出てしまう原因が分かりません。 ・入力した項目や選択した項目に関しては未入力項目のアラートとは別のアラートを用意してvalueの値をアラートで一括表示させたいのですが、関数を定義しているにも関わらず、関数が定義されていないとエラーメッセージが帰ってきて、表示されません。 ソースコードは以下になります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check(){ var msg = ""; var msg2 = ""; var str = document.form.id.value; var str2 = document.form.pass.value; if (str.match(/[^0-9]+/)) { alert("客番号は数字のみ"); } if (str.length>5) { alert("客番号は4～5桁"); } if(str.length<4){ alert("客番号は4～5桁"); } if(str==""){ msg += "客番号が未入力です。\n"; }else{ msg2 += document.form.id.value; } if(str2==""){ msg += "パスワードが未入力です。\n"; }else{ msg2 += document.form.pass.value; } if(radioCheck()==false){ msg += "(1)が未入力です。\n"; } if(checkboxCheck()==false){ msg += "(2)が未入力です。\n"; } if(textareaCheck()==false){ msg += "(3)が未入力です。\n"; } if(selectCheck()==false){ msg += "(4)が未入力です。\n"; } if(msg != ""){ //メッセージを出力 alert(msg); } if(radioCheck()==true){ msg2 += document.form.eng.value ; } if(checkboxCheck()==true){ msg2 += document.form.lang.value ; } if(txtareaCheck()==true){ msg2 += document.form.opinion.value ; } if(selectCheck()==true){ msg2 += document.form.age.value ; } if(msg2 != ""){ //メッセージを出力 alert(msg2); } } function radioCheck(){ var count = 0; var eng=document.getElementsByName("eng"); for(var i=0;i<eng.length;i++){ if(eng[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function checkboxCheck(){ var count = 0; var checklist=document.getElementsByName("lang[]"); for(var i= 0;i<checklist.length;i++){ if(checklist[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function textareaCheck(){ var textarea=document.getElementById("demand").value; if(textarea!=""){ return true; } else{ return false; } } function selectCheck(){ var selectValue=document.getElementById("age").value; if(selectValue!="選択されていません"){ return true; } else{ return false; } } </script> </head> <body> <form action="http://www" method="post" name="form"onSubmit="return check()"> <h1>アンケート</h1> <p><label>客番号：<input type="text" name="id"></label></p> <p><label>パスワード：<input type="password" name="pass"></label></p> <h2>（１）</h2> <p>食べたいですか？<br> <br> <input type="radio" name="eng" value="yes"> はい <input type="radio" name="eng" value="neither"> どちらでもない <input type="radio" name="eng" value="no"> いいえ </p> <h2>（２）</h2> <p>食べたい物<br> <br> <input type="checkbox" name="lang[]" value="apple"> りんご <input type="checkbox" name="lang[]" value="banana"> バナナ <input type="checkbox" name="lang[]" value="pasta"> パスタ <input type="checkbox" name="lang[]" value="pizza"> ピザ <input type="checkbox" name="lang[]" value="supu"> スープ </p> <h2>（３）</h2> <p>意見（自由記述）<br> <textarea id="demand" name="opinion" cols="40" rows="4" maxlength="20"> </textarea> </p> <h2>（４）</h2> <p> 年齢を選択 <select id="age" name="age"> <option selected value="選択されていません">以下から選択</option> <option value="10～19才">10～19才</option> <option value="20～29才">20～29才</option> <option value="30～39才">30～39才</option> <option value="40～49才">40～49才</option> <option value="50～59才">50～59才</option> <option value="60～69才">60～69才</option> <option value="70才～">70才～</option> </select> </p> <p> <input type="submit" name="button" value="送信" onclick="check();"> <input type="reset" value="クリア"> </p> </body> </form> </html>
- 締切済み
- JavaScript
- 配列で渡されたチェックボックスの値の処理
POST元のページから <input type="checkbox" name="hoge[23]" value="1"> <input type="checkbox" name="hoge[31]" value="0"> <input type="checkbox" name="hoge[33]" value="1"> ・・・ のような形でデータが渡されます。 要素一つに付き、ONなのか、OFFなのか、表示されていないのかの判別が必要なため、このような形になっています。 受けるPHP側で、hogeの配列番号と一致したものがあればそれに対する処理を行う必要があります。 $buff=array(20,30,31); となっているとして、 $_POST["hoge"]の配列の値と$buff内の数字が一致したら～ （上記例だと31が一致） の書き方はどう書けばいいでしょうか。 よろしくお願いします。
- ベストアンサー
- PHP
