JavaScriptに関する質問・疑問一覧 - (321件目〜340件目)

javascriptでサブルーチン化する方法

現在、ホームページを作成しておりますが、node.js側(VisualStudioCode)にて条件分岐が複数あり、各々にinsert等の命令文が含まれる形となっております。命令文は全体で約1,000個ありますが、同じ命令文が複数個所にあることからサブルーチン化して軽量化を図りたいと考えております。ネットで調べましたが、これといった解決策が見つからなかったため、ご教示願います。

ベストアンサー
osaka5963
JavaScript
回答数1
2020/10/16 17:19

javascriptとフォーム

javascriptでフォームに入力した値を別ウィンドウにプレビューとしてその内容を自動生成して表示させたいのですが、やり方を教えて下さい。この場合、すでにフォームタグがあり、submitボタンなどが存在している過程でお願いします。自動生成する内容はtextareaのものです。

締切済み
humu01jp
JavaScript
回答数1
2020/10/13 19:48

指定した複数のデータを別ページフォームに入れる

非常に古い回答を参考にしています。2007/11/08 19:08 steel_grayさんが回答されている項目希望する事は複数　商品一覧のA.htmlのページがありそれをお問合せフオームB.htmlのテキストボックスに投げ入れるスクリプトを希望 A.html <head> </head/> <body> <script type="text/javascript"> function sendQuery(uri,querys){ var query = new Array; for(var x in querys) { query.push(x+'='+encodeURI(querys[x])); } location.href=uri+'?'+query.join('&'); } </script> <input type="button" value="問合せ" onclick="sendQuery('問い合わせページのURL',{'CODE':'ABC001','NAME':'商品名'})"> </body> --------------------------------------- ・問い合わせページ・・スクリプト(bodyのonloadで呼び出す) B.html <head> </head> <body> <script type="text/javascript"> function setQuery(){ var querys = location.search.replace(/^\?/,'').split(/&/); for(var i=0;querys[i];i++){ var query = querys[i].split('='); document.getElementById(query[0]).value = decodeURI(query[1]); } } </script>  <input type="hidden" id="CODE"> <input type="hidden" id="NAME"> </body> それぞれCODEとNAMEのテキストボックスにデータが入りません希望は<input type="hidden" id="CODE">にCODEのデータが入る <input type="hidden" id="NAME">にNAMEのデータが入るスクリプトを希望します。何卒ご回答よろしくおねがいします。

ベストアンサー
foot001
JavaScript
回答数3
2020/10/12 12:37

更新したらページが見れない

ホームページ更新後「404 Not Found The resource requested could not be found on this server!」と表示されます。サーバーにはデーター残っていますが、表示されないです。最近ホームページリニューアルしてアップしました。完全にリニューアルできていないためトップページと一部ページのみ更新しました。切り替えのつなぎとして現行ページをそのまま残していてそれをアップした時に急にページが見れなくなってしまいました。リダイレクトが正確に行われていないことが原因と考えたのですが、どこを見て修正したらいいのかわからない状態になっています。

締切済み
be-ginner
JavaScript
回答数1
2020/10/10 21:29

JavaScripでラベル名を取得したい

い。以下に記述しているHTMLとJavaScriptでは valueの値、red, blue, yellowしか取得できません。 HTMLからvalue属性を外すと”on”しか出てきません。このようなHTMLが記述されている場合、どうすればラベル名(赤、青、黄)を取得できますか？分かる方いらっしゃいましたら教えて下さい。宜しくお願いします。 (HTML) 　 <input type="radio" name="color" value="red">赤 <input type="radio" name="color" value="blue">青 <input type="radio" name="color" value="yellow">黄 <button>Add!</button> <ul> </ul> ------------------------------------- (JS) 'use strict'; { document.querySelector('button').addEventListener('click', () => { const colors = document.querySelectorAll('input'); let selectedColor; colors.forEach(color => { if (color.checked === true) { selectedColor = color.value; } }); const li = document.createElement('li'); li.textContent = selectedColor; document.querySelector('ul').appendChild(li); }); }

