回答数
気になる
-
<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
-
フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。
入力フォームが空欄の時、フォームの外にカーソルを当てクリックすると、文字列のエラーのメッセージが表示するコードを調べています。 上記のことをすると、コードはきちんと作動していて問題ありません。 javascriptのコードの▼三角記号の部分のコードの意味が分からずにいます。 Checker = (elm)=>{の意味は、checker = function(elm){と同じ意味でしょうか? 回答よろしくお願いいたします。 ---HTMLのコード--- <body> <form action="form1.php" method="post" id="form"> 名前(必須) <input type="text" class="form1" name="name" id="name" value="" /> <div class="alert1">・名前を入力してください。</div><!--赤いテキストエラー文字列のメッセージこの付近--> <button id="submit" class="yohaku"> </button> </form> </body> ---javascriptのコード--- <script> { const form = document.getElementById('form'), inputs = [...form.querySelectorAll('input[type="text"]')], ▼Checker = (elm)=>{ ▼const cls = elm.nextElementSibling.classList; ▼const flag = elm.value.trim() == ""; if(flag) cls.add('show'); else cls.remove('show'); return flag; }; form.addEventListener('change', e=>{ if(inputs.indexOf(e.target) >= 0) Checker(e.target); }); form.addEventListener('submit', e=>{ if(inputs.map(e => Checker(e)).indexOf(true) >= 0) e.preventDefault(); }); } </script> ---文字列のエラーの:フォントなどのスタイルCSSのコード--- /* フォーム付近に出現する赤いテキストエラーメッセージ */ /* 出現文字show alert */ .alert1 { font-size: 0.6em; color: crimson; } .alert1 { visibility: hidden; }/* 文字を非表示 */ .alert1.show { visibility: visible; }/* 文字を非表示 */
質問日時: 2023/06/25 11:51 質問者: hayosato
ベストアンサー
1
0
-
プラグイン無しでContactform7にdatepickerを実装
プラグイン無しでContactform7にdatepickerを実装 Contactform7にdate(日付入力欄)を複数作成したいのですが、 下記内容では、1つの入力欄しか適用されませんでした。 複数の日付入力欄に適用するにはどのように変更したら宜しいのでしょうか? 専門家の方お助けください。 【Contactform7のテンプレートに以下記述をする】 [text datechoice id:datepicker] 【ソースのほうに以下記述を入れる。】 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script><script>jQuery(function($) { $("#datepicker").datepicker({ minDate: -1, maxDate: 0, dateFormat: 'mm月dd日' }); }); </script> 宜しくお願い致します。
質問日時: 2022/10/25 02:18 質問者: qjcyp
解決済
3
0
-
4
変数名をどのようにつけるのが良いかアドバイスお願い致します
非同期通信でQ&A掲示板を作成しています。 JavaScript appendChild で親要素に子要素を追加する際、HTMLのクラスごとに判別するできるようにしたいのですが、変数名に - や _ や空白が変数名に使えずエラーが起きておりどうすべきか悩んでおります。 アドバイスお願い致します。 <!-- 表示したいHTML--> <div id="confirm_area" style="display: block;"> <div class="title-partial parts"> <!-- title-partial + parts --> 質問タイトルテスト </div> <div class="namae-partial parts"> <!-- title-partial + parts --> 名前テスト </div> <div class="body-partial parts"><!-- body-partial + parts --> コメントテスト </div> <div class="post-button"><!-- ボタンを押せなくする --> <button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button> </div> </div> </div> <!-- type、name、id、valueの順番 --> </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
-
5
階層別の組織図の自動作成について
うちの会社の組織図はかなり特殊でして 図のように、部・課・係が階層別に分かれています。 現状は、Excelの罫線でなんとか作成していますが 頻繁に社内構造が変化するため、これをデータシートから自動生成したいと考えております。 jsのOrgChartやjqueryを用いた自動生成は実装できたのですが 階層を一つ二つ飛ばすということが実現できませんでした。 調べたところ、OrgChartにもJQueryにもそのような想定がないため、無理やりCSSでブロック要素を縮めて罫線っぽくする方法以外になかったのですが、それをすると、社内構造が変わって再生成した際に、その縮めたブロック要素が原因で罫線が乱れる問題が起こったため、没となりました。 VBAかjsどちらかで、図のような組織図を作成する方法はないでしょうか? よろしくお願いいたします。
質問日時: 2022/10/26 13:42 質問者: DDddDDdd11221122
解決済
1
1
-
6
条件に該当した時のみ定数を宣言する事はできますか
幼稚な質問で恐縮です。 条件に該当した時のみ定数を宣言する事はできますか。 当然と言えば当然ですが、次のようにif内で宣言した定数をif外で使うとエラーになります。 このような使い方は想定されていないのでしょうか function sub() { if(1) {const x = 5} console.log(x) } 分岐によって使わない定数は宣言しないようにしようとしています。
質問日時: 2023/03/15 05:55 質問者: zyousuke
ベストアンサー
8
0
-
7
2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい
下記コードにdocument.getElementById('').value;を使い1つめのボックスを見えなくしたいのですが、どのように組めばいいでしょうか? ※参考サイト https://bonoponz.hatenablog.com/entry/2020/05/12/%E3%80%90Web%E3%80%91%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%81%A7%E8%A1%A8%E7%A4%BA%E5%86%85%E5%AE%B9%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B <select name="OS"> <option value="">OSを選択</option> <option value="Windows">Windows</option> <option value="Android">Android</option> <option value="iOS">iOS</option> <select> <select name="version"> </select> <script> let versionArray = new Array(); versionArray[''] = new Array('バージョン情報'); versionArray['Windows'] = new Array('XP', 'Vista', '7', '8', '8.1', '10'); versionArray['Android'] = new Array('7 (Nougat)', '8 (Oreo)', '9 (Pie)', '10'); versionArray['iOS'] = new Array('10以下', '11', '12', '13'); document.getElementsByName('OS')[0].onchange = function () { let os = this.value; let elm = document.getElementsByName('version')[0]; elm.options.length = 0; for (let i = 0; i < versionArray[os].length; i++) { let op = document.createElement('option'); op.value = versionArray[os][i]; op.textContent = versionArray[os][i]; elm.appendChild(op); } }; window.onload = function () { document.getElementsByName('OS')[0].onchange(); }; </script>
質問日時: 2022/07/05 21:58 質問者: 初心者サイト作成
ベストアンサー
2
0
-
8
読み込んだQRコードをフォームに受け渡したい
「jsQR」とというスクリプトを用いて、HTML上にQRコードを読み込む機能を埋め込むことができました。 現在の状態はこちらになります。 https://tk19770914.xsrv.jp/qr/ 内容的には、jsQRのサンプルページがもとになっています。 詳しい内容については、ソースコードを表示してご参照ください。 現在は、ソースコードにある <div hidden><span id="outputData"></span></div> の部分に読み込まれたQRコードの内容が表示されています。 現在の状態だと、QRコードが識別できている間だけテキストが表示され、QRコードから外れると <div id="outputMessage" >QRコードを認識できません。</div>が表示されます。 今回の要望は、読み込まれたQRコードの内容を、その下の部分にあるフォームのテキスト入力欄に埋め込みたいと思っています。さらには、読み込み中のQRコードから外れても、フォームの値はそのまま埋め込まれ、再度(もしくは新しく)QRコードが読み込まれた場合、その値に上書きされるようにしたいと思っています。 なにぶん、Javascriptのコーディング経験がなく、既存のコードをアレンジすることもできません。 詳しい方、ご教授いただきたく、何卒宜しくお願い致します。
質問日時: 2023/05/18 11:18 質問者: 4179Love
ベストアンサー
1
0
-
9
初心者です。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
-
10
正規表現について質問です。条件に合う場合はtrueを返したい
すいません質問があります。 正規表現について質問です。条件に合う場合はtrueを返したいです。 以下のURLがあります。 https://abc.com/detail/12345 以下の関数があります var checkProductPage = function() { var reg = /(abc.com\/details\/)(0-9]*$))/; var check = reg.test(window.location.href); return check } checkProductPage() この場合、上記関数を実行するとtrueを返します。 さらに以下のURLがあります。 1. https://abc.com/detail/12345 ->true 2. https://abc.com/detail/12345xyz -> false 3. https://abc.com/detail/xyz12345 -> false 4. https://abc.com/detail/x12y345z -> false 5. https://abc.com/detail/12345?utm=12345 -> true 6. https://abc.com/detail/12345&utm=12345 -> false 上記に書いたとおりなのですが、1と5だけはtrueを返すようにして、それ以外のパターンはFalseを返すようにしたいです。先に書いた関数だと1はTrueですがそれ以外はすべてFalseです。 以下のように書いてみたんですがそれでもダメでした。 var checkProductPage = function() { var reg = /(abc.com\/details\/)(0-9]*$)(\?.+)?$/; var check = reg.test(window.location.href); return check } checkProductPage() 1, 5 だけをTrueを返す関数を教えてほしいです。 よろしくおねがいします。
質問日時: 2022/10/06 23:02 質問者: kemukemu2014
ベストアンサー
3
0
-
11
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
-
12
メールフォームの日付入力フォームで過去の日付で範囲指定する方法が分かりません
メールフォームの 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
-
13
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
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
-
14
二次元配列の中の各行の要素をランダムに並べ替えたいです。
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
-
15
出発駅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: '1区間', 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
-
16
スマホ上で、左右スワイプで次のページに移動させたいです
昔作ったHPをレスポンシブ対応へ修正してるのですが… 複数にわたるページ記事(例:1.html→2.html→3.HTML→4.html)で、 PC閲覧上は下部に←1.html 3ntml→というような移動リンクをつけていますが、 スマホ閲覧上では左右スワイプでも前後ページへ移動できるようにしたいです。 フレーム等は使用していないので、単純にページ全体移動するイメージです。 初心者なのでjQueryプラグインやサンプルなどを探してみたのですが辿り着けずにいます。 良い例や記載方法など教えていただけますとありがたいです! よろしくお願い申し上げます。
質問日時: 2022/11/11 17:04 質問者: mitarashi-ooo-
解決済
2
0
-
17
【Google Apps Script】「ライブラリ」が追加できなくて困っています。
【Google Apps Script】 GAS用Moment.js スクリプトID: MHMchiX6c1bwSqGM1PZiW_PxhMjh3Sh48 を Apps Scriptの新画面にある「ライブラリ」から追加できなくて困っています。 ライブラリが古くなったのでしょうか? 手順が異なるのでしょうか?
質問日時: 2022/11/10 13:29 質問者: Andro
解決済
1
0
-
18
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
-
19
①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ
①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取った情報を確認表示画面で表示して、さらに、「javascriptで同意のチェック」に同意して、ボタンをクリックしたら、情報が送信完了画面に送信されるようになっているのですが、「同意しない」に チェックを入れて、ボタンをクリックすると、勝手に送信してしまいます。 これを阻止したいのですが、どうしたらよいでしょうか? 提示コードは②の確認表示画面コードです。 画像付きのボタンです。formタグ内にonsubmit="return false"を追加すると、 ボタンが反応しないです。 <?php session_start(); if(isset($_SESSION['name'])){ $age = $_SESSION['age']; $_SESSION['token'] = base64_encode(openssl_random_pseudo_bytes(48)); $token = htmlspecialchars($_SESSION['token'], ENT_QUOTES); ?> <!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> </style> </head> <body> <form action ="LPmouth-completion-screen1.php" method ="post" name="doui_form"> <input type ="hidden" name ="token" value ="<?php echo $token ?>"> <div class="row"> <label class="col-sm-2 control-label" for="name">名前:<small><?php echo $name; ?></small></label> </div> <div class="radio_text"> <section> <label class="radio_text"> <input type="radio" name="doui" value="suru" checked>同意する </label> <label class="radio_text"> <input type="radio" name="doui" value="shinai">同意しない </label> </section> </div> <div class="auto-style1"> <!--ボタンの画像--> <button type="submit" id="soushin" name="submit" class="auto-style4" value="submit"> <img src="image2/25mouth.png" alt="確認画面へ" class="example8"/></button> </div> <script> //ボタンをクリックした時に同意しないを選択した時にエラーを発生させる var doui = document.getElementById('soushin'); doui.addEventListener('click', function() { if (document.doui_form.doui.value != "suru") { alert("同意してください。"); } else { document.doui_form.submit(); } }) </script> </form> </body> </html>
質問日時: 2022/05/10 16:45 質問者: hayosato
ベストアンサー
2
0
-
20
プログラムについて。
コンソール(コマンドプロンプト)は、人間とコンピュータの仲介をしているということでしょうか?後、ログメッセージとは、何でしょうか?ちなみに、ジャバスクリプトでハローワールドを組んだときの疑問点です。教えてくれませんか?
質問日時: 2024/04/24 21:33 質問者: メラゾーム
解決済
3
0
-
21
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"><!-- 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"> <!-- 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"> <!-- 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> <!-- type、name、id、valueの順番 --> </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
-
22
GASに文字列として関数を入れるとエラーがでる
GASでスプレッドシートに関数を自動で挿入する関数を作ってます。(関数で関数を挿入) しかし、”で囲んで関数を文字列として入力する(”=)
質問日時: 2024/01/17 17:13 質問者: むろ-初心者っぽい人-
解決済
3
0
-
23
【GAS】WEBアプリでハイパーリンクを挿入したい
GAS初心者です。 下記URLのスプレッドシートでWEBアプリを作っているのですが、 HTML表示をしたとき、URLが入力されたセルの値をハイパーリンクにする方法がわかりません。 <やりたいこと> HTML表示の「詳細」列にURLがありますが、 これをリンク付きの「表示する」というテキストに置き換えたいです。 GASの「index.html」ファイルに何らかのコードを記述するのだと思うのですが、 どうしてもわかりません。 ----------------------------- 恐れ入りますが、どなたかお分かりの方がおられましたら、 ご教授いただけましたら幸いです。 宜しくお願い申し上げます。 ■スプレッドシートのURL https://docs.google.com/spreadsheets/d/1WpNU6o1YBN_Kyxl_SqmeeOad4zrPaDhrpJTGLwiA6G8/edit?usp=sharing ■HTML表示のURL https://script.google.com/macros/s/AKfycbzyHYVKHl4to8Dqg1nDzs1DfsDdQMVBBC_q7JM1ylYeaYt3MxY4_2MF1_37MPEffcmX/exec
質問日時: 2023/03/12 19:20 質問者: whiteprelude
ベストアンサー
1
0
-
24
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
-
25
jQueryローディングアニメーションのコードの以下のURL内参考サイトで提示されている
jQueryローディングアニメーションのコードの以下のURL内参考サイトで提示されている<script>タグ内の if (sessionStorage.getItem('access')) {のaccessはどこから来るものでしょうか? CSSやHTMLにclass名accessが見当たらないです。 回答よろしくお願いいたします。 https://web-creates.com/code/jquery-loading-sessionstorage/
質問日時: 2023/07/03 18:29 質問者: hayosato
ベストアンサー
3
0
-
26
jsで質問です。 ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どの
jsで質問です。 ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どのような判定をしたら良いでしょうか。 <input type="button"value="ボタン"onclick="event()"id="test1"> <input type="button"value="ボタン"onclick="event()"id="test2">
質問日時: 2022/11/22 10:30 質問者: piraniaman
解決済
4
0
-
27
追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです
javascriptを学習しています。 追加ボタンを押した際に「[namae]さん[nickname]を登録します。よろしいですか?」 という確認ダイアログ(confirm)を挟み、 ok ボタンを押した場合のみ入力値が追記されるように変更しなさい。 ([namae]、[nickname]の部分は入力値で置換されること).という問題がありました。 キャンセルボタンを押しても追記されてしまいます。 どなたかご教授お願いいたします。 『javascript』 <script> let tuikaTimes = 0; let result = document.getElementById('result'); let hyoji = document.getElementById("tuikaBtn"); tuikaBtn.addEventListener('click', function () { let namae = document.getElementById("namae"); let nickname = document.getElementById("nickname"); if( namae.value===""||nickname.value==="") { return false; } if(!window.confirm('「'+'['+namae.value+']' + 'さん' +'['+ nickname.value +']'+ 'を登録します。よろしいですか?」')) { return false; } alert('「'+'['+ namae.value + ']' + 'さん' + '[' + nickname.value + ']'+'にて登録しました。」'); tuikaTimes++; if(tuikaTimes >= 3) { hyoji.style.visibility="hidden"; return false; } }); window.addEventListener('DOMContentLoaded', ()=>{ tuikaBtn.addEventListener('click',()=>{ let tbl=result.querySelector('table'); if(!tbl){ tbl=document.createElement('table'); result.appendChild(tbl); } const v1=namae.value; const v2=nickname.value; if(v1 && v2){ const tr=[v1,v2].reduce( (x,y)=>(x.appendChild( Object.assign( document.createElement('td'),{textContent:y})),x),document.createElement('tr')); tr.appendChild(Object.assign( document.createElement('input'),{type:'button',value:'削除',className:'del'})); tbl.appendChild(tr); namae.value=''; nickname.value=''; } }); }); document.addEventListener('click',e=>{ if(e.target.matches('.del')){ tuikaTimes--; hyoji.style.visibility="visible"; e.target.closest('tr').remove(); } }); </script> </body> </html>
質問日時: 2022/05/29 09:57 質問者: sasaki0502
解決済
6
0
-
28
プログラミング 学習
・普段からプログラミングを継続してないと忘れていきますか? ・毎年、毎年、バージョンアップする度に新しい仕組みを勉強する必要がありますか?
質問日時: 2024/07/08 04:37 質問者: youarenotalone2
解決済
7
0
-
29
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
-
30
ジャバスクリプトについて。
ジャバスクリプトで、′console.log( )′は、出力するという意味で合っていますでしょうか?教えてくれませんか?
質問日時: 2024/04/25 17:49 質問者: メラゾーム
解決済
4
0
-
31
iOSのみダブルタップが必要
2つの背景画像を切り替えるスクリプトを一つのページに設定しており、どちらも別のページに設置すると、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>情報1</td><td>情報2</td><td>情報3</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> <!-- 表示したいHTML--> <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 掲示板を作成しており入力画面のボタン送信の際に時間がかかる為、確認画面に切り替わるまでローディングアニメーション画像を表示したいと考えております。 ボタンの上に重なる形で実装したいのですが、座標を指定する方法以外で画像をボタン上に表示させる方法はありますでしょうか? 座標はスマホやタブレットの端末ごとに異なる為、別の方法で考えております。 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
-
37
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> <!-- type、name、id、valueの順番 --> <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
-
38
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
-
39
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
-
40
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
-
41
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
-
42
コードレビューをお願いします。
私は実務経験がないためトレンドの正解がわかりません。 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> <!--● ベンダープレフィックス付きの疑似要素を使う方法 (私の環境では Firefox 以外で綺麗に隠れることを確認しました) /* CSS */ --> <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
-
43
【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
-
44
IndexedDB を使ってファイルアップロード可能な掲示板を非同期通信で作成したい
最大15MBのファイルアップロード機能付きの掲示板で考えているのですが、ローカルストレージのデータ保存容量がブラウザにより4MB 以内になる可能性があるため、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> <!-- setValue() は出来ない textarea に value が設定できないから --> <button id="buttonGet" >確認画面へ進む</button>
質問日時: 2023/11/19 15:34 質問者: 初心者サイト作成
ベストアンサー
1
0
-
45
React hooksが値を返して配列変数に格納するメカニズム
教えてください。 プログラミング初心者です。 const [count, setCount] = useState(0); にてなぜ変数が配列の中の変数に直接格納できるのですか? この配列を定義する親の変数名は無いのでしょうか? どういうメカニズムななっているか教えていただけますでしょうか?
質問日時: 2023/11/06 17:29 質問者: ymoshimoshi
解決済
1
0
-
46
フロントエンドフレームワークの定数について
React、Vueなどのフレームワークで、バックエンドのAPI呼び出しや画面遷移でurlを記述することがあると思います。その時のurlは定数ファイルにまとめていたりするのでしょうか? それとも直書きでしょうか? よろしくお願いいたします。
質問日時: 2023/10/17 21:25 質問者: madose
解決済
1
0
-
47
画面遷移を行わずに同一ページでHTML表示を切り替えたい
wordpressで質問掲示板の回答機能を作成していて、確認画面を設けたいと考えているのですが、 Ajaxを使わず画面遷移を行わずに同一ページで表示画面→確認画面にデザインを切り替える方法はありますでしょうか? ヤフー知恵袋の回答機能のようにURLを切り替えずに確認画面で送信後にリダイレクトさせたいです。
質問日時: 2023/10/07 20:52 質問者: 初心者サイト作成
解決済
3
0
-
48
特定の文字列を複数抜き出したいです。 関数か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
-
49
オブジェクトから任意のプロパティを全て抽出する一番簡単な方法
いつもお世話になっています。 配列から任意の要素を抽出するにはfilter()で簡単にできますが、 これと同じようにオブジェクトから任意のプロパティを抽出するにはどうすれば良いですか。 例えば、次のようなデータがあって、 勇者のレベルが上がった時に、その時点で覚えられる呪文を全部取得する最も簡単な方法はなんですか。 呪文 = { ホイミ: {mp: 3, 覚えるレベル: {勇者: 5, 僧侶: 1}, ルーラ: {mp: 8, 覚えるレベル: {勇者: 8, 魔女: 15} } パーティー = [ 勇者: {レベル: 1, 呪文 = []}, 魔女: {レベル: 1, 呪文 = []} ]
質問日時: 2023/08/09 21:13 質問者: zyousuke
ベストアンサー
1
0
-
50
Q&Aの掲示板を作成していてヤフー知恵袋やgoo質問のように質問ごとにURLを生成したい
JavaScriptかデータベースの保存データでURLを生成したいのですが、アドバイス頂いた際にデータベースの保存データの方が一般的で良いのではないかと教えて頂きました。 Javascriptのランダム文字列についても別の方に詳しくお聞きしたところ、そちらの方がセキュリティ上は良さそうな気がしております。 どちらが良いか決めかねているためアドバイスお願い致します。 ・Javascriptについて、生成したURLをデータベースに保存する方法で、データベースがURLを持っているのでそのまま使えて楽です。 リンクURLにも使えるし、アクセスされたURLからその質問をデータベースから読み出すこともできます。 ・データベースの保存データについて、データベースに保存されているIDなどから生成する方はURLをデータベースに保存しなくていいはずです。 データベースがURLを持っていないためその都度生成処理や復号処理が必要です。 リンクURLを出力する、アクセスされたURLからIDなどへ復号(戻す)してからその質問をデータベースから読み出す必要があります。 URLをデータベースに保存してもいいとは思いますが、それならJavaScriptで生成するのと変わりありません。 ※JavascriptでURLを生成する方法 https://mebee.info/2022/11/05/post-84690/ https://k-sugi.sakura.ne.jp/javascript/5355/
質問日時: 2023/08/04 01:22 質問者: 初心者サイト作成
ベストアンサー
5
0
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
最新のコラム/記事
-
マッチングアプリで出会ったカップルは成婚率が高い!?結婚カウンセラーに聞いてみた
パートナーとの出会いの場として、もはや主流となったネット婚活やマッチングアプリ。中でも手軽に登録できるマッチングアプリは、10代から50代と幅広い年代が利用している。一方で、“相手の目的が投資関係の詐欺や...
-
メダロット:第250話「Vol.250※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
メダロット:第249話「Vol.249※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
日本古来の伝統工芸「金継ぎ」で修復した食器は前と同じように使えるの?
大切にしている食器が割れてしまったら、きっと誰もが「元に戻したい」と願うだろう。「教えて!goo」にも「割ってしまったお気に入りの食器を復活できる?」という質問があり、最適な方法について様々な意見が寄せら...
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div>のタッチ状態を維持したままラ...
-
フォームが空欄の時にフォームの外...
-
プラグイン無しでContactform7にdat...
-
変数名をどのようにつけるのが良い...
-
階層別の組織図の自動作成について
-
条件に該当した時のみ定数を宣言す...
-
2段階プルダウンで1段階目の選択を...
-
読み込んだQRコードをフォームに受...
-
初心者です。gulpでコンパイルがで...
-
正規表現について質問です。条件に...
-
jQueryでシンセサイザーを作ってい...
-
メールフォームの日付入力フォーム...
-
二次元配列を使って順位をだすとき...
-
二次元配列の中の各行の要素をラン...
-
出発駅A、到着駅Bを選択すると、2.3...
-
スマホ上で、左右スワイプで次のペ...
-
【Google Apps Script】「ライブラ...
-
jQueryで同じクラス名のものを別物...
-
①入力フォーム→②確認表示画面→③送信...
-
プログラムについて。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次のペ...
-
読み込んだQRコードをフォームに受...
-
追加ボタンを押した際に ok ボタン...
-
①入力フォーム→②確認表示画面→③送信...
-
階層別の組織図の自動作成について
-
セレクトボックスで配列を呼び出し...
-
jsonテキストデータの並び替えがで...
-
【Google Apps Script】「ライブラ...
-
二次元配列を使って順位をだすとき...
-
初心者です。gulpでコンパイルがで...
-
jQueryで同じクラス名のものを別物...
-
HTMLでサブフレームから親のスクリ...
-
Colorboxがうまく設置できません
-
セレクトを全て選択されていないと...
-
画面遷移を行わずに同一ページでHTM...
-
フォームが空欄の時にフォームの外...
-
Googleフォームで選択肢に応じて次...
-
【GAS】WEBアプリでハイパーリンク...
-
jsで質問です。 ボタンが二つ存在し...
-
GASでチェックボックスを一括offしたい
おすすめ情報