JavaScript

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

回答数

気になる

タグを教えてください。

HPに桜が舞い散るのを入れたいと思いサンプルのタグを探していました。 <title>ochiba</title> <style> body{ position:relative;} .ochiba{ position:absolute; top:-30px; } #ochiba0.gif{ left: 100px; animation: fall 3s linear 0s 1 normal forwards , swing0 1s ease-in-out 0s 3 alternate none ; } #ochiba1{ left: 200px; animation: fall 3s linear 1s 1 normal forwards , swing1 1s ease-in-out 1s 3 alternate none; } #ochiba2{ left: 300px; animation: fall 3s linear 2s 1 normal forwards, swing2 1s ease-in-out 2s 3 alternate none; } #ochiba3{ left: 400px; animation: fall 19s linear 3s 1 normal forwards, (下まで落ちる時間秒）(落ち始める時間） swing3 1s ease-in-out 3s 3 alternate none; } #ochiba4{ left: 500px; animation: fall 9s linear 4s 1 normal forwards, swing4 1s ease-in-out 4s 3 alternate none; } @keyframes fall{ from{ top: -30px; } to{ top: 1000px; }　　（落ちるきる位置） } @keyframes swing0{ from{ left: 150px; } to{ left:100px; } } @keyframes swing1{ from{ left: 250px; } to{ left:200px; } } @keyframes swing2{ from{ left: 350px; } to{ left:300px; } } @keyframes swing3{ from{ left: 450px; } to{ left:400px; } } @keyframes swing4{ from{ left: 550px; } to{ left:500px; } } </style> </head> <body> <img id="ochiba0" class="ochiba" src="ochiba0.gif" alt="落ち葉"> <img id="ochiba1" class="ochiba" src="ochiba1.gif" alt="落ち葉"> <img id="ochiba2" class="ochiba" src="ochiba2.gif" alt="落ち葉"> <img id="ochiba3" class="ochiba" src="ochiba3.gif" alt="落ち葉"> <img id="ochiba4" class="ochiba" src="ochiba4.gif" alt="落ち葉"> </body> </html></body> </html> 落ち葉が落ちる・・・こんなのがありました。早速ホームページビルダーを使ってやってみましたが、1回花びらが落ちてしまうとそれでお終いになってしまいます。これを繰り返し表示するには何処を修正すればよいのでしょうか？もう一つはこのタグだと落ち葉が5枚ですが、10枚にしたときはどうなりますか・・・タグの制作は全く出来ない、埼玉在住79歳老人より

質問日時: 2025/03/13 13:30 質問者: 2021五郎蔵

ベストアンサー

4

0
ラジオボタンを複数選択したときの条件分岐をしたい

下記のように複数のラジオボタンを選択した際の条件分岐をさせたいのですが、うまく動きません。「#radio01」一個だけなら動くのですが、複数だと動かないです。基本的な書き方がおかしいのでしょうか。ご教授頂けると嬉しいです。よろしくお願いします。 $(function() { $('.button').click(function(){ if($('#radio01','#radio02','#radio03','#radio04').prop('checked')){ $('.answer').show(); } }); });

質問日時: 2025/02/25 11:01 質問者: tenpraxxx

ベストアンサー

2

0
jsで質問です。 formをsubmitしてサーバー側で処理が行われて処理が完了したら、フロント側で

jsで質問です。 formをsubmitしてサーバー側で処理が行われて処理が完了したら、フロント側で処理をしたいのですが、処理が完了したかどうかわかる方法はあるのでしょうか。 Ajaxなど使用すると画面が更新されないので処理完了したことはわかりますが、サーバ側でname属性に紐付くめのを更新しても反映されないので、何か良い方法がないでしょうか

質問日時: 2025/01/31 10:00 質問者: piraniaman

ベストアンサー

5

0
JavaScriptを本で勉強しています。ほんとのほんとの序盤なのですが、本の内容に、vscod

JavaScriptを本で勉強しています。ほんとのほんとの序盤なのですが、本の内容に、vscode(エディタ)で表示し、vscodeからChrome(ブラウザ)に表示します。と記載されているのですが、 vscodeからChromeをのアプリを開いたらいいという事なのでしょうか？

質問日時: 2025/01/09 15:22 質問者: はなはな0701

解決済

2