ベストアンサー
blueletter12345
JavaScript
回答数1
2020/10/08 16:40

【JavaScript】でラベル名を取得したい

【JavaScriptで】セレクトボックスからラベル名を取得する方法下に書いたHTMLのセレクトボックスからラベル名を取得するにはどうしたらよいのでしょうか？ HTMLにvalue値をつけずにこのように記述すると、下記のJavaScriptの記述でラベル名が取得できます。 ***************** <select> <option>1月</option> <option>2月</option> <option>3月</option> </select> https://imgur.com/T8W1Umy ***************** ところが下記のようにvalueに値をつけるとvalueの値が出力されラベル名は表示されません。都道府県名や名前など各々valueの値と、ラベル名が異なることはよくあることと思います。以下に記述したHTML（valueの値がついたもの）のセレクトボックスからラベル名を取得するにはどのように記述したら良いのでしょうか？分かる方いらっしゃいましたら教えて下さい。宜しくお願いします。（JS） 'use strict'; { document.querySelector('button').addEventListener('click', () => { const li = document.createElement('li'); const month = document.querySelector('select'); li.textContent = month.value; document.querySelector('ul').appendChild(li); }); } ---------------------------------------- （HTML） <select> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> </select> <button>Add!</button> <ul> </ul>

ベストアンサー
blueletter12345
JavaScript
回答数1
2020/10/07 16:05

Java Script 文字コード指定

「html ファイル」 ──────────────── <script src="java.js"></script> あいうえお ──────────────── 「java.js」 ──────────────── document.write('<meta charset="UTF-8">'); ──────────────── 上記のように、 html ファイルでは、文字コード指定をせず、外部 js ファイルを呼び出して、元のhtmlファイルのコードを指定したいのですが、上記の方法ではできません。やり方があれば、お願いします。

ベストアンサー
anon256
JavaScript
回答数2
2020/10/07 08:04

【JavaScript】toggleの使い方

id="color"を付けた<p>タグで以下のような記述をしてみました。マウスオーバーをすれば、上記の<p>タグの色は赤に変わり、マウスをはずすと色が元の色（black）に戻ります。うまくはいきましたが冗長に感じます。 classListを使ってtoggleをつけた練習をしたことはあります。このようなケースで"toggle"を使ってマウスオーバーをした時にはテキストは赤色、はずすと元の色(black)になるように簡潔に記述する方法はあります？超初心者です。簡潔に記述する方法があれば教えて下さい。宜しくお願いします。 (HTML) <p>こんにちは。こんにちは。こんにちは。</p> <p id="color">こんにちは。こんにちは。こんにちは。</p> <p>こんにちは。こんにちは。こんにちは。</p> ---------------------------------------------------- (JavaScript) document.getElementById("color").addEventListener("mouseover", () => { document.getElementById("color").style.color = "red"; }); document.getElementById("color").addEventListener("mouseout", () => { document.getElementById("color").style.color = "black"; });

ベストアンサー
blueletter12345
JavaScript
回答数2
2020/10/05 12:28

【JavaScript】DOMのノードの数え方

以下のHTMLに対してその下のJavaScriptを記述しました。コンソールについている番号をその下のHTMLに書き込んでみました。 ▶は改行、もしくはタブによる空白をあらわしています。自分が学習した範囲（添付画像）だと、全ての<li>～<li>の後に改行やタブによる空白もカウントされるものと思っていました。一番下に自分で書いてみた番号とNodeListの番号の対応は合っていますか？１つ目、あるいは２つ目の</li>の後の改行やタブによる空白は含まれないのでしょうか？ NodeListの一番最初と、一番最後は”text”になっていますが、これは改行を示しているのでしょうか？それともタブ等による空白を示しているのでしょうか？いずれにせよ最初と最後だけに"text"がついているのが腑に落ちません。 DOMのノードの数え方について初心者にも分かりやすいように教えていただけないでしょうか？よろしくお願いします。 (HTML) <ul> <li>item</li> <li>item</li> <li>item</li> </ul> (JavaScript) const ul = document.querySelector('ul'); const list = ul.childNodes; console.log(list); ---------------------------------------------------- (コンソール:結果) NodeList(7) [text, li, text, li, text, li, text] 0: text 1: li 2: text 3: li 4: text 5: li 6: text length: 7 __proto__: NodeList ↓↑ <ul> ▶(0)<li(1)>item1(2)</li> <li(3)>item2(4)</li> <li(5)>item3(6)</li>▶(7) </ul>

