JavaScript ランキング(2ページ目)

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

回答数

気になる

特定の文字列を複数抜き出したいです。関数か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
オブジェクトから任意のプロパティを全て抽出する一番簡単な方法

いつもお世話になっています。配列から任意の要素を抽出するにはfilter()で簡単にできますが、これと同じようにオブジェクトから任意のプロパティを抽出するにはどうすれば良いですか。例えば、次のようなデータがあって、勇者のレベルが上がった時に、その時点で覚えられる呪文を全部取得する最も簡単な方法はなんですか。呪文 = { ホイミ: {mp: 3, 覚えるレベル: {勇者: 5, 僧侶: 1}, ルーラ: {mp: 8, 覚えるレベル: {勇者: 8, 魔女: 15} } パーティー = [ 勇者: {レベル: 1, 呪文 = []}, 魔女: {レベル: 1, 呪文 = []} ]

質問日時: 2023/08/09 21:13 質問者: zyousuke

ベストアンサー

1

0
Q&Aの掲示板を作成していてヤフー知恵袋やgoo質問のように質問ごとにURLを生成したい

JavaScriptかデータベースの保存データでURLを生成したいのですが、アドバイス頂いた際にデータベースの保存データの方が一般的で良いのではないかと教えて頂きました。 Javascriptのランダム文字列についても別の方に詳しくお聞きしたところ、そちらの方がセキュリティ上は良さそうな気がしております。どちらが良いか決めかねているためアドバイスお願い致します。・Javascriptについて、生成したＵＲＬをデータベースに保存する方法で、データベースがＵＲＬを持っているのでそのまま使えて楽です。リンクＵＲＬにも使えるし、アクセスされたＵＲＬからその質問をデータベースから読み出すこともできます。・データベースの保存データについて、データベースに保存されているＩＤなどから生成する方はＵＲＬをデータベースに保存しなくていいはずです。データベースがＵＲＬを持っていないためその都度生成処理や復号処理が必要です。リンクＵＲＬを出力する、アクセスされたＵＲＬからＩＤなどへ復号（戻す）してからその質問をデータベースから読み出す必要があります。ＵＲＬをデータベースに保存してもいいとは思いますが、それなら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
4

配列の1要素を代入した変数を使って元の配列要素を削除できるか

いつもお世話になっています。配列の1要素を代入した変数を使って、元の配列要素を削除できますか。例えば、 const arr = [{typ: '肉', nam: 'ステーキ'}, {typ: '肉', nam: 'ハンバーグ'}], elm = arr[i] とした時、後からelmを使ってarrの要素を削除するにはどうすれば良いですか。

質問日時: 2023/07/28 03:34 質問者: zyousuke

ベストアンサー

1

0
5

jQueryローディングアニメーションのコードの以下のURL内参考サイトで提示されている

jQueryローディングアニメーションのコードの以下のURL内参考サイトで提示されている<script>タグ内の if (sessionStorage.getItem('access')) {のaccessはどこから来るものでしょうか？ CSSやHTMLにclass名accessが見当たらないです。回答よろしくお願いいたします。 https://web-creates.com/code/jquery-loading-sessionstorage/

質問日時: 2023/07/03 18:29 質問者: hayosato

ベストアンサー

3

0
6

addEventListener()でリスナー関数に名前を付ける構文を教えてください

いつもお世話になっています。 addEventListener()でリスナー関数に名前を付ける構文を教えてください。例えば、 document.addEventListener('keydown', fnc = (e) => {console.log(e.key)}) のように書けば、後でリスナー関数を参照できる事までは分かったのですが、これを、変数を使わずに、 addEventListener('keydown', function fnc(e) {console.log(e.key)}) のような書き方は出来ますか？？？ちなみにこの書き方だと、後で参照しようとするとfnc is not definedとなります。

質問日時: 2023/07/01 17:31 質問者: zyousuke

ベストアンサー

1

0
7

フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。

入力フォームが空欄の時、フォームの外にカーソルを当てクリックすると、文字列のエラーのメッセージが表示するコードを調べています。上記のことをすると、コードはきちんと作動していて問題ありません。 javascriptのコードの▼三角記号の部分のコードの意味が分からずにいます。 Checker = (elm)=>{の意味は、checker = function(elm){と同じ意味でしょうか？回答よろしくお願いいたします。 ---HTMLのコード--- <body> <form action="form1.php" method="post" id="form"> 名前（必須） <input type="text" class="form1" name="name" id="name" value="" /> <div class="alert1">・名前を入力してください。</div> <button id="submit" class="yohaku"> </button> </form> </body> ---javascriptのコード--- <script> { const form = document.getElementById('form'), inputs = [...form.querySelectorAll('input[type="text"]')], ▼Checker = (elm)=>{ ▼const cls = elm.nextElementSibling.classList; ▼const flag = elm.value.trim() == ""; if(flag) cls.add('show'); else cls.remove('show'); return flag; }; form.addEventListener('change', e=>{ if(inputs.indexOf(e.target) >= 0) Checker(e.target); }); form.addEventListener('submit', e=>{ if(inputs.map(e => Checker(e)).indexOf(true) >= 0) e.preventDefault(); }); } </script> ---文字列のエラーの：フォントなどのスタイルCSSのコード--- /* フォーム付近に出現する赤いテキストエラーメッセージ */ /* 出現文字show alert */ .alert1 { font-size: 0.6em; color: crimson; } .alert1 { visibility: hidden; }/* 文字を非表示 */ .alert1.show { visibility: visible; }/* 文字を非表示 */

質問日時: 2023/06/25 11:51 質問者: hayosato

ベストアンサー

1

0
8

セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています

javascript　２つのセレクトボックスを全て選択されていないと、「テキストによるエラーメッセージを表示させるコード」を調べています。該当コードは<script>■■四角の記号の部分です。セレクトボックスを２つとも未選択でsubmitを押すと、アラートのメッセージとテキストエラーによるメッセージ２つが同時に表示されるようになっています。コードはきちんと起動します。該当部分のdocument.querySelector('.err')?.remove();の意味が理解できずにいます。 insertAdjacentHTMLで出したテキストエラーをセレクトボックスが空欄でない時に非表示にするとい解釈のようですが、あってますでしょうか？ class名やid名に('.err')?という名前は使用していませんがドットに.errとクエスチョンマーク？とはどういう意味なのでしょうか？条件演算子の？でしょうか条件演算子の構文で変数 = 条件 ? 値１ : 値２;の構文とも違うようですし。分からずにいます。回答よろしくお願いいたします。 ---HTMLのコード--- <body> <form action="form1.php" method="post" id="form"> 選択項目①： <select id="fruits" class="select1" name="fruits"> <option value="">果物を選択する</option> <option value="リンゴ">>リンゴ</option> </select> 選択項目②： <select id="fruits2" class="select1" name="fruits2"> <option value="">食事を選択する</option> <option value="ごはん">>ごはん</option> </select> <div class="alert15"></div> <button id="submit" class="yohaku"> </button> </form> ---javascriptののコード--- <script> const form = document.querySelector('#form'); const fruits = document.querySelector('#fruits'); const fruits2 = document.querySelector('#fruits2'); // セレクトボックスを選択されてないとアラートによるエラーメッセージを表示 form.addEventListener('submit', function(event) { let msg = ""; if (fruits.value == "") msg += "選択項目①：※選択項目①を選択して下い。\n"; if (fruits2.value == "") msg += "選択項目②：※選択項目②を選択してください。\n"; if (msg != "") { event.preventDefault(); alert(msg); } }); </script> ■■ <script> // ２つとも全て選択されてないとテキストによるエラーメッセージの表示 form.addEventListener('submit', e=>{ document.querySelector('.err')?.remove(); document.querySelector('.alert15').insertAdjacentHTML('afterend',`<span class="err">※選択項目①と選択項目②を全て選択して下さい。</span>`); },true); </script> </body>

質問日時: 2023/06/22 15:48 質問者: hayosato

ベストアンサー

2

0
9

sessionStorageを調べています。

入力フォームに入力された値をsubmitを押したら、次の確認画面から前のページに戻った時も、入力されているデータを保持するコード書いています。以下は調べたコードですが、コードの意味は大まかに把握できていますが、sessionStorageにデータを保存するまでの流れを正確に理解できていません。 <script>タグ内に▼三角の記号部分のコードはsesstionStorageにデータを保存するために、この場合▼の部分のコードは必要なのでしょうか？また、♦の部分を指定するには、まず最初に、■の部分のコードを書かなければいけないという解釈であっていますでしょうか？ ※PHPはを使った方がよいですが、今は練習なので、使っていません。 ---HTMLのコード--- <body> <form action="form1.php" method="post" id="form"> 名前：<input type="text" class="form1" name="name" id="name" value="" /> ふりがな：<input type="text" class="form1" name="furigana" id="furigana" value="" /> 選択： <select id="fruits" class="select1" name="fruits"> <option value="">果物を選択する</option> <option value="">リンゴ</option> </select> <button id="submit" class="yohaku"> </button> </form> </body> ---javascriptのコード--- <script> ▼const key = 'date_key'; ▼const form = document.querySelector('#form'); ▼const name = document.querySelector('#name'); ▼const furigana = document.querySelector('#furigana'); form.addEventListener('change', function() { ♦if (name.value != "") sessionStorage.setItem('name', name.value); ♦if (furigana.value != "") sessionStorage.setItem('furigana', furigana.value); ♦if (fruits.value != "") sessionStorage.setItem('fruits', fruits.value); }); let val1 = sessionStorage.getItem('fruits'); if(val1!== null)fruits.value = val1; ■name.value = sessionStorage.getItem('name'); ■furigana.value = sessionStorage.getItem('furigana'); </script>

質問日時: 2023/06/20 12:41 質問者: hayosato

ベストアンサー

1

0
10

アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします

ファイルのアップロード機能を作成していて、アップロードする場所にカメラの画像を配置しているのですが、ファイルをアップロードするとカメラ画像の下に画像や動画やpdfが表示されてしまうため、カメラ画像の上にアップロードファイルを表示したいと考えております。画像、動画、PDFで分岐するコードを書きたい場合、どのように書けばよいのでしょうか？ <style> /* 通常時 */ form > div { display: flex; } .contents-selector-button { position: relative; margin: .3em; } .contents-selector-button label img {/*カメラ画像に対してのcss*/ width: 200px; height: 100px; } .contents-selector-button input { display: none; } /* 画像、動画、PDF表示時のレイアウト */ .contents-selector-button.contents-on label { visibility: hidden; } .contents-selector-button.contents-on .viewer { position: absolute; top:0; left: 0; width: 100%; height: 100px; overflow: hidden; } </style> </head> <body> <form method="post"> <div> <div class="contents-selector-button"> <label> <div><img src="img/camera.jpg"></div> <input type="file" accept=".png, .jpg, .jpeg, .pdf, .mp4"> </label> <input type="hidden"> <button type="button">clear</button> <div class="viewer"></div> </div> </div> </form> <script> (()=>{ const fileTypes = ['image/jpeg','image/png','video/mp4','application/pdf'], wrap = document.querySelector('form > div'), P = e => e.closest('.contents-selector-button'), V = e => P(e).querySelector('.viewer'), C = (e, s) => P(e).classList[s]('contents-on'); for(let i = 0; i<3; i++) wrap.appendChild(wrap.firstElementChild.cloneNode(1)); /* クリアボタン */ wrap.addEventListener('click', (e, t = e.target) => { if(t.nodeName != 'BUTTON' || t.type != 'button') return; V(t).innerHTML = ''; C(t, 'remove'); }); /* 画像、動画、PDF登録 */ wrap.addEventListener('change', (e, t = e.target) => { if(t.nodeName != 'INPUT' || t.type != 'file') return; if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return; /* ここから分岐させたい */ /* 画像の場合 */ wrap.addEventListener('change', (e, t = e.target) => { if(t.nodeName != 'INPUT' || t.type != 'file') return; if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return; const img = document.createElement('img'); img.src = URL.createObjectURL(t.files[0]); img.style.height = '100px'; V(t).appendChild(img); C(t, 'add'); }); })(); /* 動画の場合 */ wrap.addEventListener('change', (e, t = e.target) => { if(t.nodeName != 'INPUT' || t.type != 'file') return; if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return; const img = document.createElement('video'); video.src = URL.createObjectURL(t.files[0]); video.style.height = '100px'; V(t).appendChild(video); C(t, 'add'); }); })(); /* PDFの場合 */ wrap.addEventListener('change', (e, t = e.target) => { if(t.nodeName != 'INPUT' || t.type != 'file') return; if(t.files.length == 0 || !fileTypes.includes(t.files[0].type)) return; const img = document.createElement('pdf'); video.src = URL.createObjectURL(t.files[0]); video.style.height = '100px'; V(t).appendChild(pdf); C(t, 'add'); }); })(); </script>

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

解決済

4

0
11

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

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

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

ベストアンサー

3

0
12

二次元配列の全要素の全要素を区切り文字無しで連結する最も単純な書き方を教えてください

いつもお世話になっています^^; 例えば[[0, 1], [2, 3]]という二次元配列の全要素の全要素を区切り文字無しで連結して、 '0123'という文字列を得るにはどのように書けばよろしいですか。 join('')だと'0,12,3'となってしまいます。

質問日時: 2023/06/09 12:51 質問者: zyousuke

ベストアンサー

3

0
13

任意の変数が任意の値になった瞬間に停止して該当コードを表示する事はできますか

いつもお世話になっています。 DevToolsの機能などで、任意の変数が任意の値になった瞬間に停止して該当コードを表示する事はできますか。そのやり方を教えてください。変数の値がいつの間にかNaNになっていて、しかも再現性が無く同じ操作をしても大丈夫な時もあり、これが、いつどこで発生しているのか突き止めたいのです。

質問日時: 2023/05/22 16:19 質問者: zyousuke

ベストアンサー

1

0
14

オブジェクト配列の各メンバを任意の式で評価して、その評価値が最大のオブジェクトを返す関数はありますか

いつもお世話になっています。オブジェクト配列の各メンバを任意の式で評価して、その評価値が最大のオブジェクトを返す関数はありますか。例えば、オブジェクト配列の各メンバが、二次元の位置情報を持っているとして、現在地からの直線距離が最も近いオブジェクトを取得する処理を、なるべく短いコードで書くにはどうすればよいですか。

質問日時: 2023/05/20 15:02 質問者: zyousuke

ベストアンサー

2

0
15

読み込んだQRコードをフォームに受け渡したい

「jsQR」とというスクリプトを用いて、HTML上にQRコードを読み込む機能を埋め込むことができました。現在の状態はこちらになります。 https://tk19770914.xsrv.jp/qr/ 内容的には、jsQRのサンプルページがもとになっています。詳しい内容については、ソースコードを表示してご参照ください。現在は、ソースコードにある <div hidden><span id="outputData"></span></div> の部分に読み込まれたQRコードの内容が表示されています。現在の状態だと、QRコードが識別できている間だけテキストが表示され、QRコードから外れると <div id="outputMessage" >ＱＲコードを認識できません。</div>が表示されます。今回の要望は、読み込まれたQRコードの内容を、その下の部分にあるフォームのテキスト入力欄に埋め込みたいと思っています。さらには、読み込み中のQRコードから外れても、フォームの値はそのまま埋め込まれ、再度（もしくは新しく）QRコードが読み込まれた場合、その値に上書きされるようにしたいと思っています。なにぶん、Javascriptのコーディング経験がなく、既存のコードをアレンジすることもできません。詳しい方、ご教授いただきたく、何卒宜しくお願い致します。

質問日時: 2023/05/18 11:18 質問者: 4179Love

ベストアンサー

1

0
16

インスタグラムのapiを利用して ID情報を持ってきて自前のサーバでゲームサービスとかできますか

インスタグラムのapiを利用して ID情報を持ってきて自前のサーバでゲームサービスとかできますか？（ID管理自体はこちらでやらなくてもいいかな？と言う怠慢な考えです。）ゲームのスコアなどを自前のサーバで管理したいと言うわけです。特にインスタにこだわっているわけではありません。

質問日時: 2023/05/12 16:10 質問者: ss2400

ベストアンサー

1

0
17

API連携のプログラミングについて(Typescript)

教えてください。初心者です。 API連携のJavascript系のプログラミングでよくTypescriptで書かれているのを見るのですが、それはAPI連携に限らずでしょうか？ RestAPI, JSON形式でのファイルの取得にコードの行数が少なくて済むからとか、誰にも分かりやすい書き方になるからでしょうか？

質問日時: 2023/05/03 11:00 質問者: ymoshimoshi

解決済

2

0
18

イラストレーター、縦中横のショートカットをスクリプトを使って作成する方法

イラストレーターで縦中横のショートカット作成したくて、 1. 　AutoHotkey 2. 　↓こちらのページにあるスクリプト https://sttk3.com/blog/tips/illustrator/airstyle-tatechuyoko.html を組み合わせれば出来ると思ってダウンロードしてみましたが、ここから先がわかりません。具体的な方法を教えていただける方いらっしゃいましたら、よろしくお願いいたします。 m(__)m

質問日時: 2023/04/19 11:15 質問者: 1973kanda

解決済

1

0
19

jsで診断コンテンツのページ内切り替えについて

とあるサイトを参考に、ソースまでは作ってみたのですが、jsについては難易度が高すぎて先に進めずつまずいております。どなたかご教授いただけませんでしょうか。よろしくお願い致します。【内容】質問数：４段階 Q１の選択数：２⇒1か２選択で「次へ」ボタンが押せるようになりQ２へ Q２の選択数：３⇒１～３どれか選択で「次へ」ボタンが押せるようになりQ３へ Q３の選択数：３⇒１～３どれか選択すると、選択項目の下にコンテンツ（１種類）が表示され「次へ」ボタンが押せるようになりQ４へ Q４の選択数：４⇒１～４どれか選択すると、選択項目の下に選択に合った内容のコンテンツが表示され「次へ」ボタンが押せるようになり最後のサンクス表示文字数が多くてソースが貼り付けられませんでしたため、構成を作ったソースは画像として添付致しました。

質問日時: 2023/04/14 17:31 質問者: h_6812_h

解決済

1

0
20

その要素がjQueryでremove()済みか確認する最も簡単な方法

いつもお世話になっています。その要素がjQueryでremove()済みか確認する最も簡単な方法を教えてください。小生が考えたのは、foo.css('display')で確認する方法ですが、'display'という文字列を渡すのが、ちょっとダサいなと思っています。もっときれいな書き方でスマートに確認する方法はありますか。

質問日時: 2023/04/05 20:26 質問者: zyousuke

ベストアンサー

2

0
21

ステップ実行で式の中の各演算が実行される様子を1個1個確認する方法

いつもお世話になっています。 DevToolsのステップ実行などで、式の中の各演算を1個1個確認するにはどうすればよいですか。例えば、 1 + 1 + 1 なら、まず左の1 + 1が評価されて2 + 1となりますが、この2 + 1となる過程を観察するツールはありますか。またはDevToolsでのやり方があれば教えてください。

質問日時: 2023/04/03 12:25 質問者: zyousuke

ベストアンサー

1

0
22

test.jsの関数testから別のtest2.jsの関数testをよびだす方法はどのようにするので

test.jsの関数testから別のtest2.jsの関数testをよびだす方法はどのようにするのでしょうか。

質問日時: 2023/03/30 11:11 質問者: piraniaman

解決済

3

0
23

「？」の意味

javascriptのコードの模写をしていたのですが、その中で「？」という記号？演算子？がでてきたのですが調べても意味が出てきません。教えていただけますでしょうか。

質問日時: 2023/03/18 08:48 質問者: ジョジョん

ベストアンサー

4

0
24

条件に該当した時のみ定数を宣言する事はできますか

幼稚な質問で恐縮です。条件に該当した時のみ定数を宣言する事はできますか。当然と言えば当然ですが、次のようにif内で宣言した定数をif外で使うとエラーになります。このような使い方は想定されていないのでしょうか function sub() { if(1) {const x = 5} console.log(x) } 分岐によって使わない定数は宣言しないようにしようとしています。

質問日時: 2023/03/15 05:55 質問者: zyousuke

ベストアンサー

8

0
25

【GAS】WEBアプリでハイパーリンクを挿入したい

GAS初心者です。下記URLのスプレッドシートでWEBアプリを作っているのですが、 HTML表示をしたとき、URLが入力されたセルの値をハイパーリンクにする方法がわかりません。 <やりたいこと> HTML表示の「詳細」列にURLがありますが、これをリンク付きの「表示する」というテキストに置き換えたいです。 GASの「index.html」ファイルに何らかのコードを記述するのだと思うのですが、どうしてもわかりません。 ----------------------------- 恐れ入りますが、どなたかお分かりの方がおられましたら、ご教授いただけましたら幸いです。宜しくお願い申し上げます。 ■スプレッドシートのURL https://docs.google.com/spreadsheets/d/1WpNU6o1YBN_Kyxl_SqmeeOad4zrPaDhrpJTGLwiA6G8/edit?usp=sharing ■HTML表示のURL https://script.google.com/macros/s/AKfycbzyHYVKHl4to8Dqg1nDzs1DfsDdQMVBBC_q7JM1ylYeaYt3MxY4_2MF1_37MPEffcmX/exec

質問日時: 2023/03/12 19:20 質問者: whiteprelude

ベストアンサー

1

0
26

Google reCAPTCHAについて

フォームからのスパムが多く、自分でGoogle reCAPTCHAを設定してみようとサイトを参考にして、以下を</form>タグの後に記述しました。ところがスパムの数は減らずGoogle cloudには「過去6週間にトークンをリクエストしていません」と出ます。これは設定方法に問題があるという事だと思います。 <script src="https://www.google.com/recaptcha/api.js?render=6LcdYmYkAAAAALxCMuxsHdGOXGidatwn27uI5R-o"></script> <script> var rc_form = document.getElementById('rc_form'); //フォーム要素にイベントハンドラを設定 rc_form.onsubmit = function(event) { //デフォルトの動作（送信）を停止 event.preventDefault(); //トークンを取得 grecaptcha.ready(function() { grecaptcha.execute('6LcdYmYkAAAAALxCMuxsHdGOXGidatwn27uI5R-o', {action: 'login'}).then(function(token) { var token_input = document.createElement('input'); //input 要素を生成 token_input.type = 'hidden'; token_input.name = 'g-recaptcha-response'; token_input.value = token; //トークンを値に設定 rc_form.appendChild(token_input); var action_input = document.createElement('input'); //input 要素を生成 action_input.type = 'hidden'; action_input.name = 'action'; action_input.value = 'login'; //アクション名を値に設定 rc_form.appendChild(action_input); rc_form.submit(); //フォームを送信 }); }); } </script> どこに問題があるか、ご指導頂けないでしょうか？ドメインの設定は大丈夫だと思われます。サイトに「Google reCAPTCHAで保護されています」のマークも付いています。

質問日時: 2023/02/22 14:37 質問者: みっきー0520

ベストアンサー

1

0
27

React と Electron でデスクトップアプリを開発する環境について

お世話になります JavaScriptでデスクトップアプリを開発したく React と Electron の勉強を始めました書籍を参考にしているのですが最初の簡単な動作確認的なところで躓いています Hello！Worldをブラウザに表示するというだけなのですが React の npm start では、問題ありません Electron の npm run electron-start で、アプリのウィンドウが表示されません npm run build で、出来たdist内のアプリを起動すると問題ありません念のため、React と Electron で検索してみたのですが Reactのプロジェクトの初期画面をアプリ化するものも、同様に React の npm start や buildするとうまくいくけれど Electron の npm run electron-startは、駄目という状況です npm run electron-startの際にWindows10のセキュリティ的な制約で開かないのかもしれません個別のレアなケースなのかもしれませんが情報ありましたらご教示ください

質問日時: 2023/02/08 11:16 質問者: HiroBlue

解決済

1

0
28

スマフォではボタンを表示させたくない

HTML/CSS/Javascriptを利用してボタンを表示さています。スマフォの場合、ボタンを表示させたくなく、どうにかJSを修正してみたのですが、ページ読み込み時に一瞬だけボタンが表示されます。完璧に表示されなくする為にはどのようにJSを修正したらよろしいでしょうか。恐縮ではございますがどなたかお願いいたします。 ■HTML <p id="page-top"><a href="index.html#top">PAGE TOP</a></p> ■CSS #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #e94609; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; border: 1px solid white; } #page-top a:hover { text-decoration: none; background: #ee8a66; } Javascriptをどうにか修正しようとしています。 ■下記、WEBで検索して見つかったもの $(function() { var showFlag = false; var topBtn = $('#page-top'); topBtn.css('bottom', '-100px'); var showFlag = false; //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { if (showFlag == false) { showFlag = true; topBtn.stop().animate({'bottom' : '20px'}, 200); } } else { if (showFlag) { showFlag = false; topBtn.stop().animate({'bottom' : '-100px'}, 200); } } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); ■修正後 $(function() { var showFlag = false; var topBtn = $('#page-top'); if (window.matchMedia('(max-width: 767px)').matches) { topBtn.hide(); } topBtn.css('bottom', '-100px'); var showFlag = false; //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { if (showFlag == false) { showFlag = true; topBtn.stop().animate({'bottom' : '20px'}, 200); } } else { if (showFlag) { showFlag = false; topBtn.stop().animate({'bottom' : '-100px'}, 200); } } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); });

質問日時: 2023/01/20 14:26 質問者: エビゾー

ベストアンサー

2

0
29

jquery 診断コンテンツにチェックボックスを付けたいです

jquery勉強中です。診断コンテンツ作成を試みているのですが、作り方がわからないのでどなたか助けていただけますでしょうか。やりたいことは、項目を選択して次へボタンで次の質問に進むのですが、項目を選択する際、チェックボックスを使いたいです。ようやく見つけたサンプルページがあるのですが、このような仕組みにチェックボックスを付けたいです。下記サンプルページです。 https://b-risk.jp/blog/2022/04/yes-no-contents/ どなたかご教示くださいますと幸いです。よろしくお願い致します。

質問日時: 2023/01/19 18:31 質問者: h_6812_h

解決済

3

0
30

定積分の近似値を計算する関数composite_newton_cotesをつくりたい

以下のプログラムで実行したのですがfunction newton_cotes(f,intv,n*m){　の部分でコンパイルエラーが出てしまいます。原因が分かる人いませんか？ WScript.Echo("第一段階で何等分しますか？"); var n = Number(WScript.StdIn.ReadLine()); WScript.Echo("第二段階で何等分しますか？"); var m = Number(WScript.StdIn.ReadLine()); var intv = [0,2]; var approx1 = newton_cotes(f,intv,n*m); var approx2 = composite_newton_cotes(f,intw,n,m); var exact = Math.PI; WScript.Echo("近似値1は " + approx1); WScript.Echo("近似値2は " + approx2); WScript.Echo("厳密値は " + exact); WScript.Echo("近似値1との誤差は " + Math.abs(approx1 - exact)); WScript.Echo("近似値1との誤差は " + Math.abs(approx2 - exact)); function composite_newton_cotes(f,intv,n,m){ var h=(intv[1]-intv[0])/n; var finer_intv = [intv[0],intv[0]+h]; var approx = 0; for(var i=0;i<n;i++){ approx += newton_cotes(f,finer_intv,m); finer_intv[0] += h; finer_intv[1] += h; } return approx; } function newton_cotes(f,intv,n*m){ var h=(intv[1]-intv[0])/n*m; var v = compute_weight(n*m); var x = intv[0]; var approx = 0; for(var i=0;i<=n*m;i++){ approx += f(x)*v[i]; x += h; } return approx*h; }

質問日時: 2023/01/18 14:09 質問者: なるはた

解決済

1

0
31

画面に表示したらアニメーションを開始したい

border-bottomをアニメーションで出すようにCSSを書きました。画面上に表示されたら、アニメーションを開始するようにjsで制御したのですがうまくできません。どのようにしたらよろしいでしょうか。 ■HTML <h2 class="border">期間限定商品</h2> ■CSS .border{ position: relative; } h2.border:before{ content: ''; position: absolute; left: 50%; bottom: 0; width: 0; border-bottom: solid 2px #e94609; transform: translateX(-50%); animation: border_anim 3s linear forwards; } @keyframes border_anim { 0%{ width: 0%; } 100%{ width: 100%; } }

質問日時: 2023/01/13 15:38 質問者: エビゾー

ベストアンサー

3

0
32

Typescript が必要な理由

教えてください。プログラミング初心者です。あるシステムでtypescriptとexpressを使ってWebアプリケーションのプログラムがあり、MySQLのデータベースに書き込む処理があります。 Typescriptを使っている理由が明確に分からないのですが、SQLを使っていない場合にデータベースのテーブルの型に合わせるのに有効なのでしょうか？例えばPrismaなどを間に入れて書き込み処理をさせたりする場合など。他のデータベースに切り替えたりする場合などにも有効でしょうか？

質問日時: 2023/01/07 11:45 質問者: ymoshimoshi

解決済

1

1
33

最小二乗法

Math.rand関数を使い xi(i = 1,2, ... , 1000) に [-0.1,0.1) から一様分布で値を代入すsi, (xi, x²i　e^xi) をデータとして最小二乗法によりデータとの誤差が最小になる五次式を求めるプログラムを教えてください

質問日時: 2023/01/01 20:57 質問者: なるはた

解決済

2

0
34

ソースコードのいじる場所が分かりません。

ネットで雪を降らすソースコードがありました。試しにホームページビルダーを使ってコピーして見たら縦横の寸法が凄く小さい。横は引っ張ったら伸ばせましたが、縦幅が大きくなりません。下記のソースコードで何処を操作したら、大きくなるのでしょうか？ <html lang="ja"> <head> <meta charset="UTF-8"> <title>snowPowder</title> <style> * { margin: 0; padding: 0; } #main__container { width: 100%; height: 300px; background-color: #000; overflow: hidden; display: flex; justify-content: space-around; transition-duration: 0.1s; transition-timing-function: ease; } </style> </head> <body> <div id="main__container"></div> <script> var winWidth = document.documentElement.clientWidth, //ウィンドウの横幅 winHeight = document.documentElement.clientHeight; //ウィンドウの高さ var main = document.getElementById('main__container'); for (var i = 1; i <= 40; i++) { var div = document.createElement('div'); //divを作成 main.appendChild(div); //divを追加 div.setAttribute('id', 'contents' + zeroPad(i)); div.setAttribute('style', 'position:relative; background-color:#fff; border-radius:50%; top:-30px;'); randomValue(div); } function randomValue(ele) { var multiArray = [1, -1]; //1か-1の配列 var randomMulti = multiArray[Math.floor(Math.random() * multiArray.length)]; //1か-1をランダムに取得 var maxSize = 9, //最大サイズ minSize = 3, //最小サイズ objSize = getRandomNum(maxSize, minSize), //サイズ最大〜最小までのランダム値 blurValue = getRandomNum(3, 0), //ボカシ量 opacityValue = getRandomFloot(0.8, 0.5).toFixed(1), //透明度　※小数点第1位まで取得 XSpeedNum = getRandomFloot(2, 0), //Xの移動量 YSpeedNum = getRandomFloot(4, 2), //Y座標の移動量 ZSpeedNum = getRandomFloot(0.025, 0); //Z座標の移動量 ele.style.width = objSize + 'px'; ele.style.height = objSize + 'px'; ele.style.margin = (maxSize - objSize) / 2 + 'px'; ele.style.filter = 'blur(' + blurValue + 'px)'; ele.style.opacity = opacityValue; var YNum = -40; var XNum = 0; var ZNum = 0; (function animeLoop() { var requestAnime = window.requestAnimationFrame(animeLoop); XNum += XSpeedNum; YNum += YSpeedNum; ZNum += ZSpeedNum; ele.style.top = YNum + 'px'; ele.style.left = XNum * randomMulti + 'px'; ele.style.transform = 'scale(' + ZNum + ',' + ZNum + ')'; if (YNum >= 300) { window.cancelAnimationFrame(requestAnime); return randomValue(ele); } })(); return ele; } //////////// 関数 //////////// function zeroPad(zeroNum) { //ゼロパッド取得関数 var zeroNum = ('000' + zeroNum).slice(-3); return zeroNum; } function getRandomNum(max, min) { //ランダム値取得関数 var ranNum = Math.floor(Math.random() * (max + 1 - min) + min); return ranNum } function getRandomFloot(max, min) { //ランダム値取得関数小数点第1位 var ranFlootNum = Math.random() * (max - min) + min; return ranFlootNum; } </script> </body> </html>

質問日時: 2022/12/23 02:06 質問者: 2021五郎蔵

ベストアンサー

1

0
35

台形公式

これをもとにf(x)=loge(4x²+1)の[0,1/2]の定積分を近似するプログラミングを台形公式を使い書け var n = WScript.StdIn.ReadLine(); n = Number(n); var a = 0; var b = Math.PI; var intv = [a,b]; var approx = trapezoid_approx(Math.sin,intv,n); var exact = -Math.cos(b) + Math.cos(a); WScript.Echo("近似値: " + approx); WScript.Echo("厳密値: " + exact); function trapezoid_approx(f, intv, n){ var delta = (intv[1]-intv[0])/n; var approx = 0; var left = intv[0]; var right = left + delta; for(var i=0; i < n; i++){ approx += delta*(f(left) + f(right))/2; left += delta; right += delta; } return approx; }

質問日時: 2022/12/21 18:38 質問者: なるはた

ベストアンサー

2

0
36

自作ゲームのaiについて

画像のような、棒でボールを跳ね返して、跳ね返し損なたら負けというゲームを作っています。現在は、対戦相手を自動で動かしていて、確実にボールを跳ね返してくるようになっています。対戦相手に人間らしくミスをさせるのはどうすればいいですか。

質問日時: 2022/12/13 20:22 質問者: シワメロン

解決済

2

0
37

htmlとcssに関する質問です

display:inline-block;で横向きのcssを作成してたのですがうまく横向きにならず困ってます教えてください htmlのコードがこちらです body> <figure class="side_image"> <img src="onryouri.jpg" alt="料理"> </figure> <p class="side"> 料理教室へようこそ </p> <div class="maruneko"> <img class="maruneko" src="maruneko.jpg" alt="まるい猫"> </div> <p class="side2"> 丸い猫</p> ｃｓｓはこちらです figure.side_image{ display:inline-block; } p.side{ display:inline-block; width:300px; margin-left: 20px; vertical-align: top; font-size: 30px; } img.side2{ display:inline-block; } p.side2{ display:inline-block; width: 300px; margin-left: 20px; } maruneko.jpgの横に丸い猫という文章を入れたいのですがどうも上手くいきませんよろしくお願いします。

質問日時: 2022/12/06 05:36 質問者: うるき

ベストアンサー

3

0
38

変数宣言と初期値代入の場所について

教えてください。以前も同様の質問させていただいてますが、もう少し突っ込んだ質問をさせてください。 var age; age = 20; という書き方と宣言と同時に初期化する var age = 20; があった場合ですが、分けて書く場合に何か微妙に違いが出てくるのでしょうか？分けて書く場合は、行間にもし数行何か別の実行文があったり、条件分が入っていたりすると違う動きをしてしまうとか、外から参照されて実行すると違う結果になってしまうなどの恐れがあるので、なるべく初期値を宣言と同時に代入したり、もしくは宣言と初期値代入の行をなるべく続けてにした方がいいのでしょうか？でも初期値は内容によって何を初期値とするかというのがあって条件文の中で初期値代入というのもあるかと思いますが。

質問日時: 2022/10/31 19:09 質問者: ymoshimoshi

解決済

3

0
39

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

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

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

解決済

1

1
40

プラグイン無しでContactform7にdatepickerを実装

プラグイン無しでContactform7にdatepickerを実装 Contactform7にdate（日付入力欄）を複数作成したいのですが、下記内容では、１つの入力欄しか適用されませんでした。複数の日付入力欄に適用するにはどのように変更したら宜しいのでしょうか？専門家の方お助けください。【Contactform7のテンプレートに以下記述をする】 [text datechoice id:datepicker] 【ソースのほうに以下記述を入れる。】 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script><script>jQuery(function($) { $("#datepicker").datepicker({ minDate: -1, maxDate: 0, dateFormat: 'mm月dd日' }); }); </script> 宜しくお願い致します。

質問日時: 2022/10/25 02:18 質問者: qjcyp

解決済

3

0
41

ブックマークレットについて

ブックマークレットで以下のようなコードを使っています。 javascript:window.open('https://www.○○○='+ getSelection(). toString()); 選択した文字列を加えて指定したURLに飛ぶブックマークレットです。ここから質問なんですが、このコードに現在日時から1ヶ月前をUNIX時間で加えて、指定したURLに飛ぶブックマークレットを作りたいのですが、どのようなメソッド、構文にすればいいかわかりません。例として、以下のようなURLになるようにしたい　※UNIX時間は現在日時 https://www.○○○1665282832選択した文字列参考になるWebページもあれば、それも教えていただけると助かります。よろしくお願いします。

質問日時: 2022/10/09 11:48 質問者: マリーノアール

ベストアンサー

2

0
42

正規表現について質問です。条件に合う場合はtrueを返したい

すいません質問があります。正規表現について質問です。条件に合う場合はtrueを返したいです。以下のURLがあります。 https://abc.com/detail/12345 以下の関数があります var checkProductPage = function() { var reg = /(abc.com\/details\/)(0-9]*$))/; var check = reg.test(window.location.href); return check } checkProductPage() この場合、上記関数を実行するとtrueを返します。さらに以下のURLがあります。 1. https://abc.com/detail/12345 ->true 2. https://abc.com/detail/12345xyz -> false 3. https://abc.com/detail/xyz12345 -> false 4. https://abc.com/detail/x12y345z -> false 5. https://abc.com/detail/12345?utm=12345 -> true 6. https://abc.com/detail/12345&utm=12345 -> false 上記に書いたとおりなのですが、1と5だけはtrueを返すようにして、それ以外のパターンはFalseを返すようにしたいです。先に書いた関数だと1はTrueですがそれ以外はすべてFalseです。以下のように書いてみたんですがそれでもダメでした。 var checkProductPage = function() { var reg = /(abc.com\/details\/)(0-9]*$)(\?.+)?$/; var check = reg.test(window.location.href); return check } checkProductPage() 1, 5 だけをTrueを返す関数を教えてほしいです。よろしくおねがいします。

質問日時: 2022/10/06 23:02 質問者: kemukemu2014

ベストアンサー

3

0
43

ブラウザの横幅に応じてとある画像（e.jpg）を画面いっぱいに表示できるようにしたいです。（写真の横

ブラウザの横幅に応じてとある画像（e.jpg）を画面いっぱいに表示できるようにしたいです。（写真の横幅がブラウザの横幅が変わるごとに変化する）必ずsetIntervalメソッド等を用いてブラウザの横幅を変えた際にリアルタイムに画像が変更されるようにしたいです。画像の幅をまず取得して、ブラウザの幅も取得し、ブラウザの幅が変化するごとに写真の幅も自動的にブラウザの横幅に合わせるようにしたいのですが分かりません。詳しい方回答をお願いします。

質問日時: 2022/10/06 21:17 質問者: ウィスク

解決済

1

0
44

ローディングアニメーションのロゴがページを読み込んだ後でも消えません

ローディングアニメーションを入れたいと思い、調べて、以下のサイトに辿り着いて、サイトの一番下から２番目にある、「**跳ねるうさぎちゃん**」とういタイトルのローディングアニメーションのC◆DEOENで動く、HTML,css,jsの全てコピーして、起動してみたのですが、サイトが読み込めれると、グレー色の背景はちゃんと消えるのですが、その他のロゴ（ウサギや卵、横線）のロゴ等が **消えずに動き続けてしまいます。** このロゴもちゃんと消えるようにしたいです。多分javascriptの部分だと思うのですが、どう書いたらよいでしょうか？回答よろしくお願いいたします。 [一生見てられる...カワイすぎるローディングをCSSコピペで実装！【アニメーション】 - デシノン https://deshinon.com/2019/03/03/kawaii-loading-kopipe/ 跳ねるうさぎちゃん

質問日時: 2022/09/20 21:50 質問者: jwmdatjtga

ベストアンサー

1

0
45

GASでチェックボックスを一括offしたい

スプレッドシートで添付のようなチェックリストを作りました。チェックを複数(ランダム)に入れた後、それらのチェック全てを外すGASがわからないので教えてください。・GASでなくても可能ですが、あくまでGASにこだわりたい。・チェックは自分で入れるので、外すGASだけで良いです。・添付左上の水色リセットボタンを押すとチェックが外れるようにしたいです。・チェックボックスの間に所々空白があります。以下は他を参考にして自分で作ってみたGASですが、[▷実行]ができないので多分間違っていると思います。訂正、加筆して頂いても良いですし、新しく書いて頂いても構いません。 /** @OnlyCurrentDoc */ function uncheck(button) { let spreadsheet = SpreadsheetApp.getActiveSpreadsheet(); let sheet = spreadsheet.getSheetByName('musiclist'); sheet.activate(); let range = sheet.getRange('C3:C29'); range.uncheck(); 中段最後の'musiclist'はシートの名前です。

質問日時: 2022/09/13 19:54 質問者: rocken

ベストアンサー

1

0
46

vertical sliderをautoplayしたい

以下を参考に作ったVertical Sliderを読み込み時にautoでスライドできるようにしようとしています。 https://www.learningrobo.com/2022/03/vertical-split-image-slider-using-html.html 現在、参考ページと同様に、クリックすると左右のスライドがそれぞれ上下にスライドします。これをボタンクリックを残したまま、読み込み時に自動でスライドできるようにしたいと思っています。scriptに2か所追加をいたしましたが、ボタンを押してもスライドせず、読み込み時も自動でスライドしません。何か解消方法などアドバイス頂けますと幸いです。どうぞよろしくお願いいたします。〇HTML <div class="slider-container"> <div class="left-slide"> <div style="background-color: #2c9f45"> <h4>TEST</h4> </div> <div style="background-color: #c5080b"> <h4>TEST</h4> </div> <div style="background-color: #0386ad"> <h4>TEST</h4> </div> <div style="background-color: #001100"> <h4>TEST</h4> </div> </div> <div class="right-slide"> <div class="bg-image1"></div> <div class="bg-image2"></div> <div class="bg-image3"></div> <div class="bg-image4"></div> </div> </div> 〇JS /*↓↓↓↓追加部分↓↓↓↓↓*/ window.onload = function() { /*↑↑↑↑追加部分↑↑↑↑*/ const sliderContainer = document.querySelector(".slider-container"); const slideRight = document.querySelector(".right-slide"); const slideLeft = document.querySelector(".left-slide"); const upButton = document.querySelector(".up-button"); const downButton = document.querySelector(".down-button"); const slidesLength = slideRight.querySelectorAll("div").length; let activeSlideIndex = 0; slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`; /*↓↓↓↓追加部分↓↓↓↓↓*/ for( ; ; activeSlideIndex++;){ $(slideRight).slideDown("normal"); $(slideLeft).slideUp("normal"); 　　　　} }; /*↑↑↑↑追加部分↑↑↑↑*/ const changeSlide = (direction) => { const sliderHeight = sliderContainer.clientHeight; if (direction === "up") { activeSlideIndex++; if (activeSlideIndex > slidesLength - 1) activeSlideIndex = 0; } else if (direction === "down") { activeSlideIndex--; if (activeSlideIndex < 0) activeSlideIndex = slidesLength - 1; } slideRight.style.transform = `translateY(-${ activeSlideIndex * sliderHeight }px)`; slideLeft.style.transform = `translateY(${ activeSlideIndex * sliderHeight }px)`; }; upButton.addEventListener("click", () => changeSlide("up")); downButton.addEventListener("click", () => changeSlide("down")); 〇CSS .slider-container { position: relative; overflow: hidden; width: 100%; min-height: 100vh; } .left-slide { height: 100%; width: 35%; position: absolute; top: 0; left: 0; transition: transform 0.5s ease-in-out; } .left-slide>div { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 3em; } .left-slide h4 { font-size: 22px; line-height: 32px; color: #fff; font-weight: 100; text-transform: uppercase; } .right-slide { height: 100%; position: absolute; top: 0; right: 0; width: 65%; transition: transform 0.5s ease-in-out; } .right-slide>div { background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; width: 100%; }

質問日時: 2022/08/25 14:47 質問者: apricot1101

ベストアンサー

2

0
47

functionはhtmlやjsに2度使えませんか

functionはhtmlやjsに2度使えませんか。要は、同じhtml分や、js内に2度使う、あるいは、複数jsを作って、その全部にfunctionキーを設定できるかと言うことです。具体的には、 function sample() { //ここに処理を書いていく } function sample2() { //ここに処理を書いていく } といった使い方はできないかということですがどうでしょうか。

質問日時: 2022/08/03 19:55 質問者: 福本英一

ベストアンサー

2

0
48

jsで、switch文で書かれた分をif文にできませんか。

jsで、switch文で書かれた分をif文にできませんか。以下はその文章です。できるなら、全文をお書きください。 <script type="text/javascript" language="javascript"> function onButtonClick() { selindex = document.form1.Select1.selectedIndex; target = document.getElementById("output"); switch (selindex) { case 0: target.innerHTML = "要素1が選択されています。<br/>"; break; case 1: target.innerHTML = "要素2が選択されています。<br/>"; break; case 2: target.innerHTML = "要素3が選択されています。<br/>"; break; case 3: target.innerHTML = "要素4が選択されています。<br/>"; break; case 4: target.innerHTML = "要素5が選択されています。<br/>"; break; } } </script>

質問日時: 2022/07/28 15:10 質問者: 福本英一

解決済

1

0
49

jsでifの返り値にgetelementbyidは使えませんよね。

jsでifの返り値にgetelementbyidは使えませんよね。あきらめるしかないですよね。

質問日時: 2022/07/27 20:24 質問者: 福本英一

ベストアンサー

1

0
50

switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。

switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 switch文のswitch(n)の部分を複数の値にできますでしょうか。もし無理ならばif文に変えてほしいです。以下は変えてほしいjsの文章です。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" language="javascript"> function onButtonClick() { selindex = document.form1.Select1.selectedIndex; target = document.getElementById("output"); switch (selindex) { case 0: target.innerHTML = "要素1が選択されています。<br/>"; break; case 1: target.innerHTML = "要素2が選択されています。<br/>"; break; case 2: target.innerHTML = "要素3が選択されています。<br/>"; break; case 3: target.innerHTML = "要素4が選択されています。<br/>"; break; case 4: target.innerHTML = "要素5が選択されています。<br/>"; break; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1""> <option>要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html>

質問日時: 2022/07/27 17:18 質問者: 福本英一

解決済

1

0

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

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

質問する（無料）

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

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

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

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

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

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