0
2025年相性がいい人のサイトの仕組み

https://irotsuku.com/a/bu59alvj このサイト、同じ名前を入れると同じ結果が必ず帰ってくるようになっていますが、どのように計算しているのですか？ JavaScriptに詳しい方など、計算方法を1から10まで解析してほしいです！

質問日時: 2025/01/03 12:29 質問者: kenyskey

解決済

1

0
Javascript で条件分岐を使い共通コードをまとめる方法が分かりません

質問画面と回答画面の2つのファイルでQ＆A掲示板を作成しています。どちらも非同期通信（HTMLの書き換え）を行い、goo質問のように入力→確認→送信という形で設計しております。コード短縮、実装順番の変更のために response.js にコードをまとめているのですが、確認送信ボタンのみ質問画面か回答画面を if で条件分岐する必要があるため、コードの書き方が分かりません。ファイルアップロードの引数の値が質問と回答で異なるので、そこを利用して分岐したいと考えているのですが、どのように判定させればよいのでしょうか？ /* 質問＆回答画面の確認送信ボタン */ const divPostButton = document.createElement("div"); // div (子)を生成 divPostButton.classList.add("post-button"); // classの追加 child = document.createElement("button"); // button (孫)を生成 child.type = "button"; child.innerText = "入力画面へ戻る"; child.addEventListener("click", () => { change1(); input_area.style.display = "block"; // 空文字を入れることで要素内を空にできる confirm_area.textContent = ''; confirm_area.style.display = "none"; }); divPostButton.appendChild(child); // div (子要素) の末尾に child を追加 child = document.createElement("button"); // button (孫)を生成 child.type = "button"; //name属性の追加・変更 child.setAttribute("name", "output"); child.innerText = "結果画面へ進む"; child.addEventListener("click", confirm_button_click); divPostButton.appendChild(child); // div (子要素) の末尾に child を追加 /* ファイルアップロード（質問画面） */ const usericonImg = document.createElement("img"); const image_area = create_image_parts("image-partial", 3, usericonImg); /* ファイルアップロード（回答画面）*/ const usericonImg = document.createElement("img"); const image_area = create_image_parts("uploadfile-area", 0, usericonImg); /* ファイルアップロード（response.js） */ function create_image_parts(image_class, usericonIndex, usericonImg) { const image_area = document.createElement("div"); // const comment_area = document.createElement("div"); var image_count = 0; const divImagePartial = document.createElement("div"); // div (子)を生成 divImagePartial.classList.add(image_class); // classの追加 // var usericonImg; for (let i = 0; i < blobType.length; i++) { if (i == usericonIndex) { // usericonImg = document.createElement("img"); usericonImg.style.maxHeight = "85px"; usericonImg.style.maxWidth = "85px"; if (blobType[i] == "") { usericonImg.src = "<?php echo $noimage_url; ?>"; } else { usericonImg.src = blobUrl[i]; } } else { var changeImg = null; if (blobType[i] == "img") { changeImg = document.createElement("img"); } else if (blobType[i] == "video") { changeImg = document.createElement("video"); changeImg.setAttribute("controls", null); } else if (blobType[i] == "iframe") { changeImg = document.createElement("iframe"); } if (changeImg !== null) { image_count++; changeImg.classList.add("changeImg"); changeImg.style.height = "350px"; changeImg.style.width = "530px"; changeImg.src = blobUrl[i]; const divImageCameraIcon = document.createElement("div"); // div (孫)を生成 divImageCameraIcon.classList.add("image-camera-icon"); // classの追加 divImageCameraIcon.appendChild(changeImg); // image_camera_icon (子要素) の末尾に changeImg を追加 divImagePartial.appendChild(divImageCameraIcon); // uploadfile_area (親要素) の末尾に image_camera_icon を追加 } } } image_area.appendChild(divImagePartial); // image_area (親要素) の末尾に div を追加 return image_area; }

質問日時: 2024/11/22 23:56 質問者: 初心者サイト作成

ベストアンサー

1

0
CookieをWebStoeageに変える

このCookieの関数を、使い方はそのままでWebStorageに保存するように変えるにはどうすればいいでしょうか。よろしくお願いします。 function setCookie(name, value, days) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); const expires = "expires=" + date.toUTCString(); document.cookie = name + "=" + value + ";" + expires + ";path=/"; } function getCookie(name) { const nameEQ = name + "="; const ca = document.cookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; }

