JavaScript ランキング

JavaScriptはWebページにアニメーションや効果を加えることができるプログラミング言語です。入門編のわかりやすいサイトや書籍を紹介してほしい、オブジェクト指向がわからない、文字列の操作を教えてほしい等こちらに投稿してみましょう。

回答数

気になる

clear機能を失わずにファイルアップロード機能を作成したい

ファイルのアップロード機能を作成していて、アップロードする場所にカメラの画像を配置しているのですが、ファイルをアップロードするとその下に画像や動画やpdfが表示されてしまいます。ファイルを選択したあと？アップロード後？にカメラの画像を見えなくしてその上からアップロードファイルを表示することは出来ますでしょうか？ ※参考サイト http://www.irasuto.cfbx.jp/掲示板テスト/ <form method="post"> <div class="image-partial"> <h2>動画・画像をアップロード(Upload video・image)<span class="required">※ファイルサイズ15MB以内、JPG/GIF/PNG/MP4</span></h2> <div class="image-selector-button"> <label> <div class="image-camera-icon"> <img src="<?php echo $camera_url; ?>" style="height: 100px;"> </div> <input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;"> </label> <input type="hidden" class="attachdel" name="attachdel[]"> <button type="button" class="attachclear">clear</button> <div class="viewer"><?php echo $attach[0]; ?></div> </div> <div class="image-selector-button"> <label> <div class="image-camera-icon"> <img src="<?php echo $camera_url; ?>" style="height: 100px;"> </div> <input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;"> </label> <input type="hidden" class="attachdel" name="attachdel[]"> <button type="button" class="attachclear">clear</button> <div class="viewer"><?php echo $attach[1]; ?></div> </div> </div> </form> <script> const attach = document.querySelectorAll('.attach'); const del = document.querySelectorAll('.attachdel'); const clear = document.querySelectorAll('.attachclear'); const viewer = document.querySelectorAll('.viewer'); for (let i = 0; i < attach.length; i++) { attach[i].addEventListener('change', () => { if (attach[i].files[0].size > 15 * 1024 * 1024) { alert('ファイルサイズが 15MBバイトを超えています'); return; } del[i].value = ""; viewer[i].innerHTML = ""; if (attach[i].files.length !== 0) { const reader = new FileReader(); reader.onload = () => { var child = null; if (reader.result.indexOf("data:image/jpeg;base64,") === 0 || reader.result.indexOf("data:image/png;base64,") === 0) { child = document.createElement("img"); } else if (reader.result.indexOf("data:video/mp4;base64,") === 0) { child = document.createElement("video"); child.setAttribute("controls", null); } else if (reader.result.indexOf("data:application/pdf;base64,") === 0) { child = document.createElement("iframe"); } else { alert("対象外のファイルです"); alert(reader.result); attach[i].value = ""; } if (child !== null) { child.style.height = "100px"; child.src = reader.result; viewer[i].appendChild(child); } }; reader.readAsDataURL(attach[i].files[0]); } }); clear[i].addEventListener('click', () => { attach[i].value = ""; del[i].value = "1"; viewer[i].innerHTML = ""; }); } </script>

質問日時: 2023/06/10 16:12 質問者: 初心者サイト作成

ベストアンサー

3

0
セレクトボックスで配列を呼び出したい。

以下は、セレクトボックス1と2でそれぞれ松山市と高松市を選んだら、配列を呼び出すことができるプログラムです。 <script type="text/javascript"> function change() { if (document.getElementById("selbox")) { selboxValue = document.getElementById("selbox").value; if (selboxValue == "1") { //文字1を表示 document.getElementById("txt1").style.display = ""; //文字2を非表示 document.getElementById("txt2").style.display = "none"; } else if (selboxValue == "2") { //文字2を表示 document.getElementById("txt2").style.display = ""; //文字1を非表示 document.getElementById("txt1").style.display = "none"; } } } function kotae() { ten=0 if((f.q1.value == "松山市"&&f.q2.value == "高松市")||(f.q1.value == "高松市"&&f.q2.value == "松山市")) {f.q1.style.backgroundColor="aqua ";ten = ten + 50} else f.q1.style.backgroundColor="red" if(f.q3.value == "名古屋市"){f.q3.style.backgroundColor="aqua ";ten = ten + 25} else f.q3.style.backgroundColor="red" if(f.q4.value == "金沢市") {f.q4.style.backgroundColor="aqua ";ten = ten + 25} else f.q4.style.backgroundColor="red" f.tokuten.value=ten const keywords = ['あいうえお','かきくけこ', 'さしすせそ']; if (f.tokuten.value=50) { for (let i = 0; i < keywords.length; i++) { console.log(f.rank.value=keywords[0]); }} else if(f.tokuten.value >=20){f.rank.value = 'B'} else if(f.tokuten.value >=15){f.rank.value = 'C'} else if(f.tokuten.value <10){f.rank.value = 'D'} //ここまで } </script> <body> <form name="f"> 愛媛県の県庁所在地は <select name="q1"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。 <p> 香川県の県庁所在地は <select name="q2"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 愛知県の県庁所在地は <select name="q3"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 石川県の県庁所在地は <select name="q4"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> <input type="button" name="b1" value="答え合わせ" onclick="kotae()"> <p> <input name=tokuten size="6">点  <input name=rank class="hoge">ランク  しかし、僕はもうちょっと踏み込んだところまで行きたいのです。ブラウザに表示させたいのです。 document.writeで書くと別のページに遷移してしまうし、一方でalertだと文章が読みづらいです。ブラウザに配列を表示するものは以下のプログラムですが、 <script> var todo = ['メール確認', '日報送信', 'スケジュール確認', '資料作成']; for (var i = 0; i < todo.length; i++) { 　var todoList = document.createElement('li'); 　todoList.textContent = todo[i]; 　document.getElementById('list').appendChild(todoList); } </script> ただ、これだとセレクトボックスで松山市と高松市を選んだ場合の表示ができません。どうしたらいいのでしょうか。どうしたらいいのでしょうか。

質問日時: 2022/07/08 20:14 質問者: 福本英一

解決済

1

0
CookieをWebStoeageに変える

このCookieの関数を、使い方はそのままでWebStorageに保存するように変えるにはどうすればいいでしょうか。よろしくお願いします。 function setCookie(name, value, days) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); const expires = "expires=" + date.toUTCString(); document.cookie = name + "=" + value + ";" + expires + ";path=/"; } function getCookie(name) { const nameEQ = name + "="; const ca = document.cookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; }

質問日時: 2024/11/21 13:38 質問者: 優里さん

解決済

4

0
4

Outlookのアカウントがあるとメールを送れるようですが、私はないので送れません

その掲示板はJavaScriptを使っているようです

質問日時: 2024/10/12 02:18 質問者: LALALAJAPANEARTH

ベストアンサー

1

0
5

＜tr＞指定した表の行要素をボタンクリック後に表示させる方法

最初の行のみ表示させておき、ボタンをクリックすれば全ての行が表示される実装の仕方をご教授いただきたいです。言語：Javascript <table> <tr> <th >名前</th> <th >年齢</th> <th >出身</th> </tr> <tr> <th >taro</th> <td>18</td> <td>日本</td> </tr> <tr> <th >jon</th> <td>23</td> <td>オーストラリア</td> </tr> <tr> <th >Mia</th> <td>20</td> <td>アメリカ</td> </tr> </table> <button>ボタン</button>

質問日時: 2024/09/23 00:07 質問者: mcln

解決済

4

0
6

disabled プロパティが表示されない原因が分からない

Q&A掲示板を作成していて名前とメッセージが送信可能条件を満たしていない場合、ボタンの色を変更させたいと考えております。 disabled プロパティで色の変化を付けており以前は表示されていたのですが、コードを変更したところ表示されなくなってしまいました。アドバイスお願い致します。 ※表示されていたころのコード <div class="post-button"> <button type="submit" id="submit_button" name="mode" value="confirm">表示画面へ進む</button> </div> <script> function validation_submit(f) { const submit = document.getElementById("submit_button"); /* 判定は逆なので、逆に渡す */ submit.disabled = f ? false : true; }; function validation_text(parts) { /* このpartsグループの、inputを抽出 */ let text = parts.getElementsByClassName('input')[0]; /* 最小チェック */ if (text.value.length == 0) { return false; } /* 最大チェック */ if (text.value.length >= text.dataset.length) { return false; } return true; }; /* バリデーション条件判断部分 */ function validation() { let parts = document.getElementsByClassName('parts'); let submit = true; for (let i = 0; i < parts.length; i++) { if (validation_text(parts[i]) != true) { submit = false; } } validation_submit(submit); }; /* 文字数表示 */ document.addEventListener('input', e => { if (!['name', 'message'].includes(e.target.id)) return; const t = e.target, m = t.nextElementSibling, n = t.value.length - (t.dataset.length | 0), c = document.createElement('span'); c.append(Math.abs(n)); m.style.color = n > 0 ? 'red' : 'black'; m.replaceChildren(n > 0 ? '' : '残り', c, `文字${n > 0 ? '超過してい' : '入力でき'}ます。`); /* 毎回判定によるボタン制御 */ validation(); }); /* 初回判定のボタン制御 */ validation(); }; document.addEventListener("DOMContentLoaded", init); </script> ※表示されなくなってしまったコード <div class="post-button"> <button type="button" id="input_button" name="mode" value="confirm">確認画面へ進む</button> </div>  <script> function validation_submit(f) { const submit = document.getElementById("input_button"); /* 判定は逆なので、逆に渡す */ submit.disabled = f ? false : true; }; function validation_text(parts) { /* このpartsグループの、inputを抽出 */ let text = parts.getElementsByClassName('input')[0]; /* 最小チェック */ if (text.value.length == 0) { return false; } /* 最大チェック */ if (text.value.length >= text.dataset.length) { return false; } return true; }; /* バリデーション条件判断部分 */ function validation() { let parts = document.getElementsByClassName('parts'); let submit = true; for (let i = 0; i < parts.length; i++) { if (validation_text(parts[i]) != true) { submit = false; } } validation_submit(submit); }; const init = function () { set_attach_event(); document.getElementById("input_button").addEventListener("click", input_button_click); /* 文字数表示 */ document.addEventListener('input', e => { if (!['name', 'message'].includes(e.target.id)) return; const t = e.target, m = t.nextElementSibling, n = t.value.length - (t.dataset.length | 0), c = document.createElement('span'); c.append(Math.abs(n)); m.style.color = n > 0 ? 'red' : 'black'; m.replaceChildren(n > 0 ? '' : '残り', c, `文字${n > 0 ? '超過してい' : '入力でき'}ます。`); /* 毎回判定によるボタン制御 */ validation(); }); /* 初回判定のボタン制御 */ validation(); };//const init = function () の終了 }; //const set_attach_event = function () の終了 //DOM構築、スタイルシート、画像、サブフレームの読み込みが完了した後に発生する window.addEventListener("DOMContentLoaded", init); </script>