締切済み
blueletter12345
JavaScript
回答数1
2020/10/03 11:13

JavaScriptでタグを含む要素が返ってくる

const base = document.getElementById('parent'); const children = base.children; console.log(children[0]); console.log(children[1]); console.log(children[2]); 下に記述したHTMLの<ul>の子要素を取得するために上記のように記述しました。この場合添付画像のようなタグを含めた要素が返ってきます。タグの中に書かれた内容を取得するにはtextContentを使えば良いようです。初心者なもので、 <タグを含めた要素を取得してどんな使い道があるのでしょうか？意味がよくわかりません。　使い慣れた方、これの使い道を教えてください。宜しくお願いいたします。 <ul id="parent"> <li id="first">1番目</li> <li id="second">2番目</li> <li id="third">3番目</li> </ul>

締切済み
blueletter12345
JavaScript
回答数1
2020/10/02 14:06

一部スクロール表示が含まれる画面を印刷する方法

ホームページ画面の一部に縦スクロールの設定をしております。画面上に印刷ボタンを作成し、プリントアウトしたいと考えておりますが、ファイル→印刷と押すと表示された部分のみしか印刷されません。どなたかご存じでしたらご教示願います。【HTML】 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333;" class="test"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">品物・オプション<br>注文先・単価</th> <th height="42" size=10>金額/個数</th> <th height="42" size=20><b>発注者/入力者</b></th> </tr> <% for(var i in content) { %> <tr bgcolor="lightyellow" > <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日" disabled="disabled"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=品物 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物 %>" disabled="disabled"> <input type="text" name=option size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"> <input type="text" name=品物2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物2 %>" disabled="disabled"> <input type="text" name=option2 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"> <input type="text" name=品物3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物3 %>" disabled="disabled"> <input type="text" name=option3 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"><br> <input type="text" name=tyumonsaki size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination %>" disabled="disabled"> <input type="text" name=単価 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価 %>" disabled="disabled"> <input type="text" name=tyumonsaki2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination2 %>" disabled="disabled"> <input type="text" name=単価2 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価2 %>" disabled="disabled"> <input type="text" name=tyumonsaki3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination3 %>" disabled="disabled"> <input type="text" name=単価3 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価3 %>" disabled="disabled"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計金額 %>" disabled="disabled"> <input type="text" name=合計数 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計数 %>" disabled="disabled"> </td> <td align="center" height="47" size=20> <input type="text" disabled="disabled" name=発注者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.発注者 %>"> <input type="text" disabled="disabled" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.入力者 %>"> </td> </tr> <% } %> </table> </div> </div> 【CSS】 .test { height: 250px; overflow-y: scroll; }

締切済み
osaka5963
JavaScript
回答数1
2020/10/02 10:41

テーブルから取得したデータをホームページに表示する

ホームページを作成しておりますが、テーブルから取得した文字列から一部を取得し、文字連結後にホームページに表示させる方法を探しております。初歩的な質問で大変申し訳ございませんが、ご教示願います。なお、プログラムはVisual Studio Codeを使用しており、ブラウザはIE11です。 table_a --------------------------------- date | code | comment --------------------------------- 2020/09/05 | 0101101 | --------------------------------- 2020/09/30 | 0101011 | javascript select code from table_a where date = "2020/09/05"; var aaa = results[0].code.substr( 0, 2 ); var bbb = "11"+aaa; console.log('bbb' + bbb); →11011 画面上表示　1

ベストアンサー
osaka5963
JavaScript
回答数2
2020/10/01 14:48

window.openで開いたページに書き込みたい

<html> <script language="javascript"></script> <a href="javascript:startIE('https://www.yahoo.co.jp/')">IE起動</a> <div id="NAIYO">ああああああああああああああああああああああああ</div> </html> ------------------------------------- divの内容は自動で色々変更するようにしていますが参考として上記のようにしました。ボタンを押してブラウザを起動したら、Yahooを開き「あああああああああああ」を検索ボックスに入れたいと思っています。しかし、ロードが終わっていない状況だからから書き込むことが出来ません。 OnLoadを組み込んでみましたが、以下のようなエラーが出ます。 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. Chromeの拡張機能にしたら出来るようになるのでしょうか? お手数をおかけしますが、回答よろしくお願いいたします。

ベストアンサー
catsmoon
JavaScript
回答数3
2020/09/29 10:39

GAS

GASについてです。現在、実行するとExcelのシートにあるセル範囲を指定してその範囲内に記載されている文字や時間がGメール本文に反映され送信できる、というツールを作成しています。しかし、実行しても時間表示が中々上手くできません… シート内に記載されている09:00というように本文にも反映させたくて編集を繰り返し、何度実行しても Sat Dec 30 1899 09:00:00 GMT+0900 (日本標準時) と表示されてしまいます。この表示ではなく09:00と表示をさせたいのですがどこを直せば良いでしょうか？アドバイスよろしくお願いします。 function sendOrderMail() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getSheets()[0]; var range = sheet.getRange('A14:G68') var values = range.getValues(); // 行ごとの値を格納する変数を初期化 var row = ""; //その2次元配列の行の数だけループを回す for (var i = 0; i <values.length; i++) { //改行 row += ("\n"); // その2次元配列の列の数だけループを回す for (var j = 0; j <values[i].length; j++) { //values[i][j]の中身が空ではない場合 if (values[i][j]!=="") { //rowの中身を作る処理 row += values[i][j]; //if(values[i][j]!==の中身が日付じゃない場合){ if(values[i][j]!== "date"){ //values[i][j]の中身をそのままrowにくっつける処理 values[i][j] +=row; //全部の条件に一致しないとき下の処理を行う }else{ //values[i][j]の中身を○○時○○分の表示に変換して、 //変数dateに代入 var date = Utilities.formatDate(date, "JST", "HH:mm"); //rowにdateをくっつける処理 row += date; } } } } MailApp.sendEmail("***@gmail.cam","【勤怠報告】"row); } ※最後のメアドは仮です。

締切済み
Minamiumezawa
JavaScript
回答数1
2020/09/26 21:37

htmlファイルの要素を別ファイルにしたい

ローカルで利用するhtmlファイルを作成しています。 <input type="text" autocomplete="on" list="mylist"> <datalist id="mylist"> <option value="1行目"></option> ・・ <option value="200行目"></option> </datalist> datalistのoptionが200行以上あり、 HTMLに直接書いて管理するのがキツイと判断しました。そこで、別のテキストファイルなどにし HTMLにChildを追加していけば良いのではないかと思ったのですがローカルのテキストファイルが読めずに困っています。最初の「require」で引っかかってしまうため上手くいきません。要素を別ファイルに置いておき、参照できるようないい方法は無いでしょうか。 <script language="javascript"></script> お手数をおかけしますが、回答よろしくお願いいたします。

ベストアンサー
catsmoon
JavaScript
回答数1
2020/09/25 19:41

メッセージボックスの表示

javascriptとhtml間で処理が完了したらメッセージボックスを表示させる方法をご存じでしたらご教示願います。 function kakunin(){ ret = confirm("Googleへ移動します。よろしいですか？"); if (ret == true){ location.href = "http://www.google.co.jp/"; } を使ったらconfirmがundefindとなってしまいました。 }

ベストアンサー
osaka5963
JavaScript
回答数1
2020/09/18 13:26

自動フォーカス遷移時にどのような仕様にするべきか

住所等の入力欄に規定の文字数が入力された時に次の入力欄に自動でフォーカス遷移をする実装を作ったのですが、規定文字数が入力されてるボックスにShift+Tabで戻り遷移をしようとすると、一旦フォーカスが戻った後にキーを離したタイミングで次の項目に遷移してしまう挙動となってしまいます。 javascriptを用いた自動遷移を紹介してるブログの例でも同様の挙動となっていますが、これはユーザービリティの観点としてあまりよくないのでは無いかと個人的に感じてしまいます。かといってTabとShiftをそのボックス内で入力された時は無効としてしまうと、逆に次の項目にTabで遷移したい時に反応しなくなってしまいます。何か良い解決策はないでしょうか？参考したサイトは以下になります。 http://wakalog.hatenadiary.jp/entry/2017/11/02/131504 https://web-designer.cman.jp/javascript_ref/keyboard/nextfield/

締切済み
ifonesapp
JavaScript
回答数1
2020/09/17 13:23

DOM内のfunctionを呼ぶ方法

タイトルの通りです。ロード完了後、onkeydownで発火するボタンがあり、呼出し先にfunctionを指定している様なのですが、 onkeydownを発火させる方法もしくは読み込みページ内に既にあるfunctionを呼ぶ方法はありますか？

ベストアンサー
popepon
JavaScript
回答数3
2020/09/11 15:01

Geocoding のhtmlの問題

GeoCodingとは住所を入力すると緯度経度を計算してGoogleマップ上に表示するというものだそうです。Google GeoCoding APIを利用しているようです。サンプルのhtmlをブラウザで起動するだけなのですが、以下のようなエラーが表示されます。 --- このページでは Google マップが正しく読み込まれませんでした。JavaScriptコンソールで技術情報をご確認ください。 --- JavaScriptコンソールというものを知らないのですが、どのようなものなのでしょうか。また、簡単にフィックスできるでしょうか。結局htmlの修正・編集ということになると思うのですが。このような技術はスマホなどはふつうに利用されているはずですが、バージョンアップなどによって仕様がどんどん変わっているのでしょうか。 htmlを示した方がよかったかもですが、50行ぐらいです。

締切済み
skmsk1941093
JavaScript
回答数1
2020/09/11 08:53

JavaScript を一文にしたい

JavaScript で[style]や[classList]と[textContent]を繋げて一文にする方法を教えてください。超初心者です。現在、条件分岐を学習した後、条件演算子を学習しています。if～else文を簡略化して以下のように記述できると学びました。【条件式 ? trueの処理 : falseの処理;】これを使って(-----)以下のように記述するとブラウザに"Congrats!"と表示されます。定数constに70を代入すると"You have failed!"とちゃんと出てきます。ちなみにこれにHTML内に記述しているCSSを効かせたいのですが、 h1.classList.ad('pass').textContent = 'Congrats!': ..........とするとエラーになります。 style属性をつけてセミコロン(;)で区切ってもエラーとなります。複数行で記述するなら h1.classList.ad('pass'); h1.textContent = 'Congrats'; と記述すればいいのですが、この条件演算子の場合は、セミコロンでつなぐとエラーになります。こういう場合、複数行でなく一文にして複数の属性をつけるにはどのように記述したらよいのでしょうか？ブラウザはchromeの最新版を使っています。初心者です。教えてください。宜しくお願い致します。 -------- (main.js) 'use strict'; const score = 85; const h1 = document.querySelector('h1'); score >= 80? h1.textContent = 'Congrats' : h1.textContent = 'You have failed'; ------------------------------------ （HTML） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript BASICS</title> <style> .pass{ color:#000; background-color: red; } .fail{ color:blue; background-color: gray; } </style> </head> <body> <h1></h1> <script src="js/main.js"></script> </body> </html>

ベストアンサー
blueletter12345
JavaScript
回答数1
2020/09/10 15:47

JavaScript

カテゴリ 一覧

カテゴリ
一覧