質問日時: 2024/11/21 13:38 質問者: 優里さん

解決済

4

0
Adobe acrobat proでフォームを準備からフォームを作成しています。emailを半角英数

Adobe acrobat proでフォームを準備からフォームを作成しています。emailを半角英数のみにしたり、他項目を全角入力のみにしたいのですが、やり方が分かりません。フォーマット→カスタム→書式スクリプトの記述にjavascriptの記述で、何か入れれば良いのかな？とは思うのですが、ググって、色々入れてみたのですが、何も起こらないです。どのようにすれば良いか分からないでしょうか？こうすれば良いよって、親身に相談受けていただける方がいらっしゃったら5000円程度でしたら謝礼したいので、よろしくお願い致します。個人的なやり取りは禁止なのかな？とも思いますが、その場合は、すいません。謝礼は出来ませんが、ご教示の程、よろしくお願い致します。

質問日時: 2024/11/10 17:17 質問者: miki1123

解決済

1

0
MediaRecorderで録音した音声を<audio>で再生しようとするとiPhoneでエラーにな

いつもお世話になっています。 jQueryで、ウェブ上で演奏できる鍵盤アプリを作っています。このアプリに録音、再生機能を搭載しようとしているのですが、なかなか思った通りに動きません。アンドロイドではうまく録音、再生できるようになったのですが、iPhoneではうまくいきません。 iPhoneでは、録音した音声を再生しようとすると<audio>コントロール上にエラーと表示され、再生できません。原因を探しやすくするために、次の通り必要最小限のコードを書きおろしました。 const 音声 = new AudioContext, 発振器 = 音声.createOscillator(), 変換 = 音声.createMediaStreamDestination(), 録音機 = new MediaRecorder(変換.stream), 再生機 = $('audio')[0] 発振器.connect(変換) 録音機.ondataavailable = e => 録音機.記憶.push(e.data) 録音機.onstop = () => 再生機.src = URL.createObjectURL(new Blob(録音機.記憶)) $('#録音').click(() => { 発振器.start() 録音機.記憶 = [] 録音機.start() }) $('#停止').click(() => { 録音機.stop() 発振器.stop() }) ページ上には、<audio>コントロール、録音ボタン、停止ボタンがあります。録音ボタンを押すと、OscillatorNodeとMediaRecorderが開始され、停止ボタンを押すと、その両者が停止し、録音した音声が<audio>コントロールで再生できるようになるという仕様です。コード中の、Blob()の第二引数に{type: 'audio/mp3'}を渡すとiPhoneで再生できるようになるのですが、今度はPCで再生できなくなったりと、最適解でない感じがします。ゴールとしては、アンドロイドでもiPhoneでも再生でき、PCの場合にはダウンロードしてローカルの音楽アプリでも再生できるようにしたいです。そのための対処方法をご教示ください。

質問日時: 2024/10/14 10:57 質問者: zyousuke

ベストアンサー

1

0
Outlookのアカウントがあるとメールを送れるようですが、私はないので送れません

その掲示板はJavaScriptを使っているようです

質問日時: 2024/10/12 02:18 質問者: LALALAJAPANEARTH

ベストアンサー

1

0
jqueryのselect2で検索欄の文字が消せない

業務で困っているためご存知の方がいらっしゃればご教授ください。バージョンなどの細かい条件がお伝えできないため参考程度で構いません。アタリがつけられればと思っています。開発環境 windows classic asp(vbscript) javascript(jquery) 経緯 html →selectタグでリスト作成 asp →oracle接続→人名データ取得→optionタグでループで全件表示 js →jqueryをインポートし、select2メソッドで実装困っていることリスト内へのデータの反映とselect2による検索欄も正常に表示されましたが、検索時に入力した文字が消せない事象が発生しています。詳細半角文字→削除不可全角文字→enter押下前削除可、押下後削除不可全選択から文字入力(上書き？)可能検索機能は正常 jqueryのファイルはダウンロード後相対パスで呼び出しており、記述の順番も確認済み。他システムでも同様のファイルを使用しており、可能性としては低そう何かイベントが発生しないと文字が消せないなどの条件があるのでしょうか、、よろしくお願いいたします。