質問日時: 2024/02/10 21:44 質問者: 初心者サイト作成

ベストアンサー

2

0
7

【Google Apps Script】「ライブラリ」が追加できなくて困っています。

【Google Apps Script】 GAS用Moment.js スクリプトID: MHMchiX6c1bwSqGM1PZiW_PxhMjh3Sh48 を Apps Scriptの新画面にある「ライブラリ」から追加できなくて困っています。ライブラリが古くなったのでしょうか？手順が異なるのでしょうか？

質問日時: 2022/11/10 13:29 質問者: Andro

解決済

1

0
8

jQueryで同じクラス名のものを別物として扱いたい

<tr> <td style="width: 100px;"> <img class="pa" src="https://1.jpg"/> <img class="pb" src="1a.jpg"/> </td> <td style="width: 100px;"> <img class="pa" src="2.jpg"/> <img class="pb" src="2a.jpg"/> </td> <td style="width: 100px;"> <img class="pa" src="3.jpg"/> <img class="pb" src="3a.jpg"/> </td> </tr> のようなhtmlと jQuery('.pa').click(function(){ jQuery('.pb').css('display','inline') }) のようなjQueryと .pb {display:none;} のようなCSSを使って.paがクリックされたときに.pbの画像を表示させたいと考えているのですが 1.jpgをクリックすると1a.jpg,2a.jpg,3a.jpgがすべて表示されます。現在作っているものの事情により、そこのクラス名を変えたりidを利用したりが出来ない状況なのですが、どのpaがクリックされたか判別し、その直後のpbのCSSのみを変更するような方法はありますか？ご教示お願いいたします。

質問日時: 2022/06/17 14:14 質問者: sakura393938

ベストアンサー

1

0
9

タグを教えてください。

HPに桜が舞い散るのを入れたいと思いサンプルのタグを探していました。 <title>ochiba</title> <style> body{ position:relative;} .ochiba{ position:absolute; top:-30px; } #ochiba0.gif{ left: 100px; animation: fall 3s linear 0s 1 normal forwards , swing0 1s ease-in-out 0s 3 alternate none ; } #ochiba1{ left: 200px; animation: fall 3s linear 1s 1 normal forwards , swing1 1s ease-in-out 1s 3 alternate none; } #ochiba2{ left: 300px; animation: fall 3s linear 2s 1 normal forwards, swing2 1s ease-in-out 2s 3 alternate none; } #ochiba3{ left: 400px; animation: fall 19s linear 3s 1 normal forwards, (下まで落ちる時間秒）(落ち始める時間） swing3 1s ease-in-out 3s 3 alternate none; } #ochiba4{ left: 500px; animation: fall 9s linear 4s 1 normal forwards, swing4 1s ease-in-out 4s 3 alternate none; } @keyframes fall{ from{ top: -30px; } to{ top: 1000px; }　　（落ちるきる位置） } @keyframes swing0{ from{ left: 150px; } to{ left:100px; } } @keyframes swing1{ from{ left: 250px; } to{ left:200px; } } @keyframes swing2{ from{ left: 350px; } to{ left:300px; } } @keyframes swing3{ from{ left: 450px; } to{ left:400px; } } @keyframes swing4{ from{ left: 550px; } to{ left:500px; } } </style> </head> <body> <img id="ochiba0" class="ochiba" src="ochiba0.gif" alt="落ち葉"> <img id="ochiba1" class="ochiba" src="ochiba1.gif" alt="落ち葉"> <img id="ochiba2" class="ochiba" src="ochiba2.gif" alt="落ち葉"> <img id="ochiba3" class="ochiba" src="ochiba3.gif" alt="落ち葉"> <img id="ochiba4" class="ochiba" src="ochiba4.gif" alt="落ち葉"> </body> </html></body> </html> 落ち葉が落ちる・・・こんなのがありました。早速ホームページビルダーを使ってやってみましたが、1回花びらが落ちてしまうとそれでお終いになってしまいます。これを繰り返し表示するには何処を修正すればよいのでしょうか？もう一つはこのタグだと落ち葉が5枚ですが、10枚にしたときはどうなりますか・・・タグの制作は全く出来ない、埼玉在住79歳老人より

質問日時: 2025/03/13 13:30 質問者: 2021五郎蔵

ベストアンサー

4

0
10

2025年相性がいい人のサイトの仕組み

https://irotsuku.com/a/bu59alvj このサイト、同じ名前を入れると同じ結果が必ず帰ってくるようになっていますが、どのように計算しているのですか？ JavaScriptに詳しい方など、計算方法を1から10まで解析してほしいです！

質問日時: 2025/01/03 12:29 質問者: kenyskey

解決済

1

0
11

Adobe acrobat proでフォームを準備からフォームを作成しています。emailを半角英数

Adobe acrobat proでフォームを準備からフォームを作成しています。emailを半角英数のみにしたり、他項目を全角入力のみにしたいのですが、やり方が分かりません。フォーマット→カスタム→書式スクリプトの記述にjavascriptの記述で、何か入れれば良いのかな？とは思うのですが、ググって、色々入れてみたのですが、何も起こらないです。どのようにすれば良いか分からないでしょうか？こうすれば良いよって、親身に相談受けていただける方がいらっしゃったら5000円程度でしたら謝礼したいので、よろしくお願い致します。個人的なやり取りは禁止なのかな？とも思いますが、その場合は、すいません。謝礼は出来ませんが、ご教示の程、よろしくお願い致します。

質問日時: 2024/11/10 17:17 質問者: miki1123

解決済

1

0
12

jqueryのselect2で検索欄の文字が消せない

業務で困っているためご存知の方がいらっしゃればご教授ください。バージョンなどの細かい条件がお伝えできないため参考程度で構いません。アタリがつけられればと思っています。開発環境 windows classic asp(vbscript) javascript(jquery) 経緯 html →selectタグでリスト作成 asp →oracle接続→人名データ取得→optionタグでループで全件表示 js →jqueryをインポートし、select2メソッドで実装困っていることリスト内へのデータの反映とselect2による検索欄も正常に表示されましたが、検索時に入力した文字が消せない事象が発生しています。詳細半角文字→削除不可全角文字→enter押下前削除可、押下後削除不可全選択から文字入力(上書き？)可能検索機能は正常 jqueryのファイルはダウンロード後相対パスで呼び出しており、記述の順番も確認済み。他システムでも同様のファイルを使用しており、可能性としては低そう何かイベントが発生しないと文字が消せないなどの条件があるのでしょうか、、よろしくお願いいたします。

