回答数
気になる
-
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
以下のコードのタイマーアプリで、今は時間が秒で設定できるようになっているのですが、時間・分でも設定できるようにしたいです。まだ整理していないので、タイマーの位置などが変ですが。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>タイマーアプリ</title> <style> form { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } label { font-size: 24px; margin-bottom: 16px; } input { font-size: 24px; padding: 8px; margin-bottom: 16px; text-align: center; } button { font-size: 24px; padding: 8px 16px; margin: 8px; } #display { font-size: 48px; margin-bottom: 16px; } </style> </head> <body> <form> <label for="time">タイマーの長さ(秒):</label> <input type="number" id="time" name="time" min="1" required> <button id="start" onclick="startTimer(event)">スタート</button> <button id="pause" onclick="pauseTimer(event)">一時停止</button> <button id="reset" onclick="resetTimer()">リセット</button> </form> <div id="display">0:00</div> <script> let timeLeft = 0; let timerId = null; let pausedTime = 0; function startTimer(event) { event.preventDefault(); if (timerId !== null) { return; } /*** ↓↓↓この辺を変えた↓↓↓ ***/ // timeLeft = parseInt(document.getElementById("time").value); if (pausedTime == 0) { timeLeft = parseInt(document.getElementById("time").value); } else { timeLeft = pausedTime } /*** ↑↑↑この辺を変えた↑↑↑ ***/ timerId = setInterval(() => { timeLeft--; if (timeLeft === 0) { clearInterval(timerId); timerId = null; //playSound(); } updateDisplay(); }, 1000); } function pauseTimer(event) { event.preventDefault(); if (timerId !== null) { clearInterval(timerId); timerId = null; pausedTime = timeLeft; document.getElementById("pause").textContent = "再開"; } else { timeLeft = pausedTime; startTimer(event); document.getElementById("pause").textContent = "一時停止"; } } function resetTimer() { if (confirm("本当にリセットしますか?")) { clearInterval(timerId); timerId = null; timeLeft = 0; pausedTime = 0; updateDisplay(); } } function updateDisplay() { const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; document.getElementById("display").textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`; } function playSound() { const audio = new Audio("timer.mp3"); audio.loop = true; audio.play(); } </script> </body> </html> このアプリにタイマーの長さ(分)とタイマーの長さ(時間)のフォームを追加したいです。時間/分/秒のどれか一つだけの入力でも動作するようにしたいです。さらに、減っていくところ(物理タイマーなら液晶)も、時間:分:秒の表示ができるようにしたいです。「ミリ秒を表示する」というチェックボックスがあって、それにチェックが入っているときは時間:分:秒:ミリ秒と表示されるようにしたいです。できればindex.htmlにそのまま貼り付けて使用することができる実際のコード全体も教えていただきたいです。よろしくお願いいたします。
質問日時: 2023/12/18 18:12 質問者: 優里さん
ベストアンサー
2
0
-
コードレビューをお願いします。
私は実務経験がないためトレンドの正解がわかりません。 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
-
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しなくて困っています。以下がそのコードです。まだ整理していないので、タイマーの位置などが変ですが。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>タイマーアプリ</title> <style> form { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } label { font-size: 24px; margin-bottom: 16px; } input { font-size: 24px; padding: 8px; margin-bottom: 16px; text-align: center; } button { font-size: 24px; padding: 8px 16px; margin: 8px; } #display { font-size: 48px; margin-bottom: 16px; } </style> </head> <body> <form> <label for="time">タイマーの長さ(秒):</label> <input type="number" id="time" name="time" min="1" required> <button id="start" onclick="startTimer(event)">スタート</button> <button id="pause" onclick="pauseTimer(event)">一時停止</button> <button id="reset" onclick="resetTimer()">リセット</button> </form> <div id="display">0:00</div> <script> let timeLeft = 0; let timerId = null; let pausedTime = 0; function startTimer(event) { event.preventDefault(); if (timerId !== null) { return; } timeLeft = parseInt(document.getElementById("time").value); timerId = setInterval(() => { timeLeft--; if (timeLeft === 0) { clearInterval(timerId); timerId = null; playSound(); } updateDisplay(); }, 1000); } function pauseTimer(event) { event.preventDefault(); if (timerId !== null) { clearInterval(timerId); timerId = null; pausedTime = timeLeft; document.getElementById("pause").textContent = "再開"; } else { timeLeft = pausedTime; startTimer(event); document.getElementById("pause").textContent = "一時停止"; } } function resetTimer() { if (confirm("本当にリセットしますか?")) { clearInterval(timerId); timerId = null; timeLeft = 0; pausedTime = 0; updateDisplay(); } } function updateDisplay() { const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; document.getElementById("display").textContent = `${minutes}:${seconds.toString().padStart(2, "0")}`; } function playSound() { const audio = new Audio("timer.mp3"); audio.loop = true; audio.play(); } </script> </body> </html> このコードを実行して、タイムを入力して、スタートボタンを押して、そこで一時停止ボタンを押して、一時停止された状態で再開ボタンを押すと続きからタイマーが始まるようにしたいのですが、最初から担ってしまいます。どうしたらいいのでしょうか。教えてください。
質問日時: 2023/12/15 19:32 質問者: 優里さん
ベストアンサー
7
1
-
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表示されました。 どうやったら、Webブラウザの戻るボタンを無効に出来るのですか?
質問日時: 2023/11/26 23:22 質問者: redminote10pro
ベストアンサー
1
0
-
【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
-
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
-
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
タグ要素から文字がはみ出た時に文字サイズを小さくする処理をしようとしている途中なのですが、 「」は簡略で書くと 親のfor文からネストして for(j=0;「テキストの幅」 < getContentWidth(「要素の幅」) ||「文字サイズが23px」 ; j++){ /* 文字を小さくしすぎたので調整でフォントサイズを1pxずつ大きくする*/ size [j] +=1; } getContentWidth()は任意の関数で以下のようにしました。 //要素のWidthからpaddingを引いてコンテンツの幅を出してreturn function getContentWidth (elem) { var styles = window.getComputedStyle(elem); return elem.clientWidth - parseFloat(styles.paddingLeft) - parseFloat(styles.paddingRight) } デバッグで、「要素の幅」は約48px < getContentWidth()の戻り値は179pxで「文字サイズ」は20pxなのですが、子のfor文に入らず、親のfor文に戻ります。 ****以下原文貼り付け*****(テキストエディタ等に貼ってみてください) var elements = document.getElementsByTagName('address'); //elements[0]だけなのは、addressタグは1つだけだから var element = elements[0].children;//address[0]=addressタグは1つ。の直下のタグ要素を取得 var text = element.textContent;//タグ要素のcontentのテキストを取得 const ctx = document.createElement('canvas').getContext('2d');//特殊なデータ加工用の変数を用意する var textWidth=ctx.measureText(text).width;//contentのテキストのwidthを取得 var size = new Array();//配列を用意して初期化する let i,j; function resize() { for (i=j= 0 , size[i]=23; i < element.length; i++) { if ( //clientWidth(Height)は、margin/border/scroll幅は含まず、paddingを含む element[i].clientHeight < element[i].scrollHeight && size[i] > 9 || element[i].clientWidth < element[i].scrollWidth && size[i] > 9){ for ( j=0; element[i].clientHeight < element[i].scrollHeight && size[j] > 9 || element[i].clientWidth < element[i].scrollWidth && size[j] > 9 ; j++){ /* 文字がはみ出すサイズが存在していたので、フォントサイズを3pxずつ小さくする*/ size[j]-=3; } for(j=0;textWidth[i] < getContentWidth(element[i]) || size[j] == 23 ; j++){ /* 文字を小さくしすぎたので調整でフォントサイズを1pxずつ大きくする*/ size[j]+=1; element[i].style.fontSize = size[j] + "px"; } }else{ for (j=0;textWidth[i] < getContentWidth(element[i]);j++) { /* 実コンテンツが要素の幅より小さいときは1pxずつフォントサイズを大きくする*/ size [j] +=1; element[i].style.fontSize = size[j] + "px"; } } } } //ブラウザを開いたとき window.onload = function(){ resize(); } //ウインドウサイズを変えたとき window.addEventListener('resize', () => { resize(); }) //コンテンツのWidthを取得する function getContentWidth (elem) { var styles = window.getComputedStyle(elem); return elem.clientWidth - parseFloat(styles.paddingLeft) - parseFloat(styles.paddingRight) } /*覚え書き用ー処理に関係なし*/ //getComputedStyle(elem).width{height}はCSSで指定した要素の幅(マージン・ボーダー・パディング含まない)で、レンダリングされたらその値を示す。
質問日時: 2023/11/10 15:52 質問者: denpataro
解決済
4
0
-
javascriptの値をformのinput hiddenに入れたい
お世話になります。 以下のvaluesのmodelの値を navigator.userAgentData .getHighEntropyValues([ "architecture", "model", "platformVersion", "fullVersionList", ]) .then((values) => (values)); formの以下のhiddenの値に入れたいのですが、 <input type="hidden" name="model" id="inputmodel"> どのようにすれば良いのでしょうか? お手数をおかけしますがご教授いただけるようでしたら幸いです。
質問日時: 2023/11/07 06:37 質問者: boroko
解決済
2
0
-
React hooksが値を返して配列変数に格納するメカニズム
教えてください。 プログラミング初心者です。 const [count, setCount] = useState(0); にてなぜ変数が配列の中の変数に直接格納できるのですか? この配列を定義する親の変数名は無いのでしょうか? どういうメカニズムななっているか教えていただけますでしょうか?
質問日時: 2023/11/06 17:29 質問者: ymoshimoshi
解決済
1
0
-
javascriptでbgmを自動再生する方法を教えてください。
<audio preload="auto" controls="controls" autoplay="autoplay" loop="loop" muted="muted"> <source src="bgm.mp3"> </audio> <script> window.addEventListener('DOMContentLoaded', function(){ const audioElement = document.querySelector("audio"); audioElement.addEventListener('loadeddata', (e)=> {audioElement.muted = true; audioElement.autoplay = true; });}); slider_volume.addEventListener('input', (e) => { audioElement.volume = 1.0; }); </script> これで表示されると再生しますがボリュームが0になってしまいます。 どこが間違っているのでしょうか?
質問日時: 2023/10/26 04:40 質問者: kkkkkjjjjj
解決済
3
0
-
このjavascriptのif文、条件式になっていないですが、どういう意味ですか?
if (element.currentStyle){ ・・・} とか別では if( document.defaultView.getComputedStyle ) { url= document.defaultView.getComputedStyle(document.body null).backgroundImage; } else if( element.currentStyle ) { url= element.currentStyle.backgroundImage; }
質問日時: 2023/10/24 21:44 質問者: denpataro
ベストアンサー
4
0
-
フロントエンドフレームワークの定数について
React、Vueなどのフレームワークで、バックエンドのAPI呼び出しや画面遷移でurlを記述することがあると思います。その時のurlは定数ファイルにまとめていたりするのでしょうか? それとも直書きでしょうか? よろしくお願いいたします。
質問日時: 2023/10/17 21:25 質問者: madose
解決済
1
0
-
画面遷移を行わずに同一ページでHTML表示を切り替えたい
wordpressで質問掲示板の回答機能を作成していて、確認画面を設けたいと考えているのですが、 Ajaxを使わず画面遷移を行わずに同一ページで表示画面→確認画面にデザインを切り替える方法はありますでしょうか? ヤフー知恵袋の回答機能のようにURLを切り替えずに確認画面で送信後にリダイレクトさせたいです。
質問日時: 2023/10/07 20:52 質問者: 初心者サイト作成
解決済
3
0
-
特定の文字列を複数抜き出したいです。 関数か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
-
JavascriptでDom XSSの脆弱性対策を行いたい
現在雑談掲示板を作成しており、ヤフー知恵袋のような入力可能な文字数をカウントする機能を考えているのですが、JavascriptのDOM-based XSS対策用にコードを組むのが難しく困っております。HTMLクラスを1つにしてifで分岐表示することは可能でしょうか? アドバイスお願い致します。 エレメント事作る=そこでDOM要素が発生の原因になるため(無限DOM)、初めは入力文字のカウントを表示させずに入力されたら残りの文字数をカウントして、制限文字数をオーバーしたら超過した文字数を表示させるようにコードを考えました。 画像のアップロードが名前、メッセージの前になるので、参考サイトのどちらのコードを使えばよいのか分からず前者を使うようにしております。 ※window.onload = function() {} は動かない原因になりうるため window.addEventListener('DOMContentLoaded', function() {} を代用するように変更しております。 ※参考サイト https://took.jp/window-onload/ ※アドバイス頂いたもの submit_button_validationだけを使って innerHTML="残り<span>"+v+"</span>文字入力できます。"; の時と、 innerHTML="span>"+v+"</span>文字超過しています。"; の時を、ifで制御すればOK ※考えたコード <div class="title-partial parts"> <!-- title-partial + parts --> <h2>名前(name)<span class="required">※必須</span></h2> <div class=parts> <input class=submit_button type="text" type="text" name="name1" id="name" data-length=32 placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>"> <div class="submit_button_validation submit_button_validation"></div> </div> <div class="body-partial parts"><!-- body-partial + parts --> <h2>コメント(comment)<span class="required">※必須</span></h2> <div class=parts> <input class=submit_button type="text" name="name2" id="message" data-length=40 placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?> <div class="submit_button_validation submit_button_validation"></div> </div> <script> function validation_submit(f) { const submit = document.getElementById("submit_button"); /* 判定は逆なので、逆に渡す */ /*JavaScriptの要素を活性または非活性にする */ submit.disabled = f?false:true; }; function validation_text(parts) { /* このpartsグループの、input=textを抽出 */ /* HTML要素を取得 */ let text=parts.getElementsByClassName('submit_button')[0]; /* バリデーション警告パーツを抽出 */ let validation=parts.getElementsByClassName('submit_button_validation')[0]; validation.style.display = 'none'; /* 例えばのチェック */ /* window.onload = function() {} を window.addEventListener('DOMContentLoaded', function() {} に変更 */ window.addEventListener('DOMContentLoaded', function() { let wao = document.getElementsByClassName('submit_button_validation'); const left = text.dataset.length-text.value.length; if (left >= 0) { /* ひとまずclassは複数配置できる形式なので、見つかった最初の1個目にアタッチ */ wao[0].innerHTML="残り<span>"+v+"</span>文字入力できます。"; text.value.length === 0; } else { /* そのまま、2個目にアタッチ */ wao[1].innerHTML="<span>"+v+"</span>文字超過しています。"; } }) }; /* バリデーション条件判断部分 */ 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); }; /* DOM構築が終わってから呼び出される初期化関数 */ function init() { // let text = document.getElementById('submit_button'); // text.oninput = e_text; /* ↑これを、idじゃなくてclass対応に変更↓ */ /* class=parts内の class=submit_buttonに対して設定 */ let parts = document.getElementsByClassName('parts'); for (let i=0;i<parts.length;i++) { parts[i].getElementsByClassName('submit_button')[0].oninput = validation; } validation(); }; window.onload = init; </script>
質問日時: 2023/09/24 21:20 質問者: 初心者サイト作成
ベストアンサー
2
0
-
jQuery . プログラミング 助けて下さい 変数「$displayslide」からactiveク
jQuery . プログラミング 助けて下さい 変数「$displayslide」からactiveクラスを 取り除く理由がわかりません。 画像をご確認ください(progateのjQuery講座、上級編です) 「次へ」を押すと次の画像へ、「前へ」を押すと前の画像にいくスライドを作成しています。 4枚の画像があり、番号を押すとその番号の画像に切り替わります。 また、[次へ」[前へ」を押すことで、前後の画像が表示されます。 はじめに、 全画像に「display:none」のcssを使って 非表示にしておきます。 表示したい画像に「display:block」を含んだ「.active」クラスを移動させることで、選んだ画像のみを表示しています。 ここで質問です。 選んだ画像にactiveクラスが移動して、そのactiveクラスを 変数$displayslideに代入しています。 displayslideからactiveクラスを取り除いたら、空っぽの変数になるはずなのに、その後のコードで、nextとprevを使って上手にdisplayslideを使える理由がわかりません。 displayslideは、activeクラスを取り除かれたとしても、かつてactiveクラスがあった場所のことを記憶しているのですか?→それ故に「次へ」を押したときに、今表示されている画像、つまりactiveクラスを持っている画像の次の画像にactiveが移動して表示されてくれるのでしょうか? ちなみに、変数$displayslideからactiveクラスを取り除くコードを消去すると、「次へ」のボタンを押したときに1番目の2番目の画像が両方出ます。3番の画像が表示された状態で「次へ」を押すと、3番と4番の画像が両方表示されてしまいます。 ここでは、4枚目の画像が表示されているときに[次へ」を押すと何も表示されなくなり、1枚目の画像が表示されているときに「前へ」を押しても、同じく何も表示されなくなりますが、ここでは考えないものとしてください。 写真のコードは正しいコードです。
質問日時: 2023/09/08 23:07 質問者: エビフライとたぬき
ベストアンサー
2
0
-
【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法
WEBページ内にFAQコーナーを作っています。 下記のようにプルダウン式で質問部分(Q.)のみを表示させ、回答部分(A.)は非表示にしているのですが ここに検索機能を掛け合わせて、Q.もしくはA.にヒットする文字列があった場合、 もとのFAQのレイアウトデザインを生かしたまま、ヒットする文字列のあるQ&Aのみを表示させるには どのような検索スクリプト、および「search-result」部分のコードを書けばよいのか教えていただけないでしょうか。 とりあえず、現状下記のように記述しているのですが、まずはサーチ機能が走りません。 (当方javaScriptは全然学んでおらず、いろいろなサイトからつぎはぎでコードを持ってきては繋げているので、いらないものが残り、必要なものが欠けている頓珍漢なコードなんだろうと思います 汗) <style> /*-------- search box ----------*/ .search-area input[type="text"] { padding: 5px 5px 3px; font-size: 16px; border: 1px solid #D6D6D6; } .search-area input[type="text"]:focus { background: #F9F9F9; } .hit-num__text span { font-weight: bold; } #search-result__list { } #search-result__list span { display: inline-block; margin-right: 15px; padding: 5px; background: #F2F2F2; } .target-area .hidden, { display: none; } /*-------- FAQ アコーディオンメニュー --------*/ .tble_FAQ { margin: 30px auto; counter-reset: numFaq; } .FAQ_body + .FAQ_title { margin-top: 5px; } .FAQ_btn { position: relative; display: block; width: 100%; padding: 10px 60px 10px 15px; text-align: left; background-color: #8f7e68; color: #fff; font-size: 16px; border: 2px solid #8f7e68; cursor: pointer; transition: .25s; } .FAQ_btn:before { display: inline-block; float: left; margin: 0 10px 10px 0; width: 30px; background: tan; padding: 3px; text-align: center; line-height: 30px; font-size: 18px; font-family: sans-serif; color: white; font-weight: 800; counter-increment: numFaq; content: "Q" counter(numFaq) "."; } .FAQ_btn:after { content: '+'; position: absolute; display: block; top: 10px; right: 24px; font-size: 24px; font-family: sans-serif; font-weight: 1200; line-height: 30px; } .FAQ_btn:focus, .FAQ_btn:hover { background-color: #fff; color: #8f7e68; } .FAQ_btn--active::after { content: none; } .FAQ_body { display: none; padding: 14px; border: 1px solid #ddd; } .FAQ_body > *:last-child { margin-bottom: 0; } .FAQ_body--active { display: block; } .FAQ_text { margin-bottom: 20px; font-size: 1.6rem; } </style> <!--検索窓--> <div class="search-area"> <form onsubmit="return false;"> <input type="text" id="search-text" placeholder="検索ワードを入力"> </form> <div class="search-result"> <div class="search-result__hit-num"></div> <div id="search-result__list"></div> </div> </div> <!--検索窓のスクリプト--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script> // 検索ボックス $(function () { searchWord = function(){ var searchText = $(this).val(), // 検索ボックスに入力された値 targetText; $('.target-area td,dd').each(function() { targetText = $(this).text(); // 検索対象となるリストに入力された文字列が存在するかどうかを判断 if (targetText.indexOf(searchText) != -1) { $(this).removeClass('hidden'); } else { $(this).addClass('hidden'); } }); }; // searchWordの実行 $('#search-text').on('input', searchWord); }); <script>//FAQプルダウンのscript $(document).ready(function () { $(".FAQ_btn").on("click", function(){ $(this).toggleClass("FAQ_btn--active"); $(this).parent("dt").next().toggleClass("FAQ_body--active"); }); }); </script> <div class="target-area tble_FAQ "> <dl> <dt class="FAQ_title"> <button class="FAQ_btn" type="button">あなたの好きな果物は</button> </dt> <dd class="FAQ_body"> <p class="FAQ_text"> リンゴとバナナ </p> </dd> <dt class="FAQ_title"> <button class="FAQ_btn" type="button">あなたの好きな料理は</button> </dt> <dd class="FAQ_body"> <p class="FAQ_text"> リンゴパイ、ピザ、魚 </p> </dd> <dt class="FAQ_title"> <button class="FAQ_btn" type="button">あなたのペットはなんですか</button> </dt> <dd class="FAQ_body"> <p class="FAQ_text"> 金魚 </p> </dd> </dl> </div>
質問日時: 2023/09/06 14:02 質問者: あさこす
ベストアンサー
2
0
-
JavascriptでXSSの脆弱性への対策を行いたい
JavascriptのXSS対策として以前アドバイス頂いたようにinnerHTMLでHTMLのエスケープ処理コードを書いてみたのですが、正しいのか分かりませんアドバイスお願い致します。 Document.createTextNodeを代用する方法もアドバイス頂いたので考えてみたのですが、使い方が難しく既存のHTMLにあっているのか心配です… ※アドバイス頂いた質問 https://oshiete.goo.ne.jp/qa/13578040.html ※名前HTML <div class="msg_partial">あと<strong>50</strong>文字</div> ※コメントHTML <div class="msg_partial">あと<strong>500</strong>文字</div> ※該当コード <h2>名前<span class="required">※必須</span></h2> <input class="length_input" data-maxlength="<?php echo MAX_LENGTH::NAME; ?>" type="text" name="namae" id="name" placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>"> <div class="msg_partial"></div> <h2>コメント<span class="required">※必須</span></h2> <textarea class="length_input" data-maxlength="<?php echo MAX_LENGTH::MESSAGE; ?>" name="message" id="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea> <div class="msg_partial"></div> ※エスケープ処理を追加 function lengthCheck() { const left = this.dataset.maxlength - this.value.length; if (left >= 0) { const a = document.querySelectorAll('msg_partial'); return a.innerHTML; this.nextElementSibling.innerHTML = '<strong>' + escapeHTML(left) + '</strong>文字'; this.dataset.submit_disabled = this.value.length === 0; } else { const b = document.querySelectorAll('msg_partial'); return b.innerHTML; this.nextElementSibling.innerHTML = '<strong>' + escapeHTML(-left) + '</strong>文字超過しています'; this.dataset.submit_disabled = true; } _________________________________________________________ ※Document.createTextNodeを利用したもの <script> function lengthCheck(text) { const newtext = document.createTextNode(text); msg_partial = document.querySelectorAll("msg_partial"); const left = this.dataset.maxlength - this.value.length; if (left >= 0) { this.nextElementSibling.innerHTML = 'あと<strong>' + addTextNode('left') + '</strong>文字'; this.dataset.submit_disabled = this.value.length === 0; } else { this.nextElementSibling.innerHTML = '<strong>' + addTextNode('-left') + '</strong>文字超過しています'; this.dataset.submit_disabled = true; } msg_partial.appendChild(newtext); } </script>
質問日時: 2023/08/31 22:28 質問者: 初心者サイト作成
解決済
2
0
-
JavascriptでDOM-based XSSの発生源となるinnerHTMLを変更したい
参考サイトを見るとHTMLElement.innerHTMLは脆弱性があるようで対策が必要なようですが、コードをどのように変更すればよいか分かりません… アドバイスお願い致します。 ※参考サイト https://gihyo.jp/dev/serial/01/javascript-security/0006 <script> function lengthCheck() { const left = this.dataset.maxlength - this.value.length; if (left >= 0) { this.nextElementSibling.innerHTML = 'あと<strong>' + left + '</strong>文字'; this.dataset.submit_disabled = this.value.length === 0; } else { this.nextElementSibling.innerHTML = '<strong>' + -left + '</strong>文字超過しています'; this.dataset.submit_disabled = true; } let disabled = false; for (let i = 0; i < length_input.length; i++) { if (length_input[i].dataset.submit_disabled === "true") { disabled = true; } } submit_button.disabled = disabled; } /* カメラ画像をファイルアップロード時に非表示にする */ const attach = document.querySelectorAll('.attach'); const del = document.querySelectorAll('.attachdel'); const clear = document.querySelectorAll('.attachclear'); const viewer = document.querySelectorAll('.viewer'); const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像 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.readAsDataURL(attach[i].files[0]); } }); clear[i].addEventListener('click', () => { attach[i].value = ""; del[i].value = "1"; viewer[i].innerHTML = ""; changeImg[i].classList.remove('hideItems'); }); } </script>
質問日時: 2023/08/29 22:11 質問者: 初心者サイト作成
ベストアンサー
2
0
-
JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えてほしいです
特定URLのパスと一致した時、特定要素を変更するコードの書き方を教えて欲しいです。 例えば各ページに「申し込み」というボタンがあるとして、/bbb/のページだけ、「申し込み無料」と変更する場合、JavaScriptでどのようなコードを書けば良いのでしょうか。 https://goo.ne.jp/aaa/ →申し込み https://goo.ne.jp/bbb/ →申し込み無料 https://goo.ne.jp/ccc/ →申し込み ちなみにJavaScript初心者で、HTMLはほぼ分かります。
質問日時: 2023/08/25 21:43 質問者: UT-1049
解決済
2
0
-
助けてください!スパムメールがとんでもなく大量に届きます。
スパムメールについて詳しい方アドバイス頂けないでしょうか? 現在サイトの申し込みフォームから大量のスパムメールが届くようになってしまったのですが、原因が分からずお助け願います。 まず、フォーム自体には大量に必須項目があり、また名前などの項目には、pattern="[^\x20-\x7E]*"の指定があり、半角英数のみなどは弾かれる設定です。 もちろん、それ以外にもjQuery:「validationEngine」の入力チェックでclass="validate[required]"必須の判定などを行っているのですが、これらの項目に半角英字のみがセットされていたり、必須の為空禁止なのに、空のままの状態で送信されてきます。 これらはどういった事が原因になっているのでしょうか? javascriptなどの判定ではだめという事なのでしょうか? フォームの流れとしては、index.htmlで申し込み、チェック通れば thanks.php に遷移してこちらでメールの送信などを行っております。 もちろん直接thanks.phpへはアクセスできないです。 こういった状況で、必須や空でメール送信が行われてしまうのは、どのような原因が考えられますでしょうか? 宜しくお願いいたします。
質問日時: 2023/08/10 16:32 質問者: apple_mango
解決済
3
1
-
オブジェクトから任意のプロパティを全て抽出する一番簡単な方法
いつもお世話になっています。 配列から任意の要素を抽出するにはfilter()で簡単にできますが、 これと同じようにオブジェクトから任意のプロパティを抽出するにはどうすれば良いですか。 例えば、次のようなデータがあって、 勇者のレベルが上がった時に、その時点で覚えられる呪文を全部取得する最も簡単な方法はなんですか。 呪文 = { ホイミ: {mp: 3, 覚えるレベル: {勇者: 5, 僧侶: 1}, ルーラ: {mp: 8, 覚えるレベル: {勇者: 8, 魔女: 15} } パーティー = [ 勇者: {レベル: 1, 呪文 = []}, 魔女: {レベル: 1, 呪文 = []} ]
質問日時: 2023/08/09 21:13 質問者: zyousuke
ベストアンサー
1
0
-
JavaScript?jQuery?で書き方を教えてください。 初心者です。 AAAという要素をステ
JavaScript?jQuery?で書き方を教えてください。 初心者です。 AAAという要素をステータスによって、表示、非表示にしたいです。 ステータスが900またら100または300の時だけ、AAAを非表示、それ以外の場合は表示 にするにはどうやって書けば良いでしょうか? サンプルコードはステータス900の場合のみなので、or100or300を足せば良いとは思うのですが、書き方が悪かったのかうまく動かなくて…教えてください! function () { if ($('#Status').val() === '900' ) { $('#AAA').hide(); } else { $('#AAA').show(); } }
質問日時: 2023/08/04 22:09 質問者: 彩いろどり
ベストアンサー
2
0
-
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
-
Python Java,Springフレームワークの習得
Python Java,Springフレームワークの習得をしてみようと思っているのですが それを習得したらどう言う業務に繋がりますか? 医療統計などではR言語またはSASを使った業務、SQLを駆使したデータを抽出などの業務に役立てたいのですが、Python Java,Springフレームワークを習得することでカバーできますか? また違うことでしょうか?
質問日時: 2023/08/02 15:28 質問者: タコ姫
ベストアンサー
1
0
-
配列の1要素を代入した変数を使って元の配列要素を削除できるか
いつもお世話になっています。 配列の1要素を代入した変数を使って、元の配列要素を削除できますか。 例えば、 const arr = [{typ: '肉', nam: 'ステーキ'}, {typ: '肉', nam: 'ハンバーグ'}], elm = arr[i] とした時、後からelmを使ってarrの要素を削除するにはどうすれば良いですか。
質問日時: 2023/07/28 03:34 質問者: zyousuke
ベストアンサー
1
0
-
javascript作成してます。ラジオボタンで判定するコードを書いてます。
ラジオボタンで選択されている値が等しいか判定し、出力はalert()で出力する関数を定義する。 HTML 側でラジオボタンが選択されていない場合は、「ラジオボタン未選択エラー」を alert()で出力する。 書きました。上手くいきませんなんでなのでしょう 以下のコードです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function Kuji(name) { var flag = false; var radios = document.getElementsByName(name); var random = Math.floor(Math.random() * radios.length); var result = ""; for(var i = 0; i < radios.length; i++) { if(radios[i].cheked) { result = radios[i].value; } } if(result == random) { alert("当たり\n正解:"+random); } else { alert("外れ\n正解:"+random); } { alert("ラジオボタン未選択エラー"); } } </script> </head> <body> <form name = "fm"> <input type = "radio" name = "grp" value = "0"> 0 <input type = "radio" name = "grp" value = "1"> 1 <input type = "radio" name = "grp" value = "2"> 2 <input type="button" value ="選択結果" onclick="Kuji('grp')"> </form> </body> </html>
質問日時: 2023/07/18 11:03 質問者: goo-kaito-desu
解決済
1
0
-
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
-
Google scriptについて 至急scriptを作成して欲しいです! 現在、Googlefor
Google scriptについて 至急scriptを作成して欲しいです! 現在、GoogleformのGASから送信後、指定されたスプレッドシートを複製して、その複製したシートに送った回答内容を記載するというGASを作成しているのですが、複製までは上手く行きましたが、フォームの回答を複製したスプレッドシートに記入が上手く行きません! 1回解答する度に新たな複製したシートに回答を記入するscriptを書いて頂きたいです!! 【要は1つの回答を1つのスプレッドシートで保存したいです】 よろしくお願い致します!!
質問日時: 2023/07/01 20:08 質問者: keyITH
解決済
1
0
-
addEventListener()でリスナー関数に名前を付ける構文を教えてください
いつもお世話になっています。 addEventListener()でリスナー関数に名前を付ける構文を教えてください。 例えば、 document.addEventListener('keydown', fnc = (e) => {console.log(e.key)}) のように書けば、後でリスナー関数を参照できる事までは分かったのですが、 これを、変数を使わずに、 addEventListener('keydown', function fnc(e) {console.log(e.key)}) のような書き方は出来ますか??? ちなみにこの書き方だと、後で参照しようとするとfnc is not definedとなります。
質問日時: 2023/07/01 17:31 質問者: 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
-
セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています
javascript 2つのセレクトボックスを全て選択されていないと、「テキストによるエラーメッセージを表示させるコード」を調べています。 該当コードは<script>■■四角の記号の部分です。 セレクトボックスを2つとも未選択でsubmitを押すと、アラートのメッセージとテキストエラーによるメッセージ2つが同時に表示されるようになっています。 コードはきちんと起動します。 該当部分のdocument.querySelector('.err')?.remove();の意味が理解できずにいます。 insertAdjacentHTMLで出したテキストエラーをセレクトボックスが空欄でない時に非表示にするとい解釈のようですが、あってますでしょうか? class名やid名に('.err')?という名前は使用していませんがドットに.errとクエスチョンマーク?とはどういう意味なのでしょうか? 条件演算子の?でしょうか条件演算子の構文で変数 = 条件 ? 値1 : 値2;の構文とも違うようですし。 分からずにいます。回答よろしくお願いいたします。 ---HTMLのコード--- <body> <form action="form1.php" method="post" id="form"> 選択項目①: <select id="fruits" class="select1" name="fruits"> <option value="">果物を選択する</option> <option value="リンゴ">>リンゴ</option> </select> 選択項目②: <select id="fruits2" class="select1" name="fruits2"> <option value="">食事を選択する</option> <option value="ごはん">>ごはん</option> </select> <div class="alert15"></div><!--alert15 2つのフォーム全て記入がない場合ここにテキストエラーを表示する--> <button id="submit" class="yohaku"> </button> </form> ---javascriptののコード--- <script> const form = document.querySelector('#form'); const fruits = document.querySelector('#fruits'); const fruits2 = document.querySelector('#fruits2'); // セレクトボックスを選択されてないとアラートによるエラーメッセージを表示 form.addEventListener('submit', function(event) { let msg = ""; if (fruits.value == "") msg += "選択項目①:※選択項目①を選択して下い。\n"; if (fruits2.value == "") msg += "選択項目②:※選択項目②を選択してください。\n"; if (msg != "") { event.preventDefault(); alert(msg); } }); </script> ■■ <script> // 2つとも全て選択されてないとテキストによるエラーメッセージの表示 form.addEventListener('submit', e=>{ document.querySelector('.err')?.remove(); document.querySelector('.alert15').insertAdjacentHTML('afterend',`<span class="err">※選択項目①と選択項目②を全て選択して下さい。</span>`); },true); </script> </body>
質問日時: 2023/06/22 15:48 質問者: hayosato
ベストアンサー
2
0
-
sessionStorageを調べています。
入力フォームに入力された値をsubmitを押したら、次の確認画面から前のページに戻った時も、入力されているデータを保持するコード書いています。 以下は調べたコードですが、コードの意味は大まかに把握できていますが、sessionStorageにデータを保存するまでの流れを正確に理解できていません。 <script>タグ内に▼三角の記号部分のコードはsesstionStorageにデータを保存するために、この場合▼の部分のコードは必要なのでしょうか? また、♦の部分を指定するには、まず最初に、■の部分のコードを書かなければいけないという解釈であっていますでしょうか? ※PHPはを使った方がよいですが、今は練習なので、使っていません。 ---HTMLのコード--- <body> <form action="form1.php" method="post" id="form"> 名前:<input type="text" class="form1" name="name" id="name" value="" /> ふりがな:<input type="text" class="form1" name="furigana" id="furigana" value="" /> 選択: <select id="fruits" class="select1" name="fruits"> <option value="">果物を選択する</option> <option value="">リンゴ</option> </select> <button id="submit" class="yohaku"> </button> </form> </body> ---javascriptのコード--- <script> ▼const key = 'date_key'; ▼const form = document.querySelector('#form'); ▼const name = document.querySelector('#name'); ▼const furigana = document.querySelector('#furigana'); form.addEventListener('change', function() { ♦if (name.value != "") sessionStorage.setItem('name', name.value); ♦if (furigana.value != "") sessionStorage.setItem('furigana', furigana.value); ♦if (fruits.value != "") sessionStorage.setItem('fruits', fruits.value); }); let val1 = sessionStorage.getItem('fruits'); if(val1!== null)fruits.value = val1; ■name.value = sessionStorage.getItem('name'); ■furigana.value = sessionStorage.getItem('furigana'); </script>
質問日時: 2023/06/20 12:41 質問者: hayosato
ベストアンサー
1
0
-
アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします
ファイルのアップロード機能を作成していて、アップロードする場所にカメラの画像を配置しているのですが、ファイルをアップロードするとカメラ画像の下に画像や動画やpdfが表示されてしまうため、 カメラ画像の上にアップロードファイルを表示したいと考えております。 画像、動画、PDFで分岐するコードを書きたい場合、どのように書けばよいのでしょうか? <style> /* 通常時 */ form > div { display: flex; } .contents-selector-button { position: relative; margin: .3em; } .contents-selector-button label img {/*カメラ画像に対してのcss*/ width: 200px; height: 100px; } .contents-selector-button input { display: none; } /* 画像、動画、PDF表示時のレイアウト */ .contents-selector-button.contents-on label { visibility: hidden; } .contents-selector-button.contents-on .viewer { position: absolute; top:0; left: 0; width: 100%; height: 100px; overflow: hidden; } </style> </head> <body> <form method="post"> <div> <div class="contents-selector-button"> <label> <div><img src="img/camera.jpg"></div> <input type="file" accept=".png, .jpg, .jpeg, .pdf, .mp4"> </label> <input type="hidden"> <button type="button">clear</button> <div class="viewer"></div> </div> </div> </form> <script> (()=>{ const fileTypes = ['image/jpeg','image/png','video/mp4','application/pdf'], wrap = document.querySelector('form > div'), P = e => e.closest('.contents-selector-button'), V = e => P(e).querySelector('.viewer'), C = (e, s) => P(e).classList[s]('contents-on'); for(let i = 0; i<3; i++) wrap.appendChild(wrap.firstElementChild.cloneNode(1)); /* クリアボタン */ wrap.addEventListener('click', (e, t = e.target) => { if(t.nodeName != 'BUTTON' || t.type != 'button') return; V(t).innerHTML = ''; C(t, 'remove'); }); /* 画像、動画、PDF登録 */ wrap.addEventListener('change', (e, t = e.target) => { if(t.nodeName != 'INPUT' || t.type != 'file') return; if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return; /* ここから分岐させたい */ /* 画像の場合 */ wrap.addEventListener('change', (e, t = e.target) => { if(t.nodeName != 'INPUT' || t.type != 'file') return; if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return; const img = document.createElement('img'); img.src = URL.createObjectURL(t.files[0]); img.style.height = '100px'; V(t).appendChild(img); C(t, 'add'); }); })(); /* 動画の場合 */ wrap.addEventListener('change', (e, t = e.target) => { if(t.nodeName != 'INPUT' || t.type != 'file') return; if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return; const img = document.createElement('video'); video.src = URL.createObjectURL(t.files[0]); video.style.height = '100px'; V(t).appendChild(video); C(t, 'add'); }); })(); /* PDFの場合 */ wrap.addEventListener('change', (e, t = e.target) => { if(t.nodeName != 'INPUT' || t.type != 'file') return; if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return; const img = document.createElement('pdf'); video.src = URL.createObjectURL(t.files[0]); video.style.height = '100px'; V(t).appendChild(pdf); C(t, 'add'); }); })(); </script>
質問日時: 2023/06/17 19:12 質問者: 初心者サイト作成
解決済
4
0
-
javascriptのちょっとした動作不良(原因は突き止めたのですが)
HTMLで、ボタンとテキストボックスのペアが複数あり、ボタンを押すと隣にあるテキストボックスの値をクリップボードにコピーし、コピーした文字列を選択状態にした後で「コピー完了」とのアラートを出するjavascriptをChatGPTで生成してもらいましたが、以下のサンプルですと、テキストの選択状態が外れてしまいます。 formタグをを外すと意図したように動くのですが・・。 <form method="post" action=""> (注:本番環境では、action内は、<?php $_SERVER['PHP_SELF'] ?>となってます) なお、MS Edgeでだけ動作すれば十分です。些細な修正で直らないものでしょうか? <html> <head> <script> function copyToClipboard(inputId) { // テキストボックスの値を取得 var input = document.getElementById(inputId); var text = input.value; // テキストをクリップボードにコピー navigator.clipboard.writeText(text) .then(function() { // コピー完了時の処理 input.select(); alert("コピー完了"); }) .catch(function(error) { // エラーハンドリング console.error("クリップボードへのコピーに失敗しました: ", error); }); } </script> </head> <body> <form method="post" action=""> <input size="30" type="text" id="input0" value="テスト文字列000"><button onclick="copyToClipboard('input0')">コピー</button><br> <input size="30" type="text" id="input1" value="テスト文字列111"><button onclick="copyToClipboard('input1')">コピー</button><br> <input size="30" type="text" id="input2" value="テスト文字列222"><button onclick="copyToClipboard('input2')">コピー</button> </form> </body> </html>
質問日時: 2023/06/15 19:58 質問者: litton101
ベストアンサー
1
0
-
javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。
javascriptで入力フォームが空欄の時に送信ボタンを押すと、アラートによるエラーを出すコードを書いています。 このコードできちんと起動します。 <script>タグ内の、let msgで""の空白の変数を指定して、その下のコード if (email.value == "")の意味は、セレクト名emailのフォームが空白ならばメールアドレスが入力されていません、というエラーを出してください・・・という意味ですよね。 しかしその次の msg += "メールアドレスが入力されていません"; msg+=の変数msgも空白という意味のようですが、空白とい意味のmsgの変数に"メールアドレスが入力されていません"を結合させる理由は、なんでしょうか? msgはこの場合単純に入力フォームの空白のことを意味するのでしょうか?それともmsgの意味は付属画像にあるような、ブラウザのアラートのグレーの四角い板でしょうか? 回答よろしくお願いいたします。 <body> <form action="form1.php" method="post" id="form"> メールアドレス <input type="text" class="form1" name="email" id="email" value="" /> <button id="submit" class=""></button> </form> </body> <script> form.addEventListener('submit', function(event) { let msg = ""; if (email.value == "") msg += "メールアドレスが入力されていません"; if (msg != "") { event.preventDefault(); alert(msg); } }); </script>
質問日時: 2023/06/13 17:58 質問者: hayosato
ベストアンサー
2
0
-
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
-
二次元配列の全要素の全要素を区切り文字無しで連結する最も単純な書き方を教えてください
いつもお世話になっています^^; 例えば[[0, 1], [2, 3]]という二次元配列の全要素の全要素を区切り文字無しで連結して、 '0123'という文字列を得るにはどのように書けばよろしいですか。 join('')だと'0,12,3'となってしまいます。
質問日時: 2023/06/09 12:51 質問者: zyousuke
ベストアンサー
3
0
-
Javascriptが機能せず原因が分からないので教えて頂きたいです
掲示板の入力フォームを作成していて、(メッセー ジフォームの)500文字以内であと〇文字、500文字以上で〇文字超過していますと表示させたいのですが、文字数のカウントが動いていないのか表示されず、500文字超えた場合に確認ボタンを押せないように制御するコードも機能していません。 原因は分かりますでしょうか? ※エラー文 Uncaught SyntaxError: Missing initializer in const declaration ※該当コード <form method="post"> <div> <label>名前(任意)</label> <input type="text" name="namae" placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>"> </div> <div> <label>コメント(必須)</label> <label for="message">文字を入力</label> <textarea id="message" name="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea> </div> <div class="msg" id="warningMessage"></div> (略) <div><!-- ボタンを押せなくする --> <button type="submit" name="mode" id="submit-btn" value="confirm">確認する</button> </div> <!-- type、name、id、valueの順番 --> </form> <script type="text/javascript"> const message = document.getElementById('message'); // IDを指定してtextareaを取得 const msg = document.getElementById('warningMessage'); // 超過文字数を表示する要素 const submitBtn = document.getElementById('submit-btn'); //ボタン要素 const maxLength = 500; // 未満なら送信可能 message.addEventListener('input', () =>{ // 入力された文字数に応じて処理する // 入力可能文字数 const inputLimit = maxLength - message.value.length; msg.classList.remove('warning-color'); msg.textContent = 'あと' + inputLimit + '文字'; submitBtn.disabled = false; // 入力された文字が許容をオーバーしていたら加工する if(inputLimit < 0){ msg.classList.add('warning-color') msg.textContent = (-inputLimit) + '文字超過しています'; // inputLimitがマイナスなので-をつけてプラスにする submitBtn.disabled = true; } }); </script>
質問日時: 2023/06/04 14:50 質問者: 初心者サイト作成
ベストアンサー
3
0
-
Wordpressでヤフー知恵袋やgoo質問のような回答ページを作成したいです
同一ページで入力→確認→送信と行いたいのですが、Wordpressのセキュリティ対策上Javascriptとphpの間ではデータを送信することができません。この時点でA jaxを使えないことが分かっているのですが、そのほかの方法で実装する方法を調べても良い方法が見つかりませんでした。 何か良い方法はありますでしょうか? ※現在のコード https://wandbox.org/permlink/JGyiJSeIbExI3IRA
質問日時: 2023/06/02 22:38 質問者: 初心者サイト作成
ベストアンサー
4
0
-
任意の変数が任意の値になった瞬間に停止して該当コードを表示する事はできますか
いつもお世話になっています。 DevToolsの機能などで、任意の変数が任意の値になった瞬間に停止して該当コードを表示する事はできますか。 そのやり方を教えてください。 変数の値がいつの間にかNaNになっていて、しかも再現性が無く同じ操作をしても大丈夫な時もあり、これが、いつどこで発生しているのか突き止めたいのです。
質問日時: 2023/05/22 16:19 質問者: zyousuke
ベストアンサー
1
0
-
オブジェクト配列の各メンバを任意の式で評価して、その評価値が最大のオブジェクトを返す関数はありますか
いつもお世話になっています。 オブジェクト配列の各メンバを任意の式で評価して、その評価値が最大のオブジェクトを返す関数はありますか。 例えば、オブジェクト配列の各メンバが、二次元の位置情報を持っているとして、現在地からの直線距離が最も近いオブジェクトを取得する処理を、なるべく短いコードで書くにはどうすればよいですか。
質問日時: 2023/05/20 15:02 質問者: zyousuke
ベストアンサー
2
0
-
読み込んだ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
-
初心者です。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
-
インスタグラムのapiを利用して ID情報を持ってきて 自前のサーバでゲームサービスとか できますか
インスタグラムのapiを利用して ID情報を持ってきて 自前のサーバでゲームサービスとか できますか? (ID管理自体はこちらでやらなくても いいかな?と言う怠慢な考えです。) ゲームのスコアなどを自前のサーバで 管理したいと言うわけです。 特にインスタにこだわっているわけでは ありません。
質問日時: 2023/05/12 16:10 質問者: ss2400
ベストアンサー
1
0
-
[再掲]指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードについて
現在のページの URL パス名に「/campaign_page/seminar/」または「/forms/」が含まれている場合、そのページ内のすべてのクラスが「.bottom_btn'」という要素に対して非表示にする、というコードを教えていただいたのですが正しく動作せずに困っています。 (回答期限が切れてしまい質問ができなくなってしまったため、再掲載するかたちで投稿しています) 実際に記述したコード if( /\/(campaign_page\/seminar|forms)\//.test(location.pathname)) document.querySelectorAll('.bottom_btn').forEach( e => { e.style.display = 'none'; }); デベロッパーツールのconsoleで確認したところ、 Uncaught SyntaxError: Invalid or unexpected tokenというエラーが表示されており、下記の記述に誤りがあるような指摘が返ってきました。 /\/(campaign_page\/seminar|forms)\//.test(location.pathname) どこか間違っている部分があるのでしょうか? また.testという部分はlocation.pathnameで取得した値を格納する変数という理解であってますでしょうか。
質問日時: 2023/05/10 15:09 質問者: UT-1049
解決済
1
0
-
API連携のプログラミングについて(Typescript)
教えてください。 初心者です。 API連携のJavascript系のプログラミングで よくTypescriptで書かれているのを見るのですが、 それはAPI連携に限らずでしょうか? RestAPI, JSON形式でのファイルの取得にコードの行数が少なくて済むからとか、誰にも分かりやすい書き方になるからでしょうか?
質問日時: 2023/05/03 11:00 質問者: ymoshimoshi
解決済
2
0
-
Javascriptを使ってQRコード読み取り、取得した情報をPOSTしたいと思っています。
元ネタは下記のページです。 https://qiita.com/youtoy/items/d94a5bf835d3f4007c81 こちらを見ながらブラウザ上でQRコードを読み取ってコードに含まれる情報を取得するところまでは試すことができました。 実現したいことは、QRコードを読み取って取得した情報(コード)をフォームのテキスト入力欄(<input type="text" id="qrcode" name="qrcode" value="">へ埋め込み、送信ボタンでPOSTしたいと考えています。 元ネタページでは、<DIV>要素に出力(表示)されるようになっていて、サンプルコードをもとに 「<input type="text" id="outputData" name="qrcode">」 みたいなことでできないかと思ってやってみたのですが、うまくいきませんでした。 きっと、詳しい方にとってはとっても簡単なことなのかもしれませんが、ご教授いただきたく、よろしくお願いいたします。
質問日時: 2023/04/28 15:18 質問者: 4179Love
ベストアンサー
1
0
-
指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください
現在のURLに/aaa/bbb/または/ddd/というパスが含まれていた場合、特定の要素(class)を非表示にする、というJSのコードを教えてほしいです。 いろいろ調べて自分なりに以下のコードを書いてみたのですが 上手く動作せずに困っています。初心者です。 if (location.pathname.includes('/aaa/bbb/') || location.pathname.includes('/ddd/')) { const elements = document.querySelectorAll('.btn active'); for (let i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } } 特定の要素という部分というのは、 以下のようなボタンに付与されているクラスを消したいという意図になります。 <div class="btn">●●●</div> ↓ 一定の距離をスクロールするとactiveが付与されてボタンが表示される <div class="btn active">●●●</div>
質問日時: 2023/04/27 17:58 質問者: UT-1049
解決済
2
0
-
Javaについて教えてください。 1と7の2つの整数を入力したいのですが、エラーがついてしまいます。
Javaについて教えてください。 1と7の2つの整数を入力したいのですが、エラーがついてしまいます。 入力したい時は普通入力して改行するか、空白を開けて入力するか。と教わりました。 何が違うのでしょうか…
質問日時: 2023/04/20 16:50 質問者: ゆずの。
解決済
4
0
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
【JavaScript】に関するコラム/記事
-
ピンとくる人とこない人の違いは?直感を鍛える方法を心理コンサルタントに聞いた!
根拠はないがなんとなくそう感じる……。そんな「直感がした」という経験がある人は少なくないだろう。ただ直感は目には見えず、具体的な説明が難しいこともあるため、その正体は理解しにくい。「教えて!goo」にも「...
-
中古物件転売時の節税対策にメス?不動産投資家は戦々恐々?元国税が解説
不動産の取引において、土地と建物を一括で売買する場合、土地に消費税はかからないが、建物には消費税がかかる。これを利用して、例えば土地と建物を合計1億円で売る場合、土地の値段を9999万9999円にし、建物を1円...
-
話題の「風呂キャンセル界隈」、お風呂に「入らない」のではなく「入れない」?
皆さんは、「風呂キャンセル界隈(かいわい)」という言葉を聞いたことはあるだろうか。「お風呂に入らない(入れない)人」のことで、最近ネット上などで話題になっているようだ。「教えて!goo」にも、「風呂に入...
-
マッチングアプリで出会ったカップルは成婚率が高い!?結婚カウンセラーに聞いてみた
パートナーとの出会いの場として、もはや主流となったネット婚活やマッチングアプリ。中でも手軽に登録できるマッチングアプリは、10代から50代と幅広い年代が利用している。一方で、“相手の目的が投資関係の詐欺や...
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
階層別の組織図の自動作成について
-
食材の期限を管理するためにGASを利...
-
前回の質問の続き function movesta...
-
このプログラムに、王手をかけた時...
-
前回の質問の続き function mousedo...
-
このプログラムに王様の逃げ道がな...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に並ん...
-
<div>のタッチ状態を維持したままラ...
-
jQueryでシンセサイザーを作ってい...
-
プログラミング 学習
-
HTMLでサブフレームから親のスクリ...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字数制...
-
メールフォームの日付入力フォーム...
-
二次元配列を使って順位をだすとき...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパティ...
-
var exports = exports || {}; ← こ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
食材の期限を管理するためにGASを利...
-
ビデオのJSについて
-
前回の質問の続き function movesta...
-
このプログラムに、王手をかけた時...
-
このプログラムに王様の逃げ道がな...
-
初心者です。gulpでコンパイルがで...
-
前回の質問の続き function mousedo...
-
鍵盤アプリで、スマホの画面に並ん...
-
スマホ上で、左右スワイプで次のペ...
-
jQueryで同じクラス名のものを別物...
-
読み込んだQRコードをフォームに受...
-
追加ボタンを押した際に ok ボタン...
-
Colorboxがうまく設置できません
-
階層別の組織図の自動作成について
-
二次元配列を使って順位をだすとき...
-
【GAS】WEBアプリでハイパーリンク...
-
HTMLで作った時報アプリが動きません
-
セレクトを全て選択されていないと...
-
画面遷移を行わずに同一ページでHTM...
-
jsで質問です。 ボタンが二つ存在し...
おすすめ情報