質問日時: 2024/09/26 19:18 質問者: mmmmo777

ベストアンサー

1

0
＜tr＞指定した表の行要素をボタンクリック後に表示させる方法

最初の行のみ表示させておき、ボタンをクリックすれば全ての行が表示される実装の仕方をご教授いただきたいです。言語：Javascript <table> <tr> <th >名前</th> <th >年齢</th> <th >出身</th> </tr> <tr> <th >taro</th> <td>18</td> <td>日本</td> </tr> <tr> <th >jon</th> <td>23</td> <td>オーストラリア</td> </tr> <tr> <th >Mia</th> <td>20</td> <td>アメリカ</td> </tr> </table> <button>ボタン</button>

質問日時: 2024/09/23 00:07 質問者: mcln

解決済

4

0
食材の期限を管理するためにGASを利用しようとしたのですがうまく動作してくれません

食品の期限を管理するためにGASを利用しようとコードを参考にしたのですがうまく動作してくれないためお力をお貸し頂ければたらと思い投稿しました。 ↓以下↓ function mailSend() { var mySs = SpreadsheetApp.getActiveSpreadsheet(); //スプレッドシートを取得 var Sheet = mySs.getSheetByName('食材管理'); // シート名を取得 var today = new Date(); //今日の日付を取得 var strTo = "〇〇@gmail.com"; //To var strSender = "××"; //差出人名 var strFrom = "△△@gmail.com"; //From /* 繰り返し計算 */ for (var i = 2; i <= 200; i++) { var to_do = Sheet.getRange(i, 3).getValue(); //B列何を買った？を取得 var status = Sheet.getRange(i, 4).getValue(); //C列「個数」を取得 var limit = Sheet.getRange(i, 5).getValue(); //D列「期限」を取得 var date_limit = new Date(limit); //G列「期限」のDateを作成 var dt = date_limit.getTime() - today.getTime(); //date_limitから今日の日付を引く var day = Math.ceil(dt / 1000 / 60 / 60 / 24); //日付に変換 } if (status == "完了") /* ステータスが完了なら何もしない　*/; else if (5 <= day && day <= 7) { //締め切りの7日～5日前 /* メール本文を準備 */ var strSubject1 = to_do + "の期限まで" + day + "日です"; var strBody1 = to_do + "の消費に取り掛かりましょう。\n" /* 改行 */ + "期限まであと" + day + "日です。\n" /* 改行 */ + "\n" /* 改行 */ +"期限：" + date_limit; /* メールを送信 */ var send = GmailApp.sendEmail( strTo, strSubject1, strBody1, { from: strFrom, name: strSender } ); } else if (1 <= day && day <= 4) { //締め切りの1~4日前 /* メール本文を準備 */ var strSubject2 = to_do + "の期限まであと" + day + "日です！"; var strBody2 = to_do + "の消費は順調ですか？\n" /* 改行 */ + "期限まであと" + day + "日です。\n" /* 改行 */ + "\n" /* 改行 */ +"期限：" + date_limit; /* メールを送信 */ var send = GmailApp.sendEmail( strTo, strSubject2, strBody2, { from: strFrom, name: strSender } ); } else if (day <= 0) { //締め切り日 /* メール本文を準備 */ var strSubject3 = to_do + "の締切日を過ぎています。"; var strBody3 = to_do + "は締切日を過ぎています。廃棄は完了しましたか？\n" /* 改行 */ +"期限：" + date_limit; /* メールを送信 */ var send = GmailApp.sendEmail( strTo, strSubject3, strBody3, { from: strFrom, name: strSender } ); } } 以上になります。よろしくお願いいたします。

質問日時: 2024/08/12 15:35 質問者: haruhalharu

解決済

4

0
javascriptを使ってラジオボタンで本文の内容を切り替えたいです

javascriptのお詳しい方にお願いがあります。例えば <input type="radio" name="choice"><label>選択1</label> <input type="radio" name="choice"><label>選択2</label> <input type="radio" name="choice ><label>選択3</label> というボタンがあって、以下のような内容があった場合に <p>本文本文本文 <span class="moji1">選択1の内容</span> <span class="moji2">選択2の内容</span> <span class="moji3">選択3の内容</span> 本文本文本文 <span class="moji1">選択1の内容</span> <span class="moji2">選択2の内容</span> <span class="moji3">選択3の内容</span> 本文本文本文本文本文。</p> という内容（html）で「class="moji1」は最初から表示されていて、ボタンに応じてそれぞれに対応する（「選択2」が選択されたら「class="moji2"」）する内容だけが表示されるjavascriptはどう書けばよいのでしょうか？いろいろjavascriptを紹介しているページを見ているのですが、これと言ったものがなく、またjavascriptの知識が殆ど無いため、お知恵をお貸しいただければと思います。よろしくお願いします。

質問日時: 2024/08/05 18:03 質問者: monamaster

ベストアンサー

3

0
ビデオのJSについて

宮内庁のサイトで使われているビデオプレイヤーはなんというものでしょうか。画質が切り替えられるのが気になっています。

質問日時: 2024/08/02 21:33 質問者: 優里さん

解決済

1

1
鍵盤アプリで、スマホの画面に並んだ鍵盤をなぞった時に、触れた鍵が次々発火するようにするには

いつもお世話になっております。 jQueryでシンセサイザーのような鍵盤アプリを作ろうとしています。スマホで画面をなぞった時にドレミの音が次々に鳴るようにするにはどうすれば良いですか。例えば、次のような3個の要素に順に触れるようになぞった時には、ド、レ、ミ、と順に鳴るようにするにはどうすれば良いですか。 <style>div { border: 1px solid; padding: 1em }</style> <div></div> <div></div> <div></div> 色々調べて、次のようなコードを書いたのですが、まだうまく動きません。 const key = $('div') key.on('touchstart', function() {$(this).css('background', '#000')}) key.on('touchmove', function(e) { const tc = e.originalEvent.touches[0], top = $(this).offset().top if(tc.clientY < top || top + $(this).height() < tc.clientY) { $(this).trigger('touchend') $(document.elementFromPoint(tc.clientX, tc.clientY)).trigger('touchstart') } }) key.on('touchend', function() {$(this).css('background', '#fff')}) このコードは要素に触れるとその要素の色が変わり、離すと元の色に戻るようにしようとしています。どうも標準の動きでは、タッチ点が次の要素上に来ても、指を離すまでは次の要素でのタッチイベントは発火しないようですので、touchmoveでタッチ点を監視し、タッチ点が次の要素に切り替わった時に、前の要素で強制的にtouchendを発火させ、次の要素で強制的にtouchstartを発火させています。これにて、1個目の要素から2個目の要素に移った時に、意図した通りに色が変わりました。しかし、そのまま指を離さずに3個目の要素までなぞった時には、意図した通りに色が変わりません。この時、2個目の要素の色が消え、3個目の要素に色が付くようにしたいのですが、実際には2個目と3個目の両方の要素に色が付いてしまいます。また、このコードでは、やむなく強制的にイベントを発火させるという暴挙に出ていますが、可能であればもっと単純な書き方をご教示いただきたく存じます。

質問日時: 2024/07/29 22:18 質問者: zyousuke

ベストアンサー

5

0
<div>のタッチ状態を維持したままラジオボタンを切り替えられるようにするには

いつもお世話になっております。 jQueryでシンセサイザーを作ろうとしています。シンセサイザーの一般的な機能として、鍵盤を押したまま、他のスイッチやスライダーを操作して、発音中の音を変える事を実現したいのですが、うまくいきません。問題を再現させるための最小限のコードは次のとおりです。 <input type="radio" name="t"> <input type="radio" name="t"> <div style="padding: 1em; border: 1px solid"></div> <script src="jquery.min.js"></script> <script> const 鍵 = $('div') 鍵.on('touchstart', () => 鍵.css('background', '#000')) 鍵.on('touchend', () => 鍵.css('background', '#fff')) </script> このコードでは、鍵盤を<div>、音の変更スイッチをラジオボタンで作っています。鍵盤をタッチすると、鍵盤の色が変わり、離すと元の色に戻ります。しかし、鍵盤を押したままの状態でラジオボタンを押そうとしても反応しません。鍵盤を押したままの状態で、ラジオボタンも操作できるようにするには、どうすれば良いかご教示ください。

質問日時: 2024/07/24 22:18 質問者: zyousuke

ベストアンサー

1

0
jQueryでシンセサイザーを作っている途中なのですが、たまに指を離しても音が止まらなくなります

いつもお世話になっています。原因を探しやすくするために、必要最小限のコードを書きおろしました。次のコードは、ソとラとシの音を出す鍵盤アプリです。指が鍵盤に触れている間は音が鳴り、指を離すとその音が止まります。しかし、このアプリで演奏していると、たまに指を離しても音が止まらなくなってしまいます。その原因を教えてください。コードが読みにくくてスミマセン (>_<) <body style="margin: 0"> <canvas></canvas> <script src="jquery.min.js"></script> <script> const 鍵盤 = $('canvas'), 鍵 = [{音階: -200}, {音階: 0}, {音階: 200}], 幅 = innerWidth / 3 let 音声鍵盤[0].width = innerWidth 鍵盤.one('touchstart', () => 音声 = new AudioContext) 鍵盤.on('touchstart', e => {for(const 点 of e.originalEvent.touches) 発音(点)}) 鍵盤.on('touchend', e => {for(const 点 of e.originalEvent.changedTouches) 発音(点, 1)}) function 発音(e, 停止) { 現鍵 = 鍵[e.clientX < 幅 ? 0 : e.clientX < 幅 * 2 ? 1 : 2] if(停止) { 現鍵.発振器.stop() 現鍵.発音 = 0 } else if(!現鍵.発音) { (現鍵.発振器 = new OscillatorNode(音声, {detune: 現鍵.音階})).connect(音声.destination) 現鍵.発振器.start() 現鍵.発音 = 1 } } </script> </body>

質問日時: 2024/07/15 22:25 質問者: zyousuke

ベストアンサー

5

0
プログラミング学習

・普段からプログラミングを継続してないと忘れていきますか？・毎年、毎年、バージョンアップする度に新しい仕組みを勉強する必要がありますか？

質問日時: 2024/07/08 04:37 質問者: youarenotalone2

解決済

7

0
HTMLでサブフレームから親のスクリプトを実行する

サブフレームから親で定義したJavascriptの関数を実行しようとして以下のようにHTMLを作りました。left.htmlにあるボタンを押下すると、aaa.htmlにある関数loadを実行するようにしましたが、ボタンを押下してもalertが表示されません。load関数を実行できるようにしたいのですが、どのようにしたらよいのか、おわかりになる方、ご教示いただければありがたいです。《aaa.html（親）》 -------------------------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ja"> <head> <title>フレーム</title> <script> function load(){ alert('onload'); } </script> </head> <frameset title="サイトのタイトル" cols="100,*"> <frame src="left.html" title="左フレーム" name="left"> <frame src="right.html" title="右フレーム" name="right"> </frameset> </html> ------------------------------------------------------------------------------------------------- 《left.html（サブフレーム）》 ------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja"> <head> <title>ひだり</title> </head> <body> <p>ひだり</p> <button type="button" onclick="window.parent.load();">親</button> </body> </html> ------------------------------------------------------------------------------------------------ 《right.html（サブフレーム）》 ------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja"> <head> <title>みぎ</title> </head> <body> <p>みぎ</p> </body> </html> ------------------------------------------------------------------------------------------------ よろしくお願いします。

質問日時: 2024/05/25 20:42 質問者: yuzutosan

ベストアンサー

1

1
javaScriptのコードの修正をお願いします。

Scriptのログを見てください。倍率が30倍から減少していくのですが、最初のうちは、減少幅が細かくないのですが if (losecount >= 20) { varix = 1.22; } if (losecount >=50) { varix = 1.33; このコードあたりから減少幅が細かくなって次の倍率にすぐ変わりません。 6倍率には八回も同じ6倍の中で減少しています。せめて三回ぐらいにScriptのロジックがなるように修正をお願いします。下がログです。 Betting: 0.0010000 X 30.00 Betting: 0.0011500 X 27.27 Betting: 0.0013225 X 25.00 Betting: 0.0015209 X 23.08 Betting: 0.0017490 X 21.43 Betting: 0.0020114 X 20.00 Betting: 0.0023131 X 18.75 Betting: 0.0026600 X 17.65 Betting: 0.0030590 X 16.67 Betting: 0.0035179 X 15.79 Betting: 0.0040456 X 15.00 Betting: 0.0046524 X 14.29 Betting: 0.0053503 X 13.64 Betting: 0.0061528 X 13.04 Betting: 0.0070757 X 12.50 Betting: 0.0081371 X 12.00 文字数の関係でこの間のログは削除してます。 Betting: 0.2170874 X 6.98 Betting: 0.2648466 X 6.82 Betting: 0.3231129 X 6.67 Betting: 0.3941977 X 6.52 Betting: 0.4809212 X 6.38 Betting: 0.5867239 X 6.25 Betting: 0.7158031 X 6.12 ここから下がScriptコードです。 var config = { baseBet: { label: 'Base Bet', value: 0.001, type: 'number' }, startingChance: { label: 'Starting Chance', value: 0.033, type: 'number' }, stopWinPercentage: { // 勝率での停止パーセンテージ label: 'Stop Win Percentage', value: 10, // 任意のパーセンテージに変更 type: 'number' }, stopLossPercentage: { // 敗率での停止パーセンテージ label: 'Stop Loss Percentage', value: 10, // 任意のパーセンテージに変更 type: 'number' }, }; var chance = config.startingChance.value; var currentPayout = ((1 / chance) * 3); var losecount = 0; var betcount = 0; var varix = 1.10; var previousBet = currentBet; var runningbalance = currency.amount; var originalbalance = currency.amount; var baseBet = config.baseBet.value; var currentBet = baseBet; function main() { game.onBet = function () { game.bet(currentBet, currentPayout).then(function (payout) { runningbalance -= currentBet; previousBet = currentBet; betcount += 1; if (payout > 1) { var netwin = currentBet * currentPayout; runningbalance += netwin; currentBet = baseBet; losecount = 0; chance = 0.1; varix = 1.10; } else { if (losecount >= 20) { varix = 1.22; } if (losecount >=50) { varix = 1.33; } losecount += 1; currentBet = previousBet * varix; chance += 0.01; } currentPayout = ((1 / chance) *3); if (betcount % 100 == 0) { logSummary(); } log.info('Betting: ' + currentBet.toFixed(7) + ' ' + ' X ' + ' ' + currentPayout.toFixed(2)); // 勝率での停止条件 if (calculateWinPercentage() >= config.stopWinPercentage.value) { log.success('Reached stop win percentage. Stopping the script.'); game.stop(); } // 敗率での停止条件 if (calculateLossPercentage() >= config.stopLossPercentage.value) { log.error('Reached stop loss percentage. Stopping the script.'); game.stop(); } }); } } function logSummary() { var netNumber = runningbalance - originalbalance; var netPercentage = (netNumber / originalbalance) * 100; if (originalbalance < runningbalance) { log.success('Total Profit: ' + netNumber.toFixed(7) + '(' + netPercentage.toFixed(2) + '%)'); } else { log.error('Total Profit: ' + netNumber.toFixed(7) + '(' + netPercentage.toFixed(2) + '%)'); } } // 勝率の計算 function calculateWinPercentage() { var netNumber = runningbalance - originalbalance; return (netNumber / originalbalance) * 100; } // 敗率の計算 function calculateLossPercentage() { return -calculateWinPercentage(); // 勝率を逆転させたもの }

質問日時: 2024/05/16 12:38 質問者: marupon

ベストアンサー

1

0
JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違っ

JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違ってるのでしょうか。助けてください、、↓ <!DOCTYPE html> <html lang="en"> <head> <Script Language = "JavaScript"> {//alert ("I am here"); fname= document.getElementById("fname").value; document.write ("fname"); } </Script> <title>Customer Relationship Manager</title> </head> <body> <Br> <h3>Costomer Sending Form</h3> <Br> <form method = "post" Name ="input" onSubmit = "submit"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <Br><Br> <center><input type="submit" value="submit"></center> </form> </body> </html>

質問日時: 2024/05/02 08:00 質問者: べいびーべるーが

解決済

3

0
ブラウザ自体の事じゃなくて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

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

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

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

質問する（無料）

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

釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

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

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

今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
大麻の使用罪がなかった理由や法改正での変更点、他国との違いを弁護士が解説

ドイツで2024年4月に大麻が合法化され、その2ヶ月後にサッカーEURO2024が行われた。その際、ドイツ警察は大会運営における治安維持の一つの方針として「アルコールを飲んでいるグループと、大麻を吸っているグループ...