JavaScript

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

回答数

気になる

ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい

ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといいますか？

質問日時: 2024/04/25 18:38 質問者: だいぬ

回答受付中

5

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

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

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

回答受付中

4

0
プログラムについて。

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

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

回答受付中

3

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

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

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

解決済

1

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

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

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

ベストアンサー

3

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

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

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

ベストアンサー

4

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

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

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

解決済

1

0
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言

PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言語の違いはなんですか？

質問日時: 2024/03/22 21:33 質問者: だいぬ

ベストアンサー

3

0
javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし

javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をしたいのですが、設定したい要素をうまく取得することができません。ボタン押下したclass testのtableのtrにclass testにtr要素.style.display = 'none'や'block'を設定してボタンで切り替えれるようにしたいのですが、うまく設定したい要素を取得できません。ボタンを押下した、テーブルのclass testだけの要素を取得する方法はないでしょうか。どうかお助けください。 //テーブル1 <table> <tr> <th>情報１</th> <th>情報２</th> </tr> <tr> <td>値1<button onclick="test()" type="button">詳細</button></td> <td>値2</td> </tr> <tr class="test"> <td>値3</td> <td>値4</td> </tr> </table> //テーブル2 <table> <tr> <th>情報１</th> <th>情報２</th> </tr> <tr> <td>値1<button onclick="test()" type="button">詳細</button></td> <td>値2</td> </tr> <tr class="test"> <td>値3</td> <td>値4</td> </tr> <tr> <td>値3</td> <td>値4</td> </tr> </table>

質問日時: 2024/03/21 11:18 質問者: piraniaman

ベストアンサー

3

0
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>情報１</td><td>情報２</td><td>情報３</td></tr><tr><td>情報4</td><td>情報5</td><td>情報6</td></tr></table>

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

ベストアンサー

5

1
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 クラス名についてアドバイス頂きたいのですが、クラス名にハイフンかアンダーバーを付けることは可能でしょうか？パターン１かパターン２で parts と title-partial を別クラスとして表示することは出来るようですが、title-partial parts として出力する方法が分からず parts を消すべきか悩んでおります。 SEO を考えて入力画面は title-partial parts として表示しており、非同期通信で切り替えた後のクラスも検索エンジンに乗るのではないかと考えております。パターン1 －－－－ divTitlePartialParts.classList.add("title-partial"); // classの追加 divTitlePartialParts.classList.add("parts"); // classの追加－－－－パターン２－－－－ divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加－－－－  <div id="confirm_area" style="display: block;"> <div class="title-partial parts">  質問タイトルテスト </div> <div class="namae-partial parts">  名前テスト </div> <div class="body-partial parts"> コメントテスト </div> <div class="post-button"> <button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button> </div> </div> </div>  </div> </div>

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

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

ベストアンサー

4

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

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

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

ベストアンサー

1

0
[初心者]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タグは１つだけだから var element = elements[0].children;//address[0]=addressタグは１つ。の直下のタグ要素を取得 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> これで表示されると再生しますがボリュームが０になってしまいます。どこが間違っているのでしょうか？

質問日時: 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">  <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"> <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

←前の結果
1
2
3
4
5
6
7
8
9
10
11
...
20
次の結果→

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

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

質問する（無料）

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

フキノトウ、ワラビ、タラノメなどの「山菜」を若い人は知らない？食べたことない？

春の訪れと共に、八百屋やスーパーには様々な種類の野菜が並ぶ。春野菜といって思い浮かぶのは、「春キャベツ」や「春タマネギ」という人が多いだろう。一方で、「フキノトウ」「ワラビ」「タラノメ」など、かつて春...
摘発相次ぐ「モペット」法律的な問題点を弁護士に聞いてみた

電動モーターを搭載し、走行可能な二輪車である「モペット」に関する交通違反が増加しているため、警視庁は10日、東京の渋谷で取り締まりを行った。警視庁によると、昨年、東京都内で「モペット」と呼ばれる電動モー...
メダロット：第238話「Vol．238※期間限定公開」

天才メダロッター六葉カガミの戦いを描く「メダロット再～リローデッド～」(漫画：伯林、監修：イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
寒暖差疲労の予防・改善には「入浴」がおすすめ？ポイントと効果を専門家にきいてみた

季節の変わり目になると、体調を崩す人が少なくない。その原因のひとつは「寒暖差疲労」だといわれている。一日の気温差が7℃以上になると、体温調節を担う自律神経が過剰に働くので、冷え症、肩こり、頭痛、全身倦怠...