質問日時: 2024/09/26 19:18 質問者: mmmmo777

ベストアンサー

1

0
13

食材の期限を管理するためにGASを利用しようとしたのですがうまく動作してくれません

食品の期限を管理するためにGASを利用しようとコードを参考にしたのですがうまく動作してくれないためお力をお貸し頂ければたらと思い投稿しました。 ↓以下↓ function mailSend() { var mySs = SpreadsheetApp.getActiveSpreadsheet(); //スプレッドシートを取得 var Sheet = mySs.getSheetByName('食材管理'); // シート名を取得 var today = new Date(); //今日の日付を取得 var strTo = "〇〇@gmail.com"; //To var strSender = "××"; //差出人名 var strFrom = "△△@gmail.com"; //From /* 繰り返し計算 */ for (var i = 2; i <= 200; i++) { var to_do = Sheet.getRange(i, 3).getValue(); //B列何を買った？を取得 var status = Sheet.getRange(i, 4).getValue(); //C列「個数」を取得 var limit = Sheet.getRange(i, 5).getValue(); //D列「期限」を取得 var date_limit = new Date(limit); //G列「期限」のDateを作成 var dt = date_limit.getTime() - today.getTime(); //date_limitから今日の日付を引く var day = Math.ceil(dt / 1000 / 60 / 60 / 24); //日付に変換 } if (status == "完了") /* ステータスが完了なら何もしない　*/; else if (5 <= day && day <= 7) { //締め切りの7日～5日前 /* メール本文を準備 */ var strSubject1 = to_do + "の期限まで" + day + "日です"; var strBody1 = to_do + "の消費に取り掛かりましょう。\n" /* 改行 */ + "期限まであと" + day + "日です。\n" /* 改行 */ + "\n" /* 改行 */ +"期限：" + date_limit; /* メールを送信 */ var send = GmailApp.sendEmail( strTo, strSubject1, strBody1, { from: strFrom, name: strSender } ); } else if (1 <= day && day <= 4) { //締め切りの1~4日前 /* メール本文を準備 */ var strSubject2 = to_do + "の期限まであと" + day + "日です！"; var strBody2 = to_do + "の消費は順調ですか？\n" /* 改行 */ + "期限まであと" + day + "日です。\n" /* 改行 */ + "\n" /* 改行 */ +"期限：" + date_limit; /* メールを送信 */ var send = GmailApp.sendEmail( strTo, strSubject2, strBody2, { from: strFrom, name: strSender } ); } else if (day <= 0) { //締め切り日 /* メール本文を準備 */ var strSubject3 = to_do + "の締切日を過ぎています。"; var strBody3 = to_do + "は締切日を過ぎています。廃棄は完了しましたか？\n" /* 改行 */ +"期限：" + date_limit; /* メールを送信 */ var send = GmailApp.sendEmail( strTo, strSubject3, strBody3, { from: strFrom, name: strSender } ); } } 以上になります。よろしくお願いいたします。

質問日時: 2024/08/12 15:35 質問者: haruhalharu

解決済

4

0
14

Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい

残り入力可能な文字数をカウントするコードを作成したのですが、あと1文字入力できるのにそこでボタン送信ができないように制限がかかってしまいます。原因が分からない為コードを調べなおしてみました。引き算に問題が生じているのではないかと考えているのですが、どこを修正すべきか分かりませんアドバイスお願い致します。 ※該当コード <php> class MAX_LENGTH { public const NAME = 50; public const TITLE = 50; public const QUESTION = 500; } </php> <html> <div id="input_area"> <form name="input_form"> 　　　　　　　　　<div class="body-partial-parts"> <h2>質問文(question)<span class="required">※必須</span></h2> <div class="parts"> <textarea class="input" name="question" id="question" data-length="<?php echo MAX_LENGTH::QUESTION; ?>" data-minlength="<?php echo MIN_LENGTH::QUESTION; ?>" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"></textarea> <div></div> </div> </div> <div class="title-partial-parts">  <h2>質問タイトル(title)<span class="required">※必須</span></h2> <div class="parts"> <input class="input" type="text" name="title" id="title" data-length="<?php echo MAX_LENGTH::TITLE; ?>" data-minlength="<?php echo MIN_LENGTH::TITLE; ?>" placeholder="<?php echo MIN_LENGTH::TITLE; ?>文字以上で入力してください"> <div></div> </div> </div> <div class="usericon-partial"> <h2>画像アイコン(image icon)<span class="required">※任意</span></h2> <div class="usericon-thumbnail-button"> <label> <div class="usericon-uploads"> <img src="<?php echo $noimage_url; ?>" class="changeImg" style="height: 100px;"> </div> <input type="file" class="attach" name="attach[]" data-maxsize="5" accept=".png, .jpg, .jpeg" style="display: none;"> </label> <div class="viewer"></div> <button type="button" class="attachclear">clear</button> </div> </div> <div class="namae-partial-parts">  <h2>名前(name)<span class="required">※任意</span></h2> <div class="parts"> <input class="input" type="text" name="namae" id="name" data-length="<?php echo MAX_LENGTH::NAME; ?>" data-minlength="<?php echo MIN_LENGTH::NAME; ?>" placeholder="未入力の場合は、匿名で表示されます"> <div></div> </div> </div> <div class="post-button"> <button type="button" id="submit_button" name="mode" value="confirm">確認画面へ進む</button> </div>  </form> </div> </html> <script> document.addEventListener('input', e => { if (!['name', 'title', 'question'].includes(e.target.id)) return; const t = e.target, m = t.nextElementSibling, n = t.value.length - (t.dataset.length | 0), c = document.createElement('strong'); //絶対値が欲しい時 c.append(Math.abs(n)); //classを設定 m.className = 'msg_partial'; m.style.color = n > 0 ? 'red' : 'black'; m.replaceChildren(n > 0 ? '' : '残り', c, `文字${n > 0 ? '超過してい' : '入力でき'}ます。`); </script> ※調べたもの e,もし名前、タイトル、質問の id が取得できなければ終了する t,イベントターゲット　イベントが発生した要素 m,イベントが発生した次の要素を取得する n,名前、タイトル、質問のテキストボックスの文字列の長さを取得する－要素に設定されたカスタム属性（date-）の値（文字列の長さ）を取得する c,要素を生成（strong） c.append(math.abs(n));親要素に子要素を追加する　絶対値を返す。 m.replaceChildren();要素の子要素を全部削除して引数で渡したものに置き換える

質問日時: 2024/04/08 02:46 質問者: 初心者サイト作成

解決済

1

0
15

二次元配列の中の各行の要素をランダムに並べ替えたいです。

Google Apss Scriptを使ってスプレッドシートで小テスト作成のスクリプトを作ろうとしています。二次元配列で以下のような問題のデータがあります。最後のAnswerの部分の数字(1行目なら3)は選択肢の3番目(1行目ならindividual)が答えというようにできています。 [[Japanese, Choice1, Choice2, Choice3, Choice4, Answer] [個人・個々の, opposite, microscopic, individual, separate, 3.0] [必要な, necessity, necessarily, need, necessary, 4.0]] Choice1～Choice4の選択肢をランダムに並べ替え、同時に答えも書き換えるようにしたいのですが、どうしたらいいでしょうか？例えば、1行目を以下のように変えたいのです。 [1, 個人・個々の, opposite, microscopic, individual, separate, 3] ↓ [1, 個人・個々の, microscopic, individual, opposite, separate, 2] ネットで検索しても、特定の列を基準に行を並べ替える例はたくさんあるのですが、特定の行の列を並べ替えるという例が見つかりませんでした。よろしくお願いいたします。

質問日時: 2024/02/05 08:05 質問者: cul-de-sac

ベストアンサー

3

0
16

初心者です。gulpでコンパイルができないので教えてください!

gulpを利用してSCSSをコンパイルしてCSSを生成できるようにしたいのですが上手くいかず手こずっています。コードが間違っている気もしているのですが原因が特定できずに困っており助言いただけるとありがたいです。 gulpのバージョンはversion: 4.0.2 ▼gulpfile.jsに記述している内容 'use strict' var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function(){ gulp.src('./_src/sass/**/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(gulp.dest('./css')); }); gulp.task('watch', function(){ gulp.watch('./_src/sass/**/*.scss', gulp.task('sass')); }) gulp.task('default',gulp.series('watch')); ターミナルでgulp buildと打って実行すると以下のような結果が返ってきてCSSが生成されない状態です。Task never defined: buildと返ってくるので何かコードの記述に問題があるのでしょうか。 ▼ターミナルの実行結果 PS C:\Users\●●●\Desktop\sass> gulp build [16:43:17] Using gulpfile ~\Desktop\sass\gulpfile.js [16:43:17] Task never defined: build [16:43:17] To list available tasks, try running: gulp --tasks

質問日時: 2023/05/17 17:07 質問者: UT-1049

解決済

1

0
17

階層別の組織図の自動作成について

うちの会社の組織図はかなり特殊でして図のように、部・課・係が階層別に分かれています。現状は、Excelの罫線でなんとか作成していますが頻繁に社内構造が変化するため、これをデータシートから自動生成したいと考えております。 jsのOrgChartやjqueryを用いた自動生成は実装できたのですが階層を一つ二つ飛ばすということが実現できませんでした。調べたところ、OrgChartにもJQueryにもそのような想定がないため、無理やりCSSでブロック要素を縮めて罫線っぽくする方法以外になかったのですが、それをすると、社内構造が変わって再生成した際に、その縮めたブロック要素が原因で罫線が乱れる問題が起こったため、没となりました。 VBAかjsどちらかで、図のような組織図を作成する方法はないでしょうか？よろしくお願いいたします。

質問日時: 2022/10/26 13:42 質問者: DDddDDdd11221122

解決済

1

1
18

jsonテキストデータの並び替えができるサービスを教えてください

下記のようなjsonのテキストデータがあった場合、それを貼り付けたらキーの昇順でソートしてくれるサービスがあれば教えてください。サービスがなくても簡単に実現できる方法でもかまいません。どうぞ宜しくお願いいたします！m(_ _)m ------------------jsonデータ---------------------- { "bbb": { "c": "c", "b": "b", "a": "a" }, "aaa":{ "b": "b", "c": "c", "a": "a" } } } ------------------------------------------------- ↓のように並び変わってほしい ------------------------------------------------- { "aaa": { "a": "a", "b": "b", "c": "c" }, "bbb":{ "a": "a", "b": "b", "c": "c" } } } -------------------------------------------------

質問日時: 2022/08/05 20:16 質問者: Hawk1985

ベストアンサー

2

1
19

ラジオボタンを複数選択したときの条件分岐をしたい

下記のように複数のラジオボタンを選択した際の条件分岐をさせたいのですが、うまく動きません。「#radio01」一個だけなら動くのですが、複数だと動かないです。基本的な書き方がおかしいのでしょうか。ご教授頂けると嬉しいです。よろしくお願いします。 $(function() { $('.button').click(function(){ if($('#radio01','#radio02','#radio03','#radio04').prop('checked')){ $('.answer').show(); } }); });

質問日時: 2025/02/25 11:01 質問者: tenpraxxx

ベストアンサー

2

0
20

jsで質問です。 formをsubmitしてサーバー側で処理が行われて処理が完了したら、フロント側で

jsで質問です。 formをsubmitしてサーバー側で処理が行われて処理が完了したら、フロント側で処理をしたいのですが、処理が完了したかどうかわかる方法はあるのでしょうか。 Ajaxなど使用すると画面が更新されないので処理完了したことはわかりますが、サーバ側でname属性に紐付くめのを更新しても反映されないので、何か良い方法がないでしょうか

質問日時: 2025/01/31 10:00 質問者: piraniaman

ベストアンサー

5

0
21

ビデオのJSについて

宮内庁のサイトで使われているビデオプレイヤーはなんというものでしょうか。画質が切り替えられるのが気になっています。

質問日時: 2024/08/02 21:33 質問者: 優里さん

解決済

1

1
22

鍵盤アプリで、スマホの画面に並んだ鍵盤をなぞった時に、触れた鍵が次々発火するようにするには

いつもお世話になっております。 jQueryでシンセサイザーのような鍵盤アプリを作ろうとしています。スマホで画面をなぞった時にドレミの音が次々に鳴るようにするにはどうすれば良いですか。例えば、次のような3個の要素に順に触れるようになぞった時には、ド、レ、ミ、と順に鳴るようにするにはどうすれば良いですか。 <style>div { border: 1px solid; padding: 1em }</style> <div></div> <div></div> <div></div> 色々調べて、次のようなコードを書いたのですが、まだうまく動きません。 const key = $('div') key.on('touchstart', function() {$(this).css('background', '#000')}) key.on('touchmove', function(e) { const tc = e.originalEvent.touches[0], top = $(this).offset().top if(tc.clientY < top || top + $(this).height() < tc.clientY) { $(this).trigger('touchend') $(document.elementFromPoint(tc.clientX, tc.clientY)).trigger('touchstart') } }) key.on('touchend', function() {$(this).css('background', '#fff')}) このコードは要素に触れるとその要素の色が変わり、離すと元の色に戻るようにしようとしています。どうも標準の動きでは、タッチ点が次の要素上に来ても、指を離すまでは次の要素でのタッチイベントは発火しないようですので、touchmoveでタッチ点を監視し、タッチ点が次の要素に切り替わった時に、前の要素で強制的にtouchendを発火させ、次の要素で強制的にtouchstartを発火させています。これにて、1個目の要素から2個目の要素に移った時に、意図した通りに色が変わりました。しかし、そのまま指を離さずに3個目の要素までなぞった時には、意図した通りに色が変わりません。この時、2個目の要素の色が消え、3個目の要素に色が付くようにしたいのですが、実際には2個目と3個目の両方の要素に色が付いてしまいます。また、このコードでは、やむなく強制的にイベントを発火させるという暴挙に出ていますが、可能であればもっと単純な書き方をご教示いただきたく存じます。

質問日時: 2024/07/29 22:18 質問者: zyousuke

ベストアンサー

5

0
23

<div>のタッチ状態を維持したままラジオボタンを切り替えられるようにするには

いつもお世話になっております。 jQueryでシンセサイザーを作ろうとしています。シンセサイザーの一般的な機能として、鍵盤を押したまま、他のスイッチやスライダーを操作して、発音中の音を変える事を実現したいのですが、うまくいきません。問題を再現させるための最小限のコードは次のとおりです。 <input type="radio" name="t"> <input type="radio" name="t"> <div style="padding: 1em; border: 1px solid"></div> <script src="jquery.min.js"></script> <script> const 鍵 = $('div') 鍵.on('touchstart', () => 鍵.css('background', '#000')) 鍵.on('touchend', () => 鍵.css('background', '#fff')) </script> このコードでは、鍵盤を<div>、音の変更スイッチをラジオボタンで作っています。鍵盤をタッチすると、鍵盤の色が変わり、離すと元の色に戻ります。しかし、鍵盤を押したままの状態でラジオボタンを押そうとしても反応しません。鍵盤を押したままの状態で、ラジオボタンも操作できるようにするには、どうすれば良いかご教示ください。

質問日時: 2024/07/24 22:18 質問者: zyousuke

ベストアンサー

1

0
24

jQueryでシンセサイザーを作っている途中なのですが、たまに指を離しても音が止まらなくなります

いつもお世話になっています。原因を探しやすくするために、必要最小限のコードを書きおろしました。次のコードは、ソとラとシの音を出す鍵盤アプリです。指が鍵盤に触れている間は音が鳴り、指を離すとその音が止まります。しかし、このアプリで演奏していると、たまに指を離しても音が止まらなくなってしまいます。その原因を教えてください。コードが読みにくくてスミマセン (>_<) <body style="margin: 0"> <canvas></canvas> <script src="jquery.min.js"></script> <script> const 鍵盤 = $('canvas'), 鍵 = [{音階: -200}, {音階: 0}, {音階: 200}], 幅 = innerWidth / 3 let 音声鍵盤[0].width = innerWidth 鍵盤.one('touchstart', () => 音声 = new AudioContext) 鍵盤.on('touchstart', e => {for(const 点 of e.originalEvent.touches) 発音(点)}) 鍵盤.on('touchend', e => {for(const 点 of e.originalEvent.changedTouches) 発音(点, 1)}) function 発音(e, 停止) { 現鍵 = 鍵[e.clientX < 幅 ? 0 : e.clientX < 幅 * 2 ? 1 : 2] if(停止) { 現鍵.発振器.stop() 現鍵.発音 = 0 } else if(!現鍵.発音) { (現鍵.発振器 = new OscillatorNode(音声, {detune: 現鍵.音階})).connect(音声.destination) 現鍵.発振器.start() 現鍵.発音 = 1 } } </script> </body>

質問日時: 2024/07/15 22:25 質問者: zyousuke

ベストアンサー

5

0
25

プログラミング学習

・普段からプログラミングを継続してないと忘れていきますか？・毎年、毎年、バージョンアップする度に新しい仕組みを勉強する必要がありますか？

質問日時: 2024/07/08 04:37 質問者: youarenotalone2

解決済

7

0
26

HTMLでサブフレームから親のスクリプトを実行する

サブフレームから親で定義したJavascriptの関数を実行しようとして以下のようにHTMLを作りました。left.htmlにあるボタンを押下すると、aaa.htmlにある関数loadを実行するようにしましたが、ボタンを押下してもalertが表示されません。load関数を実行できるようにしたいのですが、どのようにしたらよいのか、おわかりになる方、ご教示いただければありがたいです。《aaa.html（親）》 -------------------------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ja"> <head> <title>フレーム</title> <script> function load(){ alert('onload'); } </script> </head> <frameset title="サイトのタイトル" cols="100,*"> <frame src="left.html" title="左フレーム" name="left"> <frame src="right.html" title="右フレーム" name="right"> </frameset> </html> ------------------------------------------------------------------------------------------------- 《left.html（サブフレーム）》 ------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja"> <head> <title>ひだり</title> </head> <body> <p>ひだり</p> <button type="button" onclick="window.parent.load();">親</button> </body> </html> ------------------------------------------------------------------------------------------------ 《right.html（サブフレーム）》 ------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja"> <head> <title>みぎ</title> </head> <body> <p>みぎ</p> </body> </html> ------------------------------------------------------------------------------------------------ よろしくお願いします。

質問日時: 2024/05/25 20:42 質問者: yuzutosan

ベストアンサー

1

1
27

ジャバスクリプトについて。

ジャバスクリプトで、′console.log( )′は、出力するという意味で合っていますでしょうか?教えてくれませんか?

質問日時: 2024/04/25 17:49 質問者: メラゾーム

解決済

4

0
28

プログラムについて。

コンソール(コマンドプロンプト)は、人間とコンピュータの仲介をしているということでしょうか?後、ログメッセージとは、何でしょうか?ちなみに、ジャバスクリプトでハローワールドを組んだときの疑問点です。教えてくれませんか?

質問日時: 2024/04/24 21:33 質問者: メラゾーム

解決済

3

0
29

メールフォームの日付入力フォームで過去の日付で範囲指定する方法が分かりません

メールフォームの input type="date" で、以前に予約日の設定で7日～6ヶ月感（180日）での範囲指定では、以下のスクリプトで思い通りの動作が確認できました。 <script> window.onload = function(){ /* 今日の日付取得 */ const today = new Date(); /* 変数に8日後をセット */ const getConst1 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 8); /* yyyy-mm-ddに整形 */ var y = getConst1.getFullYear(); var m = getConst1.getMonth() + 1; var d = getConst1.getDate(); const const1 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0'); /* 変数に6か月≒182日後をセット（30.4日×6ヶ月＝182.4日） */ const getConst2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 182); var y = getConst2.getFullYear(); var m = getConst2.getMonth() + 1; var d = getConst2.getDate(); var const2 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0'); document.getElementById("birth1").setAttribute("value",const1); document.getElementById("birth1").setAttribute("min",const1); document.getElementById("birth1").setAttribute("max",const2); } </script> 今回、このスクリプトを使い、年齢制限のある申し込みで年齢を18～60歳で受付たいケースがあり、予約日のスクリプトで、以下の様に修正しましたが動作しません。 <input type="date" id="birth1"> <script> window.onload = function(){ /* 今日の日付取得 */ const today = new Date(); /* 変数に60歳（365日×60年＝21900日）をマイナス */ const getConst1 = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 21900); /* yyyy-mm-ddに整形 */ var y = getConst1.getFullYear(); var m = getConst1.getMonth() + 1; var d = getConst1.getDate(); const const1 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0'); /* 変数に15歳5474日をマイナスセット（365日×15年＝5475日） */ const getConst2 = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 182); var y = getConst2.getFullYear(); var m = getConst2.getMonth() + 1; var d = getConst2.getDate(); var const2 = y + "-" + m.toString().padStart(2,'0') + "-" + d.toString().padStart(2,'0'); document.getElementById("birth1").setAttribute("value",const1); document.getElementById("birth1").setAttribute("min",const1); document.getElementById("birth1").setAttribute("max",const2); } </script> 日付のマイナス指定はどうしたら良いのでしょうか？ご教授いただけると助かります。

