回答数
気になる
-
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
掲示板を非同期通信で入力→確認→表示で作成しております。 確認画面を下記のように作成しているのですが、新たに任意で画像アイコンをアップロードする機能を加えたいと考えております。(アップロードされていない場合はダミー画像を表示) 画像アイコンの条件を3つほど想定していて、ファイルアップロードに関するコードと被る部分も出てくる為、どこまでまとめるべきか悩んでおります。 カメラ画像と別の画像を用意する場合の書き方についてのアドバイスもお願い致します。 ➀カメラ画像ではなく別の画像を用意する、可能であれば画像サイズは5MBで制限したい ➁アイコンは画像のみアップロードを許可 ➂clear ボタンのデザインはそのまま使う ※確認画面イメージ Q質問する STEP1入力>STEP2確認>STEP3完了 タイトル スタンプ画像 画像アイコン 名前 メッセージ アップロードファイル1 アップロードファイル2 アップロードファイル3 修正するボタン 投稿するボタン ※ファイルアップロードに関するコード <div class="image-partial"> <h2>動画・画像アップロード<span class="required">※ファイルサイズ15MB以内</span></h2> <div class="image-selector-button"> <label> <div class="image-camera-icon"> <img src="<?php echo $camera_url; ?>" class="changeImg"> </div> <input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;"> </label> <div class="viewer"></div> <button type="button" class="attachclear">clear</button> </div> </div> <script> const set_attach_event = function() { const attach = document.querySelectorAll('.attach'); 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; } viewer[i].innerHTML = ""; blobType[i] = ""; blobUrl[i] = ""; if (attach[i].files.length !== 0) { //オブジェクトのURL作成 blobUrl[i] = window.URL.createObjectURL(attach[i].files[0]); //FileReaderオブジェクト 生成し、ファイルの内容を非同期で取得 const reader = new FileReader(); reader.onload = () => { var child = null; //result プロパティは、ファイルの内容 if (reader.result.indexOf("data:image/jpeg;base64,") === 0 || reader.result.indexOf("data:image/png;base64,") === 0) { blobType[i] = "img"; child = document.createElement("img"); } else if (reader.result.indexOf("data:video/mp4;base64,") === 0) { blobType[i] = "video"; child = document.createElement("video"); child.setAttribute("controls", null); } else if (reader.result.indexOf("data:application/pdf;base64,") === 0) { blobType[i] = "iframe"; child = document.createElement("iframe"); } else { alert("対象外ファイル"); attach[i].value = ""; } if (child !== null) { child.src = blobUrl[i]; //戻り値は追加した子要素 viewer viewer[i].appendChild(child); changeImg[i].classList.add('hideItems'); // 元々の画像を消す } }; //Blob 又は File の内容を読み込む reader.readAsDataURL(attach[i].files[0]); } }); clear[i].addEventListener('click', () => { blobType[i] = ""; blobUrl[i] = ""; attach[i].value = ""; viewer[i].innerHTML = ""; changeImg[i].classList.remove('hideItems'); }); }; } </script>
質問日時: 2024/03/19 12:04 質問者: 初心者サイト作成
回答受付中
1
0
-
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
-
codejump 模写コーディングgalleryの背景画像fadein fadeoutについて
codejumpのgalleryサイトの模写コーディングをしているのですが、accessからcontactにかけて背景画像をfadein,fadeoutさせるとこを素のjavascriptに書き直してみたのですが、うまく表示されません。galleryの途中から一瞬表示されて消えてしまいます。どなたか解る方いらっしゃいましたら。ご教授いただけると幸いです。 javascriptのコードは以下になります。 window.addEventListener('scroll', ()=> { let scroll = window.pageYOffset || document.documentElement.scrollTop; let access_position = document.getElementById('access').getBoundingClientRect().top - window.innerHeight; let contact_position = document.getElementById('contact').getBoundingClientRect().top - window.innerHeight; if (scroll >contact_position) { if (scroll < access_position) { document.querySelector('.bg').style.display = 'block'; } else { document.querySelector('.bg').style.display = 'none'; } } else { document.querySelector('.bg').style.display = 'none'; } });
質問日時: 2024/03/18 13:42 質問者: unimo
回答受付中
1
0
-
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
-
Javascriptエラーの原因が分からない
Q&A掲示板を作成しております。 Cannot read properties of undefined (reading 'appendChild')というエラーが console に表示されており div.appendChild(child); でエラーが発生しているようですが、旧コードと比べてもどこが問題なのか原因が分かりません。 アドバイスお願い致します。 ※サンプルサイト https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/ ※該当コード <script> const divTitlePartialParts = document.createElement("div"); divTitlePartialParts.classList.add("title-partial-parts"); child = document.createElement("p"); child.appendChild(document.createTextNode(title_value)); div.appendChild(child); confirm_area.appendChild(div); ※該当ファイル(sample.phpが新コード、bbs_quest_inputが旧コードになります) https://wandbox.org/permlink/Zorsvn7Lx5EaYnzJ
質問日時: 2024/03/10 22:03 質問者: 初心者サイト作成
ベストアンサー
3
0
-
JavascriptのHTMLクラス表示について
Q&A 掲示板を作成しているのですが、Javascript で HTML を書き換える際の HTML クラス名についてアドバイス頂きたいのですが、 クラス名にハイフンかアンダーバーを付けることは可能でしょうか? パターン1かパターン2で parts と title-partial を別クラスとして表示することは出来るようですが、title-partial parts として出力する方法が分からず parts を消すべきか悩んでおります。 SEO を考えて入力画面は title-partial parts として表示しており、非同期通信で切り替えた後のクラスも検索エンジンに乗るのではないかと考えております。 パターン1 ---- divTitlePartialParts.classList.add("title-partial"); // classの追加 divTitlePartialParts.classList.add("parts"); // classの追加 ---- パターン2 ---- divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加 ---- <!-- 表示したい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>
質問日時: 2024/03/10 19:10 質問者: 初心者サイト作成
ベストアンサー
1
1
-
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
-
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
-
変数名をどのようにつけるのが良いかアドバイスお願い致します
非同期通信で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
-
ボタンを押したあとに画像を表示させる方法についてアドバイスお願い致します
ファイルアップロードが可能な 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
-
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
-
二次元配列の中の各行の要素をランダムに並べ替えたいです。
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
-
javascriptのエラーで質問です。
javascript(html・css)で質問です。動画を見て、クイズ形式で正解すれば、 alertが出るというものを 作りたいんですが、何か画面を確認しながら、やっているのですが、全くの超初心者という 事もあって、エーラーが出て、調べても、どこが間違っているのか、まったく分かりません。 大変お手数ですが、どなたか、ご存じの方、教えて戴けないでしょうか? <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body,html,div,h1,h2,ul,li { margin: 0; padding:0; } h1 { background-color:rgb(214,255,255); color: rgb(121,149,240); text-align: center; margin-bottom: 20px; } h2 { text-align: center; font-size: 22px; font-weight: normal; } ul { text-align: center; margin: 20px auto; list-style: none; } .btn-box { text-align: center; } .btn-box button { background-color: rgb(196,196,214); color: #fff; border: none; padding: 10px 20px; cursor: pointer; } .btn-box button:hover { opacity: .7; } </style> </head> <body> <h1>クイズ</h1> <h2 id="question">ここに問題表示</h2> <ul> <li id="ans1">選択肢1</li> <li id="ans2">選択肢2</li> <li id="ans3">選択肢3</li> </ul> <div class="btn-box"> <button type="button" id="answer1" onClick="answerCheck(1)">回答1</button> <button type="button" id="answer2" onClick="answerCheck(2)">回答2</button> <button type="button" id="answer3" onClick="answerCheck(3)">回答3</button> </div> <script> let question = { [ "山形県のお米といえば?", "1.ひとめぼれ", "2.ほえぬき", "3,こしひかり", "3" ], [ "山形県の果物といえば?", "1.さくらんぼ", "2.マンゴー", "3,みかん", "2" ], [ "山形県の県庁所在地どこ?", "1.天草市", "2.東根市", "3,山形市", "3" ] }; console.log(question[0][0]); let quiz = document.getElementById('question'); let ans1 = document.getElementById('ans1'); let ans2 = document.getElementById('ans2'); let ans3 = document.getElementById('ans3'); let correct = 0; let quizCnt = 0; function quizSet() { quiz.textContent = question(quizCnt)[0]; ans1.textContent = question(quizCnt)[1]; ans2.textContent = question(quizCnt)[2]; ans3.textContent = question(quizCnt)[3]; } quizSet(); function answerCheck(ans) { if(ans == question[quizCnt][4]) { alert("正解!"); correct++; } else { alert("不正解、、、!"); } quizCnt++; if(quizCnt == question.length) { quiz.textContent = `正解数は${correct}でした!`; ans1.textContent =""; ans2.textContent =""; ans3.textContent =""; } else { quizSet(); } } </script> </body> </html> <button type="button" id="answer1" onClick="answerCheck(1)">回答1</button> ←ここでエラー
質問日時: 2024/02/03 18:52 質問者: zzhikkkk
ベストアンサー
2
0
-
初心者javascript グーグルクロムのウィンドウを最大化から急に縮小するとテキストがはみ出す。
javascriptでhtmlのcontentのテキストが要素からはみ出したときに、フォントサイズを縮小・拡大して調節するプログラムを作ったのですが、google chromeのブラウザでしか試してないのですが、ウィンドウを最大化ボタンで大きくし、縮小ボタンを押してウィンドウの横幅を最小にして表示すると、プログラムが機能せず、テキストはみ出してしまいます。リロードすると、収まります。どうすれば、解決するのか分かりません。アドバイスください。 なお、ウィンドウの右をクリックで掴み、縮める時は機能します。 リンク: https://codepen.io/DEN-KEN/pen/VwRyQEP
質問日時: 2024/01/29 22:19 質問者: denpataro
ベストアンサー
1
0
-
Javascriptのhtml出力についてappendChildはどのような意味があるのでしょうか?
下記コードからフロートチャートを考えているのですが、.appendChildと.createElementの違いが分からず困っております。 下記コードのHTMLはどのようなコードになるのでしょうか? confirm_area.textContent = ''; var div; var child; child = document.createElement("h2"); child.appendChild(document.createTextNode('確認画面')); confirm_area.appendChild(child);// confirm_area の末尾に child を追加 div = document.createElement("div"); child.appendChild(document.createTextNode("名前:" + namae_value)); div.appendChild(child);// div の末尾に child を追加 confirm_area.appendChild(div);// confirm_area の末尾に div を追加 div = document.createElement("div"); child.appendChild(document.createTextNode("コメント:" + message_value)); div.appendChild(child);// div の末尾に child を追加 confirm_area.appendChild(div);// confirm_area の末尾に div を追加 div = document.createElement("div"); child = document.createElement("input");
質問日時: 2024/01/29 16:48 質問者: 初心者サイト作成
ベストアンサー
2
0
-
出発駅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
-
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
-
JavaScriptでページが更新されたときに./へ自動遷移するようにする方法を教えて
JavaScriptで、もしページが更新(F5やCtrl+Rなど)されたときに./へ自動遷移するようにする方法を教えていただきたいです。よろしくお願いいたします。昨日、beforeunloadとlocation.href = "//〇〇.com";で試したのですが、うまく行きませんでした。
質問日時: 2024/01/18 19:13 質問者: 優里さん
解決済
1
0
-
GASに文字列として関数を入れるとエラーがでる
GASでスプレッドシートに関数を自動で挿入する関数を作ってます。(関数で関数を挿入) しかし、”で囲んで関数を文字列として入力する(”=)
質問日時: 2024/01/17 17:13 質問者: むろ-初心者っぽい人-
解決済
3
0
-
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
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
このHTMLは、フォームに入力されたテキストを表示ボタンを押すまたは入力中にEnterキーを押すことで文字がサイズ指定フォームに入力されているサイズで表示され、検索を押すと検索されるのですが、 ①入力中にEnterを押しても表示されません。どうしてでしょうか。教えていただきたいです。 ②検索エンジンの選択肢をあと3つ増やして、selectとoptionで選択できるようにしたいです。どのようにすればできるか教えていただきたいです。 この①②について教えていただきたいです。できれば、FullのHTML/JavaScriptも教えていただきたいです。よろしくお願いいたします。 <!DOCTYPE html> <html lang="ja"> <head> <title>検索機能付き入力文字サイズ指定表示</title> <meta charset="UTF-8"> <script> function displayText() { var text = document.getElementById("text").value; var size = document.getElementById("size").value; document.getElementById("display").innerHTML = "<div style='font-size:" + size + "px'>" + text + "</div>"; } function search() { var query = document.getElementById("text").value; var engine = document.querySelector('input[name="engine"]:checked').value; if (engine == "bing") { window.open("//www.bing.com/search?q=" + query); } else if (engine == "google") { window.open("//www.google.com/search?q=" + query); } } document.getElementById("text").addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("button").click(); } }); </script> <style> body{ font-family:'メイリオ', 'Meiryo','MS ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif; } </style> </head> <body> <form> <label for="text">入力文字:</label> <input type="text" id="text" name="text"><br> <label for="size">文字サイズ(px):</label> <input type="number" id="size" name="size" min="1" max="222" value="16"><br> <label for="engine">検索エンジン:</label><!-- 「<select name="job"><option value="new">Bing」とか… --> <input type="radio" id="bing" name="engine" value="bing" checked> <label for="bing">Bing</label> <input type="radio" id="google" name="engine" value="google"> <label for="google">Google</label><br> <button type="button" onclick="displayText()">表示</button> <button type="button" onclick="search()">検索</button> </form> <br> <div id="display"></div> </body> </html>
質問日時: 2024/01/06 16:33 質問者: 優里さん
ベストアンサー
3
0
-
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
このHTMLは、フォームに入力されたテキストを表示ボタンが押されたら文字サイズ指定フォームに入力された文字サイズで表示されて、検索ボタンが押されたらフォームに入力されている内容をBingかGoogleで検索するというものなのですが、実行して検索ボタンを押すと[object HTMLInputElement]というものが検索されてしまいます。どうしてでしょうか。教えてください。よろしくお願いいたします。【以下HTML】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォーム</title> <script> function displayText() { var text = document.getElementById("text").value; var size = document.getElementById("size").value; document.getElementById("display").innerHTML = "<p style='font-size:" + size + "px'>" + text + "</p>"; } function search() { var query = document.getElementById("text").value; var engine = document.querySelector('input[name="engine"]:checked').value; if (engine == "bing") { window.open("https://www.bing.com/search?q=" + text); } else if (engine == "google") { window.open("https://www.google.com/search?q=" + text); } } </script> </head> <body> <form> <label for="text">テキスト:</label><br> <input type="text" id="text" name="text"><br> <label for="size">文字サイズ:</label><br> <input type="number" id="size" name="size" min="1" max="100"><br><br> <label for="engine">検索エンジン:</label><br> <input type="radio" id="bing" name="engine" value="bing" checked> <label for="bing">Bing</label><br> <input type="radio" id="google" name="engine" value="google"> <label for="google">Google</label><br><br> <button type="button" onclick="displayText()">表示</button> <button type="button" onclick="search()">検索</button> </form> <br> <div id="display"></div> </body> </html>
質問日時: 2024/01/05 17:48 質問者: 優里さん
ベストアンサー
3
0
-
初心者javascript ウィンドウサイズを変更したら実行するようにしたい
htmlで外部ファイルのjsを読み込む形をとっているのですが、 以下のサイトのjavascriptを、少し変えてウィンドウサイズを変更した時も、実行するようにしたいのですが、いまいちわかりません。 サイト:https://pixelog.net/post/2020/04/08/160424/ 親要素からテキストがみ出てしまい、リロードすると親要素内にテキストが収まるのですが、リロードしないで収まるようにしたいです。また、ウィンドウを大きくした時にテキストが小さいままでなく、大きくなるのがベストです。 addelement();//←追加しました function addelement(){//←追加しました textAdjust('私のクラス');//←追加しました textAdjust('私のクラス');//←追加しました } function textAdjust(Class) { document.addEventListener('DOMContentLoaded', adjust); function adjust(){ const title = document.getElementsByClassName(Class); for(i=0; i < title.length; i++) { title[i].style.display = 'block'; const contentWidth = title[i].clientWidth; const font_size = document.defaultView.getComputedStyle(title[i], title[i].style.display = 'inline-block'; title[i].style.whiteSpace = 'nowrap'; const titleWidth = title[i].clientWidth; if(titleWidth > contentWidth){ const percent = Math.floor(contentWidth / titleWidth * 100); const fontEm_size = percent / 100 + 'em'; title[i].parentNode.style.fontSize = font_size; title[i].style.fontSize = fontEm_size; } } } } //ウインドウサイズを変えたとき window.addEventListener('resize', function(){ //←追加しました addelement(); //←追加しました }); //←追加しました
質問日時: 2024/01/03 19:51 質問者: denpataro
ベストアンサー
2
0
-
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
-
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
-
[再掲]JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えて下さい
過去にも似たような質問を投稿したのですが、また行き詰ってしまったため教えてください。 URLのなかに/bbb/または/cccc/という文字列が一致したときに、そのページ内の.bottom_btn, .fixed_btnのクラスが付与されている要素に対して非表示にする、というコードが以下の記述になるのですが、この条件にトップページも加えたいのですが上手くいかず困ってます。 やりたいこととしては、トップ(/)も/bbb/も/cccc/も.bottom_btn, .fixed_btnのクラスが付与されている要素は非表示にしたいです。 ▼変更前 if (new RegExp("/bbb/|/cccc/").test(location.pathname)) { document.querySelectorAll(".bottom_btn, .fixed_btn").forEach(e => { e.style.display = "none"; }); } 以下が変更後のコードになります。どこが間違っているのかご指摘いただけないでしょうか。 ▼変更後 if (new RegExp("/|/bbb/|/cccc/").test(location.pathname)) { document.querySelectorAll(".bottom_btn, .fixed_btn").forEach(e => { e.style.display = "none"; }); } よろしくお願いします。
質問日時: 2023/12/25 22:30 質問者: UT-1049
解決済
3
0
-
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
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
【JavaScript】に関するコラム/記事
-
税理士に聞いてみた「定額減税ってなんですか?対象者は?注意事項は?」
物価高騰の煽りを受ける中、「税が減る」と聞けば手放しに喜んでしまう。では「定額減税」にも同様の感想を持つだろうか。減税という文字が入っているため、税が減ることは間違いなさそうではあるが、少しとっつきづ...
-
メダロット:第233話「Vol.233※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
北欧風のお部屋にしたい!賃貸住宅でも可能な北欧スタイルの部屋作りのポイントを紹介
快適なおうち時間を過ごすため、自宅を自分好みのインテリアにしたいと思ったことはないだろうか。新生活を前に、新居の想像を膨らませている人もいるかもしれない。しかし、せっかく家具や壁紙をそろえても、“どう...
-
メダロット:第232話「Vol.232※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
var exports = exports || {}; ← こ...
-
画面遷移を行わずに同一ページでHTM...
-
配列の1要素を代入した変数を使って...
-
中百舌鳥駅と深井駅を入れ替えて選...
-
Googleフォームで選択肢に応じて次...
-
React hooksが値を返して配列変数に...
-
特定の文字列を複数抜き出したいで...
-
オブジェクトから任意のプロパティ...
-
HTMLタグに複数のクラスを設定する...
-
disabled プロパティが表示されない...
-
二次元配列の中の各行の要素をラン...
-
コードレビューをお願いします。
-
【Google Apps Script】「ライブラ...
-
ボタンを押したあとに画像を表示さ...
-
Colorboxがうまく設置できません
-
GASでGoogleフォームの自動返信シス...
-
【JS】selectでchangeした時のデー...
-
IndexedDB を使ってファイルアップ...
-
フロントエンドフレームワークの定...
-
Q&Aの掲示板を作成していてヤフー知...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
二次元配列の中の各行の要素をラン...
-
画面遷移を行わずに同一ページでHTM...
-
指定時間になったら、WEBサイトの更...
-
変数名をどのようにつけるのが良い...
-
disabled プロパティが表示されない...
-
フロントエンドフレームワークの定...
-
セレクトを全て選択されていないと...
-
特定の文字列を複数抜き出したいで...
-
ボタンを押したあとに画像を表示さ...
-
読み込んだQRコードをフォームに受...
-
配列の1要素を代入した変数を使って...
-
出発駅A、到着駅Bを選択すると、2.3...
-
React hooksが値を返して配列変数に...
-
Q&Aの掲示板を作成していてヤフー知...
-
jQueryローディングアニメーション...
-
スマホ上で、左右スワイプで次のペ...
-
【GAS】WEBアプリでハイパーリンク...
-
sessionStorageを調べています。
-
オブジェクトから任意のプロパティ...
-
追加ボタンを押した際に ok ボタン...
おすすめ情報