質問日時: 2024/04/05 17:43 質問者: k-kazun

ベストアンサー

3

0
30

二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。

Google Apps Scriptを勉強中の者です。例えば成績処理のようなことをする場合に成績の順位を出すような処理が必要です。二次元配列をsortで降順に並び替えるのは簡単ですが、順位を出す場合は、同点の場合は同順位になりますが、それを二次元配列を使ってするにはどうしたらいいのでしょうか？indexOfでは同順位の処理はできないですよね？例えば以下のように同点の者が複数いる場合の処理方法がわかりません。生徒　点数　順位 A　　　85　　　1 B　　　82　　　2 C　　　82　　　2 D　　　82　　　2 E　　　80　　　5 F　　　78　　　6 G　　　78　　　6 H　　　76　　　8 I　　　71　　　9 J　　　70　　　10 VBAだとworksheetfunction.rankという形でVBAの関数を使えますが、GASでもそういうことはできるのでしょうか？ネットで検索してもわからないので、解決法を教えていただければ助かります。どうぞよろしくお願いいたします。

質問日時: 2024/04/04 05:43 質問者: CaveatEmptor

ベストアンサー

4

0
31

iOSのみダブルタップが必要

２つの背景画像を切り替えるスクリプトを一つのページに設定しており、どちらも別のページに設置すると、iPhoneでも正常に動作するため、競合を疑っています。おかしな挙動をするのは下記コードのfunction gazou(n){ のみです。ボタンをダブルタップする必要があり、ワンタップで機能しません。Androidとパソコンでは正常に動きます。お分かりになる方いらっしゃいますでしょうか。chatGPTにも聞いてみましたが解決せずで困っております。よろしくお願い致します。【javascript】 function gazou(n){ if(n==0) document.body.style.backgroundImage="url(bg1.jpeg)"; if(n==1) document.body.style.backgroundImage="url(bg2.jpeg)"; if(n==2) document.body.style.backgroundImage="url(bg3.jpeg)"; if(n==3) document.body.style.backgroundImage="url(bg4.jpeg)"; if(n==4) document.body.style.backgroundImage="url(bg5.jpeg)"; if(n==5) document.body.style.backgroundImage="url(bg6.jpeg)"; if(n==6) document.body.style.backgroundImage="url(bg7.jpeg)"; if(n==7) document.body.style.backgroundImage="url(bg8.jpeg)"; if(n==8) document.body.style.backgroundImage="url(bg9.jpeg)"; if(n==9) document.body.style.backgroundImage="url(bg10.jpeg)"; if(n==10) document.body.style.backgroundImage="url(bg11.jpeg)"; } 【html】 <form name="henkou"> <input type="button" value="A" onclick="gazou(0)"> <input type="button" value="B" onclick="gazou(1)"> <input type="button" value="C" onclick="gazou(2)"> <input type="button" value="D" onclick="gazou(3)"> <input type="button" value="E" onclick="gazou(4)"> <input type="button" value="F" onclick="gazou(5)"> <input type="button" value="G" onclick="gazou(6)"> <input type="button" value="H" onclick="gazou(7)"> <input type="button" value="I" onclick="gazou(8)"> <input type="button" value="J" onclick="gazou(9)"> <input type="button" value="K" onclick="gazou(10)"> </form> <button onclick="mybg()">ボタンの文字</button> <script> const arr = ["gazou1.webp","gazou2.webp","gazou3.webp"]; let cnt = 0; function mybg() { const bodys = document.querySelectorAll('main'); bodys[0].style.backgroundImage = 'url(' + arr[ cnt % arr.length ] + ')'; cnt++; } </script> 【CSS】 body { background-color: transparent!important; background-repeat: no-repeat!importan; background-position: center center!important; background-size: cover!important; background-attachment: fixed!important; } .main { background-color: transparent!important; border-color:transparent!important; background:url("gazou3.webp"); background-repeat: no-repeat; background-position: center center!important; background-size: contain!important; position:relative!important; background-attachment: fixed!important; height:150vh!important; }

質問日時: 2024/04/01 15:27 質問者: Mypetwanwan

解決済

1

0
32

jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を

jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を切り替えられるようにしたいのですが、どのようにしたら良いでしょうか。 <table><tr><td>情報１</td><td>情報２</td><td>情報３</td></tr><tr><td>情報4</td><td>情報5</td><td>情報6</td></tr></table>

質問日時: 2024/03/19 10:18 質問者: piraniaman

ベストアンサー

5

1
33

var exports = exports || {}; ← この意味を教えてください。

Google Apps Scriptの勉強をしている者です。やっと何とかわかってきたところというレベルです。どうしてもわからないことがあって、教えてもらったものの中で以下のような記述がfunction main()の前(上？)にありました。読み解こうと調べてみたのですが、まったくわかりません。今までかなりGASをネット検索してきましたが、このような記述は見た記憶もありません。わかる方は教えていただけますでしょうか。もしくはこのサイトを見たら、説明があるというのでもかまいません。ちなみにfunction main()はスプレッドシートからGmailを送信するという内容です。 // Compiled using ts2gas 3.4.4 (TypeScript 3.5.3) var exports = exports || {}; var module = module || { exports: exports }; "use strict";

質問日時: 2024/03/15 21:55 質問者: cul-de-sac

ベストアンサー

7

1
34

HTMLタグに複数のクラスを設定する方法がわからない

Javascript で HTML クラスを追加するコードを書いているのですが、参照している変数が存在しないとのエラーが発生しており、どのように書くべきか分かりません。アドバイスお願い致します。 <script> var div; var child; // class const divBoardFormPartial = document.createElement("div"); // classの追加 divBoardFormPartial.classList.add("board_form_partial"); // idの追加 divJsBoardFormPartial.id = 'js_board_form_partial_div'; </script>  <div class="board_form_partial" id="js_board_form_partial">

質問日時: 2024/03/05 23:25 質問者: 初心者サイト作成

ベストアンサー

3

0
35

Googleフォームで選択肢に応じて次の質問のプルダウンのListを変更させることは可能でしょうか？

Googleフォームで面談予約の受付フォームを作っています。プルダウンで日付を選択したら、次のプルダウンで日付に応じて面談可能な時間帯のみを表示させるということは可能でしょうか？例えば、最初の質問でプルダウンで以下の日付のどれかを選択してもらいます。 4/08(月) 4/09(火) 4/10(水) 4/11(木) 4/12(金) 4/13(土) もし最初の質問で「4/08(月)」を選んだ場合、次の質問で以下の時間帯から選択しもらう。 10:00～11:00 11:00～12:00 13:00～14:00 14:00～15:00 もし最初の質問で「4/09(火)」を選んだ場合、次の質問で以下の時間帯から選択しもらう。 14:00～15:00 15:00～16:00 16:00～17:00 17:00～18:00 というように、日付によって面談可能な時間が異なるのです。現在は、最初の質問で以下のように日付+時間帯でまとめて選択してもらうようにしています。 4/08(月) 10:00～11:00 4/08(月) 11:00～12:00 4/08(月) 13:00～14:00 4/08(月) 14:00～15:00 4/09(火) 14:00～15:00 4/09(火) 15:00～16:00 4/09(火) 16:00～17:00 4/09(火) 17:00～18:00 今のところ、GASでフォーム提出のトリガーで選択された日付＋時間帯を除いてプルダウンのListItemを更新し、重複して申し込まないようにはできていますが、日付+時間帯にすると80個ほどの選択肢になってしまうので、スマホなどで使いやすいように選択肢を減らす方法を考えています。

質問日時: 2024/03/05 13:57 質問者: cul-de-sac

ベストアンサー

3

1
36

変数名をどのようにつけるのが良いかアドバイスお願い致します

非同期通信でQ＆A掲示板を作成しています。 JavaScript appendChild で親要素に子要素を追加する際、HTMLのクラスごとに判別するできるようにしたいのですが、変数名に - や _ や空白が変数名に使えずエラーが起きておりどうすべきか悩んでおります。アドバイスお願い致します。  <div id="confirm_area" style="display: block;"> <div class="title-partial parts">  質問タイトルテスト </div> <div class="namae-partial parts">  名前テスト </div> <div class="body-partial parts"> コメントテスト </div> <div class="post-button"> <button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button> </div> </div> </div>  </div> </div>  <script> confirm_area.textContent = ''; var div; var child; // class const board_form_partial_div = document.createElement("div"); // classの追加 board_form_partial_div.classList.add("board_form_partial"); // id const js_board_form_partial_div = document.createElement('div'); // idの追加 js_board_form_partial_div.id = 'js_board_form_partial_div'; const questionHeader-partial_div = document.createElement("div"); questionHeader-partial_div.classList.add("questionHeader-partial"); div.appendChild(child); // div の末尾に child を追加 const title-partial parts_div = document.createElement("div"); title-partial parts_div.classList.add("title-partial parts"); child = document.createElement("p"); child.appendChild(document.createTextNode(title_value)); div.appendChild(child); // div の末尾に child を追加 const namae-partial parts_div = document.createElement("div"); namae-partial parts_div.classList.add("namae-partial parts"); child = document.createElement("p"); child.appendChild(document.createTextNode(namae_value)); div.appendChild(child); // div の末尾に child を追加 const body-partial parts_div = document.createElement("div"); body-partial parts_div.classList.add("body-partial parts"); child = document.createElement("p"); child.appendChild(document.createTextNode(question_value)); div.appendChild(child); // div の末尾に child を追加 const post-button_div = document.createElement("div"); post-button_div.classList.add("post-button"); child = document.createElement("button"); child.type = "button"; child.innerText = "入力画面へ戻る"; child.addEventListener("click", () => { input_area.style.display = "block"; // 空文字を入れることで要素内を空にできる confirm_area.textContent = ''; confirm_area.style.display = "none"; }); div.appendChild(child); // div の末尾に child を追加 child = document.createElement("button"); child.type = "button"; //name属性の追加・変更 child.setAttribute("name", "output"); child.innerText = "結果画面へ進む"; child.addEventListener("click", confirm_button_click); div.appendChild(child); // div の末尾に child を追加 confirm_area.appendChild(div); // confirm_area の末尾に div を追加 input_area.style.display = "none"; confirm_area.style.display = "block"; }) .catch(error => {}); } </script>

質問日時: 2024/02/28 19:44 質問者: 初心者サイト作成

ベストアンサー

4

1
37

ボタンを押したあとに画像を表示させる方法についてアドバイスお願い致します

ファイルアップロードが可能な Q＆A 掲示板を作成しており入力画面のボタン送信の際に時間がかかる為、確認画面に切り替わるまでローディングアニメーション画像を表示したいと考えております。ボタンの上に重なる形で実装したいのですが、座標を指定する方法以外で画像をボタン上に表示させる方法はありますでしょうか？座標はスマホやタブレットの端末ごとに異なる為、別の方法で考えております。 Ajax を使う方法もあると思うのですが入力画面から確認画面までを非同期通信で行っているため、速度を考えて極力避けたいです。 ※該当コード（bbs_quest_input.php） https://wandbox.org/permlink/hYhRZBA0NG6HbOIw ※ローディングアニメーション https://nagashima.kyusan-u.ac.jp/note/loading-animation/ ※送信が完了するまでローディング https://moshashugyo.com/media/loading

質問日時: 2024/02/18 22:57 質問者: 初心者サイト作成

ベストアンサー

1

0
38

出発駅A、到着駅Bを選択すると、2.3㎞と170円と返るようにしたいです。

出発駅A、到着駅Bを選択すると、2.3㎞と170円と返るようにしたいです。具体的には{ name:["A", "B"], distance: 1.5,between:1}に対して、{ between:1,fare:170 }と返るようにしたいです。実装方法がわからないです。また、これらをifで分岐させたいです。どうしたらいいのでしょうか。 <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> /** * distance : 区間距離(km) * name : 区間名 * price : 区間における乗車運賃 */ const price_table = [ { distance: 0, name: '見送り', price: { normal: 120, child: 60 } }, { distance: 3, name: '１区間', price: { normal: 150, child: 80 } }, ]; /** * name: '駅名' * distance: 次の駅までの距離 */ const stations = [ { name: 'A', distance: 1.5 }, { name: 'B', distance: 1.5 }, ]; </script> <script> $(function () { $(document).on('change', function () { var f = $('[name=from]').val(); var t = $('[name=to]').val(); // 何番目の駅かを探す let from_idx = stations.findIndex(station => station.name == f); let to_idx = stations.findIndex(station => station.name == t); // from, to が昇順になるようにする。 let from_to = [from_idx, to_idx].sort(); // どちらかが未入力の場合、もしくは駅名が見つからない場合は処理を受け付けないようにする。 if (from_to[0] < 0) { return; } // 駅間の距離を加算する。 let d = 0; for (let i = from_to[0]; i < from_to[1]; i++) { d += stations[i].distance; } // 距離の合計値による料金テーブルを探す const period = price_table.find(price => d <= price.distance); $('span[name=distance]').html(d); $('span[name=kukan]').html(period.name); $('span[name=price]').html(period.price.normal); }); }); </script> </head> <body> <div> 出発駅: <select name="from"> <option value="">--</option> <option value="A">A</option> <option value="B">B</option> </select> </div> <div> 到着駅略 </div> 距離：<span name="distance"></span>km<br /> 区間：<span name="kukan"></span><br /> 料金：<span name="price"></span>円 </body> </html> jsのプログラムサイトをいろいろ調べてみましたが、グッとくるものはなかったです。

質問日時: 2024/01/26 08:33 質問者: 福本英一

ベストアンサー

1

0
39

HTMLで作った時報アプリが動きません

HTMLとJavaScripで毎時59分55秒になったらjihou.mp3を再生するアプリをつくったのですが、59分55秒になっってもjihou.mp3は再生されませんでした。どうしてなのか教えていただきたいです。できればHTMLとJavaScriptも教えていただきたいです。よろしくお願いいたします。（以下HTML） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript Example</title> </head> <body> <span id="real-time"></span> <script> function playAudio() { var currentTime = new Date(); if (currentTime.getMinutes() == 59 && currentTime.getSeconds() == 55) { var audio = new Audio('jihou.mp3'); audio.play(); } } setInterval(playAudio, 1000); </script> </body> <script> function Time() { var realTime = new Date(); var hour = realTime.getHours(); var minutes = realTime.getMinutes(); var seconds = realTime.getSeconds(); var text = hour + ":" + minutes + ":" + seconds; document.getElementById("real-time").innerHTML = text; } setInterval('Time()',100); </script> </html>

質問日時: 2024/01/21 09:49 質問者: 優里さん

ベストアンサー

1

0
40

GASに文字列として関数を入れるとエラーがでる

GASでスプレッドシートに関数を自動で挿入する関数を作ってます。（関数で関数を挿入）しかし、”で囲んで関数を文字列として入力する（”=）

質問日時: 2024/01/17 17:13 質問者: むろ-初心者っぽい人-

解決済

3

0
41

Colorboxがうまく設置できません

Colorboxを設置できません。Colorboxのリンクを押すと、同じウィンドウ（タブ）内でその画像が開きます。どうしてでしょうか。以下HTMLです。【省略】 <head> 【省略】 <link rel="stylesheet" type="text/css" href="colorbox.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script> <script> $(document).ready(function(){ $(".group1").colorbox({rel:'group1', maxWidth:"90%", maxHeight:"90%"}); //swipe $("#colorbox").swipe({ swipeLeft:function(){ $.colorbox.next() }, swipeRight:function(){ $.colorbox.prev() }, threshold:0 }) }); </script> </head> <body> 【省略】 <div class="img_area"><div class="imgtitle1"> <div><a href="img/27/ooita1.jpg" class="ooira_IMG" title="ガランドヤ1号墳"><img src="img/27/ooita1.jpg" width="222px" alt="ガランドヤ1号墳写真" title="ガランドヤ1号墳"></a></div> <style> .imgtitle1 { position: relative; display: inline-block; } .imgtitle1 img { display: block; } .imgtitle1::after { content: "ガランドヤ1号墳"; position: absolute; bottom: 0; right: 0; background-color: white; color: black; padding: 5px; } </style> </div> <div class="imgtitle2"> <div><a href="img/27/ooita2.jpg" class="ooira_IMG" title="ガランドヤ2号墳"><img src="img/27/ooita2.jpg" width="222px" alt="ガランドヤ2号墳写真" title="ガランドヤ2号墳"></a></div> <style> .imgtitle2 { position: relative; display: inline-block; } .imgtitle2 img { display: block; } .imgtitle2::after { content: "ガランドヤ2号墳"; position: absolute; bottom: 0; right: 0; background-color: white; color: black; padding: 5px; } </style> </div> <div class="imgtitle3"> <div><a href="img/27/ooita3.jpg" class="ooira_IMG" title="ガランドヤ3号墳"><img src="img/27/ooita3.jpg" width="222px" alt="ガランドヤ3号墳写真" title="ガランドヤ3号墳"></a></div> <style> .imgtitle3 { position: relative; display: inline-block; } .imgtitle3 img { display: block; } .imgtitle3::after { content: "ガランドヤ3号墳"; position: absolute; bottom: 0; right: 0; background-color: white; color: black; padding: 5px; } </style> </div></div> 【省略】 </body> 【省略】

質問日時: 2024/01/13 16:59 質問者: 優里さん

解決済

2

0
42

Cookieに保存されない

このコードは、「textareaに入力されたテキストが改行も含めて、表示ボタンが押されたときに表示される。フォントサイズを指定することができる。ページが再読み込みされたとき、Cookieに保存されている前回のデータが復元される。」というものなのですが、実行してみてもデータが復元されません。どうしてでしょうか。できればフルのコードも含めて教えていただきたいです。よろしくお願いいたします。〈以下HTML〉 <!DOCTYPE html> <html> <head> <title>アプリ</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <main>  <form action="#" id="form"> <textarea type="text" name="content" rows="10" cols="50"></textarea><br> 文字サイズ(px): <input type="text" name="fontsz" size="3" value="20"> <input type="submit" value="表示"> </form>  <p id="output" style="font-size: 20px; white-space: pre-line;"></p> <script> // ページ読み込み時にCookieからデータを復元 window.onload = function () { let savedInput = getCookie('savedInput'); if (savedInput) { document.getElementById('output').textContent = savedInput; } }; // フォーム送信時に入力データをCookieに保存 document.getElementById('form').onsubmit = function (event) { event.preventDefault(); let inputForm = document.getElementById('form').content.value; setCookie('savedInput', inputForm, 365); // 365日間保存 document.getElementById('output').textContent = inputForm.replace(/\n/g, "\n"); }; // Cookieにデータを書き込む関数 function setCookie(c_name, value, expiredays) { let exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toUTCString()); } // Cookieからデータを読み取る関数 function getCookie(c_name) { if (document.cookie.length > 0) { let c_start = document.cookie.indexOf(c_name + "="); if (c_start != -1) { c_start = c_start + c_name.length + 1; let c_end = document.cookie.indexOf(";", c_start); if (c_end == -1) c_end = document.cookie.length; return unescape(document.cookie.substring(c_start, c_end)); } } return ""; } </script> </main> </body> <script> // submit時にイベント実行をする関数 document.getElementById('form').onsubmit = function (event) { // 再読み込み防止 event.preventDefault(); // 入力フォームの内容を取得 let inputForm = document.getElementById('form').content.value; let fontsize = document.getElementById('form').fontsz.value; document.getElementById('output').style.fontSize = fontsize + 'px'; // 入力内容を出力 document.getElementById("output").textContent = inputForm.replace(/\n/g, "\n"); } </script> </html>

質問日時: 2023/12/26 18:45 質問者: 優里さん

解決済

1

0
43

GASでGoogleフォームの自動返信システムを作成しようとしたけれど保存ができません。

GASでgoogleフォームの編集用URLを自動送信するシステムを作成しているが、エラーが出て保存できないので、教えてほしいです。（エラーメッセージが一瞬で消えるので、写真などはないです）〇ソースコード function myFunction(e) { var mail = ”; var name = ”; //回答のオブジェクトを取得 var itemResponses = e.response.getItemResponses(); //回答内容を取得 for (var i = 0; i < itemResponses.length; i++) { var itemResponse = itemResponses[i]; var question = itemResponse.getItem().getTitle(); var answer = itemResponse.getResponse(); if (question == ‘部員の氏名’){ name = answer; } if (question == ‘メールアドレス’){ mail = answer; } } var editURL = e.response.getEditResponseUrl(); //回答編集用URLを取得 // メッセージを作成 var title = ‘フォームが送信されました。’; var content = name + ‘様\n\n’ + ‘フォームが送信されました。\n’ +'\n回答を編集したいときは\n'+ editURL +'\nにアクセスしてください。'; GmailApp.sendEmail(mail, title, content); } GmailApp.sendEmail(mail, title, content); }

質問日時: 2023/12/26 18:19 質問者: むろ-初心者っぽい人-

ベストアンサー

2

0
44

コードレビューをお願いします。

私は実務経験がないためトレンドの正解がわかりません。 ajaxを使ったほうがいいよとか。ソースコードレビューをお願いします。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <script type="text/javascript"> //リスト要素の追加関数 function create_op() { let sl_from = document.getElementById('csv_from'); let sl_to = document.getElementById('csv_to'); //対象のselect取得 // selectedで選択されている値の番号が取得されます let idx = sl_from.selectedIndex; // 値を取得 let txt = sl_from.options[idx].text; var arr_idx = []; var arr_val = []; // 選択値を配列に追加 for (var i = 0; i < sl_from.length; i++) { if (sl_from[i].selected) { arr_idx.push(sl_from.options[i].value); //インデックス取得 arr_val.push(sl_from.options[i].text); //テキスト取得 } } var del = ","; // カンマ区切りテキストを取得 txt = arr_val.join(del); alert(txt); //if (sl.length < arr.length) { //selectが空の時のみ関数実行 for (let num in arr_idx) { //arrの要素数を0から順にnumに入れて繰り返し処理 let op = document.createElement('option'); //optionを新しく毎回作る op.value = arr_idx[num]; op.text = arr_val[num]; //optionのテキストに配列[num番目]の値を入れる sl_to.appendChild(op); //optionをselectに追加 } //} } //リスト要素の削除関数 function delete_op() { //対象のselect取得 let sl_to = document.getElementById('csv_to'); // 選択値を削除 let idx_end = sl_to.length- 1; for (let i = idx_end; 0 <= i; --i) { if (sl_to[i].selected) { sl_to.remove(i); } } } </script> <title>CSV 出力</title> </head> <body>  <style> .a { display: block; _display: flex; } .b { display: inline-block; _display: inline; } .c { display: inline-block; _display: inline; vertical-align: middle; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar::-moz-scrollbar { display: none; } .no-scrollbar::-o-scrollbar { display: none; } .no-scrollbar::-google-ms-scrollbar { display: none; } .no-scrollbar::-khtml-scrollbar { display: none; } </style> <center> <div class="a"> <div class="c"> <select id="csv_from" style="width:100px" size="10" class="no-scrollbar" multiple> <option value="1">会社コード</option> <option value="2">会社名</option> <option value="3">住所</option> <option value="4">TEL</option> <option value="5">設立年</option> <option value="6">登録者</option> <option value="7">登録日</option> <option value="8">更新者</option> <option value="9">更新日</option> <option value="10"></option> </select> </div> <div class="c"> <button class="a" onclick="create_op()">＞＞</button> <BR> <button class="a" onclick="delete_op()">＜＜</button> </div> <div class="c"> <select id="csv_to" style="width:100px" size="10" class="no-scrollbar" multiple> <option value="11">従業員数</option> </select> </div> </div> </center> </body> </html>

質問日時: 2023/12/17 01:07 質問者: Tank-you

解決済

3

0
45

【JS】selectでchangeした時のデータを外の変数で保持するには？

javascriptで複数のセレクトメニューを対象に、選択した時点で値を取得して、その合計を計算したいのですが、値を外にもって出ることができません、アドバイスをいただけないでしょうか？【HTML】 <select id="aPrice"> <option value="100">100</option> <option value="200">200</option> <option value="300">300</option> <option value="400">400</option> <option value="500">500</option> </select> <select id="bPrice"> <option value="1500">1500</option> <option value="1800">1800</option> <option value="1300">1300</option> <option value="2500">2500</option> <option value="4800">4800</option> </select> 【JS】 const total = 0; const aPrice = document.getElementById("aPrice"); let aVal = 0; aPrice.addEventListener("change", function () { aVal = aPrice.value; }) const bPrice = document.getElementById("bPrice"); let bVal = 0; bPrice.addEventListener("change", function () { bVal = bPrice.value; }) それぞれの取得した値、上記の場合aVal とbVal に選択した値が入っているのですが、これらの金額を外の変数 total に入れて合計を出したいのですが、それぞれの関数の外に出してしまうと値が取得できなくなってしまいます。そもそもセレクトの値を取得するにあたって方法が根本的に間違っていますでしょうか？初歩的な質問ですみません、アドバイスを頂けますと幸いです。宜しくお願いします。

質問日時: 2023/11/20 17:03 質問者: apple_mango

ベストアンサー

1

0
46

IndexedDB を使ってファイルアップロード可能な掲示板を非同期通信で作成したい

最大15MBのファイルアップロード機能付きの掲示板で考えているのですが、ローカルストレージのデータ保存容量がブラウザにより４MB 以内になる可能性があるため、IndexedDB を代用する形で考えております。動画、画像、名前、メッセージを一時的に保存するために値を取得する必要があるのですが、 <input> と <textarea> でタイプが違う値（名前とコメント）を1つのボタンで取得する方法がなく困っております。アドバイスお願い致します。 ※参考サイト https://vbnettips.blog.shinobi.jp/javascript/javascript%20indexeddb%20%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%EF%BC%93 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14179272084?__ysp=44OG44Kt44K544OI44Oc44OD44Kv44K544Gu5YCk44Gu5Y%2BW5b6XIOikh%2BaVsCBvbmNsaWNrPSIi ※値を取得したいコード <div>名前<input type="text" name="name" id="name"></div> <div>コメント<textarea type="text" name="message" id="message"></textarea></div>  <button id="buttonGet" >確認画面へ進む</button>

質問日時: 2023/11/19 15:34 質問者: 初心者サイト作成

ベストアンサー

1

0
47

React hooksが値を返して配列変数に格納するメカニズム

教えてください。プログラミング初心者です。 const [count, setCount] = useState(0); にてなぜ変数が配列の中の変数に直接格納できるのですか？この配列を定義する親の変数名は無いのでしょうか？どういうメカニズムななっているか教えていただけますでしょうか？

質問日時: 2023/11/06 17:29 質問者: ymoshimoshi

解決済

1

0
48

フロントエンドフレームワークの定数について

React、Vueなどのフレームワークで、バックエンドのAPI呼び出しや画面遷移でurlを記述することがあると思います。その時のurlは定数ファイルにまとめていたりするのでしょうか？それとも直書きでしょうか？よろしくお願いいたします。

質問日時: 2023/10/17 21:25 質問者: madose

解決済

1

0
49

画面遷移を行わずに同一ページでHTML表示を切り替えたい

wordpressで質問掲示板の回答機能を作成していて、確認画面を設けたいと考えているのですが、 Ajaxを使わず画面遷移を行わずに同一ページで表示画面→確認画面にデザインを切り替える方法はありますでしょうか？ヤフー知恵袋の回答機能のようにURLを切り替えずに確認画面で送信後にリダイレクトさせたいです。

質問日時: 2023/10/07 20:52 質問者: 初心者サイト作成

解決済

3

0
50

特定の文字列を複数抜き出したいです。関数かGAS、あるいは条件付き書式等で判別できたら教えて下さい

特定の文字列を複数抜き出したいです。関数かGAS、あるいは条件付き書式等で判別できたら教えて下さい特定の文字列以外は不規則な文章から Tから始まる6桁の文字列を抜き出したいです。例:あいうえおT12345かきくけこ →T12345 6桁の文字列は1つとは限らず、10個ほどあることもあります。 6桁の文字列が複数ある場合、それが同じこともあれば違うこともあります。例1:T12345 　 T12345 T12345 例2:T12345 　 T12345 T31245 一つ抜き出すのはIf,left,rigft関数を使って出来たのですが、二つ以上抜き出すのが分かりません。 6桁の文字列が文章の中に複数ある場合、それが同じものが複数なのか、別の文字列が混じっているのかだけでも判別できたら助かります。

質問日時: 2023/09/29 22:56 質問者: 中山あ

ベストアンサー

1

0

←前の結果
1
2
3
次の結果→

【プログラミング・Web制作】に関するカテゴリ

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

【JavaScript】に関するコラム/記事

弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...
なぜ批判コメントをするの？その心理と向き合い方をカウンセラーにきいた！

今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...