JavaScript(11ページ目)

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

回答数

気になる

htmlで取得した値をjavascriptの変数に代入したい

タイトルの通りですが、htmlの値をjavascriptの変数に代入したいです。具体的には【html】 <tr> <th id="number1">1</th> <th id="number2">2</th> <tr> 【js】 const number1 = document.getElementById("number1"); const number2 = document.getElementById("number2"); let number3 = number1 + number2; console.log(number3); と試して見たのですがコンソールに「3」と出力されることなく let cash = document.getElementById("cash"); ^ ReferenceError: document is not defined とエラーが出てしまいました。このエラーの意味と値を取得する方法を教えていただきたいです。

質問日時: 2020/11/27 14:57 質問者: newsin

解決済

1

0
JavaScript canvas グラデーションをアニメーションしたい

イラストとグラデーションを作成したのですが、グラデーションの色を流れているように動かすにはどうしたら宜しいでしょうか？グラデーションのライブラリもあるらしいのですが、それを使わずにソースコードを記述する方法が知りたいです。下記は作成したソースコードになります。 <html> <head> <meta charset="utf-8"> </head> <body> <canvas id="line" width="450" height="450"></canvas> <script> var line_canvas = document.getElementById("line"); var line_ctx = line_canvas.getContext("2d"); var grad = line_ctx.createLinearGradient(0,0,360,240); grad.addColorStop(0 ,'blue'); grad.addColorStop(0.5, 'aqua'); grad.addColorStop(1, 'gray'); line_ctx.strokeStyle = grad; line_ctx.beginPath(); line_ctx.moveTo(100,-100); line_ctx.lineTo(0,200); line_ctx.lineTo(100,200); line_ctx.lineTo(50,400); line_ctx.lineTo(200,150); line_ctx.lineTo(80,150); line_ctx.lineTo(67,0); line_ctx.stroke(); line_ctx.fillStyle = grad; line_ctx.fill(); </script> </body> </html>

質問日時: 2020/11/26 16:44 質問者: 零礼

ベストアンサー

6

0
javaScriptでグローバル変数に値が入らないのはなぜ？

javaScriptでChromeの画面を操作しようとしているのですが、スクリプトの最初に var wCode = ""; と宣言しまして、タイムインターバル（setInterval）で1分毎に動く関数を作成、 addリスナー（addEventListener）関数で、別スクリプトから、変数 wCode に値をセットしました。（値のセットは確認できました）グローバル変数だからタイムインターバルの関数でも、イベントリスナーでセットされたタイミングで、 wCode に値が入る思っていましたが、値が入ってきません。なぜでしょう。１分毎に画面の状態を監視するスクリプトにしたいのです。作り方に何か問題があるのでしょうか。いわゆるマニフェストを作成して、準備したコンテンツＪｓではローカルファイルのデータを読むことができないように、何かの制約があるのでしょうか。ちなみにソースは別の場所にあるので、残念ながら掲載できません。変数のスコープと言うものを勉強してみましたが、特に潰し合いをするような作りもしていないつもりです。この質問の原稿を書いていて思いついたのは、イベントリスナーの関数の中に、入れ込むような形で、タイムインターバルの関数を書けば、解決できるでしょうか。 javaScriptは初心者なので教えてください。よろしくお願いします。

質問日時: 2020/11/24 23:31 質問者: VT250F

ベストアンサー

2

0
javaScript(canvas)で図形(イラスト)を作りたい

題名の件、簡単な図形を作れることは知っていますが、簡易的なイラストとかを作ることはできるのでしょうか？例えばイナズママークとか。 https://illust8.com/contents/1085 lineToを繋げて作れるかと思ったのですが、思うように線が引けません。教えて頂きたくお願い致します。

質問日時: 2020/11/24 08:10 質問者: 零礼

ベストアンサー

4

0
画像クリックでクリックした画像と、同時に他の場所にある画像も変えたい

①画像が複数あり、いずれもクリックで、その画像を異なる画像に切り替える ②①とは違う場所にある画像も同時に切り替える（または非表示にする）１クリックで２つ同時に処理できますか。ネットでいろいろ探してやったのですが思うようにできず… <input type="image" src="a.png" onclick="connector() ; this.src='1.png'" width="140" onfocus="this.blur();"> <input type="image" src="a.png" onclick="connector() ; this.src='2.png'" width="140" onfocus="this.blur();"> <input type="image" src="a.png" onclick="connector() ; this.src='3.png'" width="140" onfocus="this.blur();"><p> <img id="b" src="3.png" data-second-image="0.jpg" width="140" > <img id="a" src="1.png" data-second-image="0.jpg" width="140" > <img id="c" src="2.png" data-second-image="0.jpg" width="140" ><p> <script> var notc = 0; var cnt = document.getElementById("a"); var dftc = cnt.src; function connector(){ notc++; switch(2 - notc){ case 1: cnt.src = cnt.dataset.secondImage; break; case 0: cnt.src = dftc; notc = 0; break; }}</script> こんな感じにしたい… 　左aクリック→1に切り替わり、同時に下に配置している1が0に変わる　中aクリック→2に切り替わり、同時に下に配置している2が0に変わる　右aクリック→3に切り替わり、同時に下に配置している3が0に変わるよろしくお願いします。

質問日時: 2020/11/20 19:27 質問者: eum130

ベストアンサー

1

0
動画を再生中/一時停止中にボタンを押すと、ボタンの色が変わって、押した時間から五秒後に自動的にボタン

動画を再生中/一時停止中にボタンを押すと、ボタンの色が変わって、押した時間から五秒後に自動的にボタンの色が元に戻るようにしたいと思います。currenttimeを取得して五秒後と比較するのかなと思うのですが、どうもうまくプログラムできません。教えてください。

質問日時: 2020/11/20 17:59 質問者: ぽん太1号

ベストアンサー

2

0
JavaScriptのsort()について

JavaScriptのsort()アルゴリズムですが、下記のコールバック関数で、 a-bは、配列の後ろの要素から前の要素を引いているようなのですが、下記の例では、 "here1"の場合、すなわち-1を戻り値とする場合に、２つの要素のインデックスを入れ替えて、 "here2"の場合、すなわち1を戻り値とする場合に、２つの要素のインデックスを入れ替えないという理解で正しいでしょうか？（ネットの説明を読むと、ここが逆になるように書いてあるので確認のため聞いています。）また、この場合のソートのアルゴリズムは何を使っているのでしょうか？（例えば、クイックソートとか？） >var a = [5,3,9,1,10]; >a.sort(function(a,b){ >....if( a < b ) { console.log("here1 " + (a-b)); return -1; } >....if( a > b ) { console.log("here2 " + (a-b)); return 1; } >....return 0; >}); >here1 -2 >here2 6 > here2 4 >here1 -4 >here1 -2 >here2 5 >here2 1 >(5) [1, 3, 5, 9, 10]

質問日時: 2020/11/19 20:21 質問者: tmiyoshi

解決済

2

0
JavaScriptのfor文の基本的な書き方について

JavaScript初心者です。テキストを見ながらBracketsというアプリを使ってコードを書いてますが、for文でエラーが出てしまい、実行出来ません。 var lists = ['A', 'B', 'C', 'D' ]; for ( var i = 0; i < lists.length; i++ ) { console.log ( lists[ i ] ); } という構文を書くと、「(for(の後の) varを関数の上に移動させろ」というエラーメッセージが出てきますが何処に移動させれば良いのか分かりません。ネットに載ってるコードをそのままコピペしても同じエラーが出ます。分かる方、教えてください。

質問日時: 2020/11/19 12:21 質問者: gp2583tk

ベストアンサー

3

0
google apps script スクレイピング

GASでスクレイピングを勉強し始めました。データを取得するのに、できないサイト（？）でつまづいています。 ※取得するのにライブラリで［Parser］を使用しています。取得しようと思っているサイト 'nisa.morningstar.co.jp/fund_list.html の順位やファンドなどのテーブルやってみたこと var morningstarURL0 = nisa.morningstar.co.jp/fund_list.html; var morningstarHTML0 = UrlFetchApp.fetch(morningstarURL0).getContentText(); var morningstar0 = Parser.data(morningstarHTML0).from('<table data-table="index">').to('</table>').iterate(); var morningstar1 = Parser.data(morningstar0[0]).from('<tbody id="nisa_table_1">').to('</tbody>').iterate(); 上記のコードだとmorningstar1 は<thead></thead>の間のデータしか取れませんでした。ちなみに、スプレッドシート関数で =IMPORTDATA("nisa.morningstar.co.jp/fund_list.html") とやるとセル内に <tbody id="nisa_table_1"></tbody> となり、取得したいデータたちが表示しません。そもそも取得できないサイトなのか、勉強不足でコードがよくないのか、他の方法で取得するのか、わからなくなってきました。何が問題なのか、どうすればうまく取得できるのか、教えていただけたらと思います。よろしくお願いします。

質問日時: 2020/11/17 20:49 質問者: こかぶ

ベストアンサー

2

0
jQuery ui Datepicker 明日以降のみ選択出力形式に曜日土日祝だと1を返す

予約カレンダーフォームにて、jQuery ui Datepickerで日付選択できるようにしています。カレンダーは祝日をだしたりなどはネット検索して出るようになったのですが、下記３点ができません。＜やりたいこと＞１：明日以降~６か月先まで選択可能２：選択した日付の出力形式に曜日を出す。　2020/11/20（木）３：選択した曜日が土日祝なら$weekend='1';などを返し、その後のラジオボタンで平日の表示と休日の表示を分ける参照値にしたい。 $(function() { $("#datepicker").datepicker(); $("#datepicker").datepicker("option", "showOn", 'both'); $("#datepicker").datepicker("option", "buttonImageOnly", true); $("#datepicker").datepicker("option", "buttonImage", 'image/reserve/cal_icon.png'); $("#datepicker").datepicker().holiday(); $("#datepicker").datepicker({ minDate: '+1d', maxDate: '+6m', dateFormat: 'yy/mm/dd(DD)' }); }); １に関しては、ネット上でたくさんの方が書いておられ、どれもおなじような書き方なので、間違っていないように思うのですが、なぜかでません。ご教授よろしくお願いします。

質問日時: 2020/11/16 07:07 質問者: chaチャチャ

ベストアンサー

6

0
サクラエディタについて

最新版をインストールしましたが変数宣言のlet、constが使えません。何か設定しなければいけませんか？

質問日時: 2020/11/15 04:47 質問者: テトラ11

解決済

2

0
画像をクリックで、２回新しい画像に切り替える方法を教えてください。

A.jpgを5つ表示させ、クリックで次の画像（B.jpgまたはC.jpg）に切り替えます。切り替えた画像をクリックで、さらに次の画像に切り替えたいです。イメージ画像を添付します。例えば、１番左のA.jpgクリックでB.jpgを表示させ、B.jpgクリックでD.jpgを表示させたいです。 A.jpgからB.jpgへの切り替えはOnclickで出来たのですが、そのあとが分かりません。JavaScriptもよく分かっていない初心者です。。。すみませんが、よろしくお願いします。

質問日時: 2020/11/14 16:20 質問者: eum130

ベストアンサー

3

0
Google Apps Script でフォームの回答内容に応じて、異なるメールアドレスにメールを

Google Apps Script 。フォームの回答内容に応じて、異なるメールアドレスにメールを自動で送るスクリプトを教えていただけませんか？当方、GASの知識が全然ありません。学校で子どもの出欠席を保護者がフォームで連絡するようにしたいのですが、例えば、｢お子さんの学級は？｣の質問の回答が｢1年1組｣だったら、1年1組の担任のメールアドレスに通知を送る･･･のように、選択された学級ごとに、通知を送るアドレスを変えたいです。このようなスクリプトは可能でしょうか？よろしくお願いします。

質問日時: 2020/11/08 18:28 質問者: reirain

解決済

1

0
親ページからスクロールバー表示・非表示を制御する

Elfsightというサービスを使用し、動画リストを一覧表示させようとしています。現在、一覧をスクロールバーを用いて表示させることまでできたのですが、サービスの仕様で、最初に全ての動画をロードせず、スクロールバーをクリックすると全ての動画がロードされます(サービスに確認済)。これを親ページでサービス呼び出し後、スクロールバークリックのイベントを入れたらいいか、もしくは、サービス呼び出し時に全ての動画をロードしてからスクロールバーを表示したらいいのか、とスクリプトを作ってみましたが、うまくいきません。何か確認する箇所など教えていただけますようお願いいたします。 <全てロードしてからスクロールバー表示> //サービスの呼び出し //サービスのカスタムCSS上でoverflow-yはhiddenに設定 <script src="https://apps.elfsight.com/p/platform.js" defer></script> <div id="test"> <div class="elfsight-app-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></div> </div> //testをロードしたらスクロールバー表示 <script> $(function(){ $('#test').on('load', function(){ $('#test').contents().find('body').css('overflow-y','scroll'); }); }); </script> ＜サービス呼び出し後、スクロールバークリックのイベント＞ //サービスの呼び出し //サービスのカスタムCSS上でoverflow-yはscrollに設定 <script src="https://apps.elfsight.com/p/platform.js" defer></script> <div id="test"> <div class="elfsight-app-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></div> </div> //スクロールバークリックのイベント <script> $(function(){ //スクロールをイベント window.addEventListener('scroll', () => { ??? }); </script> 念のため現状を添付いたします。やりたいことは最初から3を表示させたいと思っています。どうぞよろしくお願いいたします。

質問日時: 2020/11/06 10:26 質問者: apricot1101

ベストアンサー

1

0
画像の下に説明文をつけて切り替えていきたい

画像を切り替えるのにJava Scriptで <body> <div align="center"> <img id="mypic" src="./jpg/1.jpeg" height="600px"><br> <input type="button" value="戻る" onclick="go_back()"> <input type="button" value="進む" onclick="go_forward()"> </div> <script> var pics_src = new Array("jpg/1.jpeg","jpg/2.jpeg","jpg/3.jpeg"); var num = 0; function go_forward(){ if (num == 2) { num = 0; } else { num ++; } document.getElementById("mypic").src=pics_src[num]; } function go_back(){ if (num == 0) { num = 2; } else { num --; } document.getElementById("mypic").src=pics_src[num]; } </script> </body> としようと思っています。同時に、この画像の説明文（全角で20文字くらい）を画像の下、または中に表示させたいと思っています。画像にPaintで描きこむことを考えましたが、画像数が数百あり、現実的でありません。頭の中では1.text,2.twext,3.textというファイルを作り、その中に説明文20字程度を記入、それをhtmlで表示できればと思っていますが、どうにも進みません。教えてください。

質問日時: 2020/11/03 10:00 質問者: Proton1111

ベストアンサー

2

0
GAS アンケート回答後の自動返信メールに回答内容を入れたくない

GASで回答内容反映させたスプリクトは組めたのですが、アンケートが結果が長すぎるので回答内容は反映させずに『〇〇様回答ありがとうございました。集計結果は後日配信いたします。』だけにするには、どこを削ればいいのかご教授頂ければ助かります！！ GAS function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------------------------------ // 設定エリアここから //------------------------------------------------------------ // 件名、本文、フッター var subject = "[制度アンケートご回答ありがとうございます]"; var body = "回答ありがとうございました。集計結果は後日配信いたします。\n\n"; // 入力カラム名の指定 var NAME_COL_NAME = '名前'; var MAIL_COL_NAME = 'メールアドレス'; //------------------------------------------------------------ // 設定エリアここまで //------------------------------------------------------------ try{ // スプレッドシートの操作 var sheet = SpreadsheetApp.getActiveSheet(); var rows = sheet.getLastRow(); var cols = sheet.getLastColumn(); var rg = sheet.getDataRange(); Logger.log("rows="+rows+" cols="+cols); // メール件名・本文作成と送信先メールアドレス取得 for (var i = 1; i <= cols; i++ ) { var col_name = rg.getCell(1, i).getValue(); // カラム名 var col_value = rg.getCell(rows, i).getValue(); // 入力値 ////////////下記を入れる//////////////// if (col_name === "タイムスタンプ"){ continue; } ////////////////上記を入れる//////////// body += "【"+col_name+"】\n"; body += col_value + "\n\n"; if ( col_name === NAME_COL_NAME ) { body = col_value+" 様\n\n"+body; } if ( col_name === MAIL_COL_NAME ) { to = col_value; } } // 送信先オプション var options = {name: sendername}; if ( cc ) options.cc = cc; if ( bcc ) options.bcc = bcc; if ( reply ) options.replyTo = reply; // メール送信 if ( to ) { MailApp.sendEmail(to, subject, body, options); }else{ MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body); } }catch(e){ MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message); } }

質問日時: 2020/10/30 16:03 質問者: PTJ三浦

ベストアンサー

1

0
引数を渡さずに呼び出し元の変数等を参照できますか

引数を渡さずに呼び出し元の変数等を参照できますか。例えば次のように、呼び出し元で定数を定義して、 const hs = [{name: 'ディープ', no: 1}, {name: 'オルフェ', no: 2}] .jsファイルで次のようにhsを使いたいです。 function fn() {document.write(hs[0].name)}

質問日時: 2020/10/30 15:09 質問者: zyousuke

ベストアンサー

3

0
プログラミングわからない

頭文字となるひらがな1文字を入力したらあらかじめ集めておいた単語の中からランダムに表示するようなことはどの言語でどのようなコードを書いたらできますか？

質問日時: 2020/10/24 01:08 質問者: zer0_0922

ベストアンサー

2

0
プログラミング言語について

入力された文字に対応した結果を別ページで表示する物をつくりたいのですが、どの言語が適しているとおもいますか？ javascriptでは難しいのでしょうか

質問日時: 2020/10/23 22:04 質問者: zer0_0922

ベストアンサー

2

0
javascript 複数のラジオボタンによって制御する文字列の表示

2つのラジオボタンが変更され、又、初期値に戻った時の制御について教えてください。 <form name="form1" id="form1"> <div> <input type="radio" name="sel1" id="sel1" value="0">111 <input type="radio" name="sel1" id="sel1" value="1" checked>222 </div> <div> <input type="radio" name="sel2" id="sel1" value="0" checked>AAA <input type="radio" name="sel2" id="sel1" value="1">BBB </div> <span name="status" id="status">あいうえお</span> ----------------- sel1=1「222」、sel2=0「AAA」　の選択が初期値で、statusに「あいうえお」と表示されています。フォーム内で、sel1、又は、sel2が変更された際に、statusの「あいうえお」の文字を「変更中」と表示し、初期値の、sel1=1「222」、sel2=0「AAA」の選択状態に戻った時は、 statusの文字列も初期値の「あいうえお」と表示を戻したいです。どのようにJavascriptで制御すればよろしいでしょうか。宜しくお願い致します。

質問日時: 2020/10/18 23:30 質問者: mintohime

ベストアンサー

1

0
ボタンで配列に代入

javascript cuepoint.jsで、動画に字幕をつけようと思います。slidesに配列変数があり、 var slides= {ｎ秒： “文章”, ｎ秒： “文章” ｎ秒： “文章”.} 秒と文章の間はコロン、途中はカンマ、最後はドットと続けることになってます。映画の字幕が、本来の使い方と思いますが、私はバスケ動画の得点者を字幕として出そうと思います。さとう、やまだ、と選手達の名前のボタンを用意して、シュートが決まったら何分何秒、やまだ、と出るようにしたいと思います。ボタンを押したらvalue値を取得して変数の文章のところに書き込みをしたいのですがどうしたら良いでしょう。 <button type="button" name="button1" value="やまだ"> <script> 時間は動画のcurrenttime、ボタンのバリュー値を取ってきてslides.push {ct :value}でいけるのかなと思ったのですが式が組み立てられません。この時、行が続く場合は,をつけてあげなければいけません。よろしくご指導ください。教えていただけないでしょうか。

質問日時: 2020/10/17 20:05 質問者: ぽん太1号

ベストアンサー

3

0
JavaScript スライドの画像にリンクを貼りたい

お世話になっています。ウェブサイトに画像が切り替わるスライドを設置しています。この画像にリンクを貼ることは可能でしょうか…？ <script type='text/javascript'> $('#imageSlideContainer').crossSlide({ sleep: 5.0, fade: 1.8 }, [ { src: 'img/topimage01.jpg' }, { src: 'img/topimage02.jpg' }, { src: 'img/topimage03.jpg' }, { src: 'img/topimage04.jpg' }, { src: 'img/topimage05.jpg' }, ]); </script>

質問日時: 2020/10/15 09:53 質問者: AKINA100

解決済

2

0
Gif画像のアニメーションが再生されない。

Webページを作成しており、背景にGIF画像を使用しています。自身のローカル内だとGIF画像が常に連続で動いているのですが、サーバーにアップするとGIF画像が数秒で止まって動かなくなります。問題を解決する為、下記URLの内容を試みたのですがうまくいきません。 https://qiita.com/kameo0501/items/dfc2ef45a85221ccc4b1 下が、ソースコードになります。教えて頂きたくお願い致します。 HTML： <div class="main_page">←※今回の背景部分 <div class="main_content clearfix"> <div class="left_page"> <div id="id_top" class="title_back" > <h2>Information</h2> </div> <div id="id2_top" class="box_content" > <ul> <li class="contents"> <span>2020/09/27</span> <a href="" class="text_contents">新しい情報を更新しました。</a> </li> ~~~~~~~~~~~~~~~~~~以下略~~~~~~~~~~~~~~~~~~~~~~~~~ </ul> </div> </div> </div> ______________________________________________________________________ CSS： .main_page { background: url(../images/electronic_round_blue.gif) no-repeat; } _____________________________________________________________________ JavaScript： let gifImage = document.querySelector('.main_page'); gifImage.src = '../images/electronic_round_blue.gif?' + (new Date).getTime();

質問日時: 2020/10/12 16:32 質問者: 零礼

ベストアンサー

1

0
【JavaScript】イベント伝播の意味がわかりません。

イベント伝播の意味がわからず調べていました。おおよそ以下のような事が書いてあります。 ------------------------------------- イベントの伝播の道筋イベントが発生したら、以下の道筋を辿ります。 ①キャプチャーフェーズ windowからその子へ、そしてその子へ、、と順従に目的のノードに向かってイベントが走るフェーズ。 ②ターゲットフェーズイベントが発生した要素にイベントが伝わるフェーズ ③バブリングフェーズイベント発生元から親へ向かって順々にイベントが走るフェーズ。 https://images.app.goo.gl/iYsRUdfcmDv7Qa5SA ------------------------------------- 上の説明では意味が全く理解できませんでした。サンプルとして記述してあったうち簡単な記述のものを実際に打ち込んでみました。 sample1 の記述だと親子とブラウザに表示されます。「親」のテキストをクリックすると（親だよ）。「子」のテキストをクリックすると（子だよ）と書かれたアラートが出てきます。 sample2に関しては、親ノードから子ノードを取得してクラスをつけたり、外したりします。これの何がイベント伝播がなのか理解ができません。学習中の初心者です。どなたか「JavaScriptのイベント伝播」について分かりやすく教えていただけないでしょうか？宜しくお願いします。＊sample 1 ********************************** (HTML) <div id="parent"> 親 <div id="child"> 子 </div> </div> --------------------- (JavaScript) document.getElementById('parent').addEventListener('click',()=>{ alert('親だよ'); }); document.getElementById('child').addEventListener('click',()=>{ alert('子だよ'); }); ＊sample ２ ********************************** (HTML) <style> li { cursor: pointer; } li.done { text-decoration: line-through; } </style> </head> <body> <ul> <li>Todo</li> <li>Todo</li> <li>Todo</li> </ul> </body> --------------------- (JavaScript) 'use strict'; { document.querySelector('ul').addEventListener('click', e => { if (e.target.nodeName === 'LI') { e.target.classList.toggle('done'); } }); {

質問日時: 2020/10/10 13:55 質問者: boulevard5

解決済

3

1
JavaScripでラベル名（赤、青、黄）を取得したい。

以下に記述しているHTMLとJavaScriptでは valueの値、red, blue, yellowしか取得できません。 HTMLからvalue属性を外すと”on”しか出てきません。このようなHTMLが記述されている場合、どうすればラベル名(赤、青、黄)を取得できますか？分かる方いらっしゃいましたら教えて下さい。宜しくお願いします。 (HTML) 　 <input type="radio" name="color" value="red">赤 <input type="radio" name="color" value="blue">青 <input type="radio" name="color" value="yellow">黄 <button>Add!</button> <ul> </ul> ------------------------------------- (JS) 'use strict'; { document.querySelector('button').addEventListener('click', () => { const colors = document.querySelectorAll('input'); let selectedColor; colors.forEach(color => { if (color.checked === true) { selectedColor = color.value; } }); const li = document.createElement('li'); li.textContent = selectedColor; document.querySelector('ul').appendChild(li); }); }

質問日時: 2020/10/08 16:38 質問者: boulevard5

解決済

2

0
JavaScript正規表現について

下記ソースコードにて正規表現を作成しました。 (一部のみ抜粋) HTML: <form action="send.html" method="POST" id="contact"> <div class="item"> <label for="postal_code" class="label">郵便番号</label> <input type="text" name="question" id="postal_code" style="width: 55px;">－<input type="text" name="question" id="postal_code2" style="width: 90px;"> </div> <div class="s_button"> <input type="submit" name="submit" id="submit"> </div> </form> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ JavaScript: document.getElementById('contact').onsubmit = function() { let textvalue3 = document.getElementById('postal_code').value; let textvalue4 = document.getElementById('postal_code2').value; if(!textvalue3.match(/^(\d+){3}$/) || !textvalue4.match(/^(\d+){4}$/)) { window.alert('半角数字の入力、桁数の確認願います(郵便番号)'); return false; } }; ■半角数字以外は入力禁止 ■左側テキストボックスは3桁以外での入力禁止、右側テキストボックスは4桁以外での入力禁止問題は2番目なのですが、左側3桁入力の部分にて1桁、2桁の場合は下記ソースコードのアラートが出力されます。ですが4桁以上の入力をすると、なぜかアラートが出力されません。下の正規表現では3桁ぴったりの入力でそれ以外はアラートが出るように記述してるのに、なぜか4桁以上の出力でもアラートが出ない様になっています。右側の4桁以上も同様で、 1桁、2桁、3桁はアラートが出力されますが、5桁以上の場合でもアラートが出力されませんまとめ： ■左側テキストボックス(3桁指定)： 1桁、2桁はアラートがでる。 4桁以上はアラートがでない。 ■右側テキストボックス(4桁指定)： 1桁、2桁、3桁はアラートが出る 5桁以上はアラートが出ない桁数を指定しているのになぜ？桁数を指定しているのになぜ、その桁数以上が条件に通ってしまうのでしょうか。教えて頂きたくお願い致します。

質問日時: 2020/10/08 16:13 質問者: 零礼

ベストアンサー

1

0
Twitterの埋め込みしたWebページの速度を上げる方法

Webページを作成してるのですが、Twitterの埋め込みをいれると読み込みが遅い時があります。最初にローディング画面を表示するようにして、一秒後ぐらいにWebページが表示されますが、十数回に一度ぐらいの割合でローディング画面がかなり長くなってしまう時がある。試みてみた事：・twitterのソースコード(下記)部分に「async」(非同期通信)を削除する →あまり効果を実感できず <a class="twitter-timeline" data-width="250" data-height="350" href="https://twitter.com/isekaiizakaya?ref_src=twsrc%5Etfw">Tweets by isekaiizakaya</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></scr ・addEventListenerのイベントをload→domcontentloadedに変更 →早くなるが反対に遅延があった時しかLoading画面が表示されなくなる(画像やスタイルシートを待たずに発生する) window.addEventListener('domcontentloaded', function(){ document.getElementById('gif').classList.add('loaded'); }); ・試しにTwitterの埋め込み部分を削除してみる →30数回程行ったが遅くなることはなかった (Twitter埋め込み以外に外部リンクが2つあった状態で行ったが遅延は起きなかった。また、逆にTwitter埋め込みのみの状態を行ったが、遅延は起きた) Twitterの埋め込みがある状態で遅延が起きなくなる方法がありましたら、教えて頂きたくお願い致します。全体ソースコード(一部のみ抜粋)； HTML: <div id="gif"></div> <div id="id3_top" clss="twitter_page"> <a class="twitter-timeline" data-width="250" data-height="350" href="https://twitter.com/isekaiizakaya?ref_src=twsrc%5Etfw">Tweets by isekaiizakaya</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <div id="id4_top" class="banner"> <a href="https://www.aist.go.jp/"><img src=images/top_bnr_univ_shindan.png class="link_banner"></a> </div> <div id="id5_top" class="banner"> <a href="https://seiga.nicovideo.jp/seiga/im9619637"><img src=images/9619637i.jpg class="link_banner"></a> </div> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ CSS： #gif { position: fixed; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; transition: all 2s ease; background: url(../images/https___arisago.com_official_wp-content_uploads_2017_08_005.gif) center/300px no-repeat, #080403; } .loaded { opacity: 0; visibility: hidden; } ______________________________________________________________________ Javascript： window.addEventListener('load', function(){ document.getElementById('gif').classList.add('loaded'); });

質問日時: 2020/10/08 15:42 質問者: 零礼

ベストアンサー

2

0
【JavaScriptで】セレクトボックスからラベル名を取得する方法

一番下に書いたHTMLのセレクトボックスからラベル名を取得するにはどうしたらよいのでしょうか？ HTMLにvalue値をつけずにこのように記述すると、下記のJavaScriptの記述でラベル名が取得できます。 ***************** <select> <option>1月</option> <option>2月</option> <option>3月</option> </select> https://imgur.com/T8W1Umy ***************** ところが下記のようにvalueに値をつけるとvalueの値が出力されラベル名は表示されません。都道府県名や名前など各々valueの値と、ラベル名が異なることはよくあることと思います。以下に記述したHTML（valueの値がついたもの）のセレクトボックスからラベル名を取得するにはどのように記述したら良いのでしょうか？分かる方いらっしゃいましたら教えて下さい。宜しくお願いします。（JS） 'use strict'; { document.querySelector('button').addEventListener('click', () => { const li = document.createElement('li'); const month = document.querySelector('select'); li.textContent = month.value; document.querySelector('ul').appendChild(li); }); } ---------------------------------------- （HTML） <select> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> </select> <button>Add!</button> <ul> </ul>

質問日時: 2020/10/07 16:07 質問者: boulevard5

ベストアンサー

2

0
jqueryのソースコードをJavaScriptで書く場合の方法を教えてください

首記の件、下記ソースコードを JavaScriptで書く場合、どのように記述するのか教えて頂きたくお願い致します。 Jqueryソースコード： $(function(){ $(window).scroll(function (){ $('.fadein_left, .fadein_right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 150){ $(this).addClass('scrollin'); } }); }); });

質問日時: 2020/10/07 09:23 質問者: 零礼

ベストアンサー

1

0
JavaScriptで5.3.1.5.3.1･･･と続くように出力したいのですが、なかなかできません

JavaScriptで5.3.1.5.3.1･･･と続くように出力したいのですが、なかなかできません。 for文を用いて、5.3.1のみを表示することはできるのですが、繰り返しを表示することができません。剰余演算子%を使うことで、出力できると聞きました。どのようなプログラムをつくればよいでしょうか？

質問日時: 2020/10/07 03:07 質問者: りらたん

ベストアンサー

3

0
ドロップダウンメニューで画像を変えたいが、上手くいかない。

ドロップダウンメニューで画像が変わるようにしたいですが、上手くいきません。コードは下のように書きました。多分画像の選択方法が間違えてるんじゃないかなと思っていますが、実際のところわかりません。どうしたらよいでしょうか。よろしくお願いします。なお、画像は次のものにしたいです。レット…https://tetudoujapan.web.fc2.com/a922f.gif　オレンジ…https://tetudoujapan.web.fc2.com/560d0.gif　グリーン…https://tetudoujapan.web.fc2.com/mul92.gif　ブルー…https://tetudoujapan.web.fc2.com/reri.gif　グレー…https://tetudoujapan.web.fc2.com/560d0.gif ～～～～～～～～～～～コード～～～～～～～～ <HEAD> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM> <P><IMG src="images/red.gif" width="180" height="120" name="imgsmp"></p> <P><SELECT name="channel" size="1" onchange="imgChange(this)"> <OPTION value="0">レッド <OPTION value="1">オレンジ <OPTION value="2">グリーン <OPTION value="3">ブルー <OPTION value="4">グレー </SELECT></P> </FORM> <BODY>

質問日時: 2020/10/06 17:45 質問者: クモハ410系

解決済

1

0
【jQuery】hoverしたn秒後にイベントを実行したい

jQuery初心者でつまずいております… #navi > ul > li にhoverしたn秒後に、subnaviをslideDownで表示させたいです。そして、hoverがはずれてsubnaviがslideToggleで戻るまでにもn秒ほしいです。以下のコードで試したところ、hover時に画面全体に広がるマスク（#hg）は表示されますが、肝心のsubnaviが表示されません。また、いずれかのliをhover中に他のliをhoverしようとすると、イベント自体が止まってしまいます。他のliにhoverした際は、以前hoverしていたliのイベントを中断して、新たにhoverした要素を優先させたいです。【HTML】 <div id="hg"></div> <nav id="gnavi"> <ul> <li> <a href="javascript:;">タイトル</a> <div class="subnavi">サブナビ</div> </li> <li> <a href="javascript:;">タイトル</a> <div class="subnavi">サブナビ</div> </li> <li> <a href="javascript:;">タイトル</a> <div class="subnavi">サブナビ</div> </li> </ul> </nav> 【jQuery】 $(function() { $("#navi > ul > li").on({ 'mouseenter':function(){ sethover = setTimeout(function(){ $(".subnavi:not(:animated)", this).slideDown(500);$("#hg").stop().fadeIn(); },500); }, 'mouseleave':function(){ sethover = setTimeout(function(){ $(".subnavi",this).slideToggle(500); $("#hg").stop().fadeToggle(); clearTimeout(sethover); },400); } }); }); 【CSS】 #hg { display: none; position: absolute; width: 100%; height: 100%; background: #000; z-index: 40; filter: alpha(opacity=70); -moz-opacity: 0.70; opacity: 0.70; } #gnavi { margin: 0 auto; box-sizing: border-box; max-width: 1200px; height: 65px; } #gnavi > ul { display: flex; justify-content: space-between; } #gnavi > ul > li > a { position: relative; display: flex; align-items: center; box-sizing: border-box; height: 65px; padding: 0 1em; font-size: 16px; font-weight: bold; line-height: 1.25em; color: #000; } #gnavi .subnavi { display: none; position: absolute; top: 130px; right: 0; left: 0; width: 100%; margin: auto; background: #fff; box-shadow: 0 15px 15px -15px rgba(0,0,0,0.4) inset; } ご教示の程、何卒宜しくお願い致します。

質問日時: 2020/10/05 18:27 質問者: mtsm3803

解決済

2

0
【JavaScript】階層関係から要素内のテキストを取得する方法

（-----)以下のHTMLから階層関係を用いて要素を取得してみました。 (1) const target = document.getElementById('second'); const parent = target.parentNode; console.log(parent); と記述しました。この場合返ってくるのは、 <ul id="parent">...</ul> となります。これはなんとなくわかります。 (2) const base = document.getElementById('parent'); const children = base.children; console.log(children[0]); console.log(children[1]); console.log(children[2]); 次に上記のように記述しました。この場合も同じように添付画像のようなタグが返ってきます。タグがそのまま返ってきます。 ●１番目 ●２番目 ●３番目のように返ってくるにはどのような記述をしたらよいですか？よろしくお願いします。 ---------------------------- (HTML) <ul id="parent"> <li id="first">1番目</li> <li id="second">2番目</li> <li id="third">3番目</li> </ul>

質問日時: 2020/10/02 13:15 質問者: boulevard5

ベストアンサー

1

0
【jQuery】遅延実行（タイムラグ）について

#gnavi > ul > li にhoverして、・ドロップダウンメニュー（subnavi）が表示されるまで・hoverがはずれてドロップダウンメニュー（subnavi）が消えるまで少しの間だけドロップダウンメニューの表示が維持されるようにしたいです。参考：https://www.kureha.co.jp/ 【HTML】 <nav id="gnavi"> <ul> <li> <a href="javascript:;">タイトル</a> <div class="subnavi">小カテゴリ</div> </li> <li> <a href="javascript:;">タイトル</a> <div class="subnavi">小カテゴリ</div> </li> </ul> </nav> 【jQuery】 $(function(){ $(".subnavi").hide(); $("#header_bg").hide(); //画面全体にかかるマスク $("#gnavi > ul > li").hover(function(){ $(".subnavi:not(:animated)", this).slideDown(500);$("#header_bg").stop().fadeIn();}, function(){ $(".subnavi",this).slideUp(100); $("#header_bg").stop().fadeOut(); }); $("#gnavi > ul > li").click(function(){ $(".subnavi:not(:animated)", this).slideToggle(500);$("#header_bg").stop().fadeToggle();}, function(){ $(".subnavi",this).slideToggle(500); $("#header_bg").stop().fadeToggle(); }); $("#header_bg").click(function(){ $(".subnavi").slideUp(100); $("#header_bg").stop().fadeOut(); }); }); 【CSS】 #gnavi > ul { display: flex; justify-content: space-between; } #gnavi > ul > li > a { position: relative; display: flex; align-items: center; box-sizing: border-box; height: 65px; padding: 0 1em; font-size: 16px; font-weight: bold; line-height: 1.25em; color: #000; } #gnavi > ul > li:hover > a, #gnavi > ul > li > a:hover { background: #000; color: #fff; } #gnavi .subnavi { display: none; position: absolute; top: 130px; right: 0; left: 0; width: 100%; margin: auto; background: #fff; } #header_bg { display: none; position: absolute; width: 100%; height: 100%; background: #000; z-index: 40; filter: alpha(opacity=70); -moz-opacity: 0.70; opacity: 0.70; } ご教示の程、宜しくお願い致します。

質問日時: 2020/09/30 11:24 質問者: mtsm3803

解決済

2

0
javascriptで、送信ボタンの切り替えと部品の入力可能・付加の設定

javascriptで実現できるか教えてください。イメージとしては、検索項目をテキストボックスとラジオボタンで設定し「検索」ボタンを押すと、「検索」ボタンが消えて、同じ場所に「再設定」というボタンが表示され更に、テキストボックスとラジオボタンを入力・選択出来ないようにし、「再設定」ボタンが押されると、同じ場所に「検索」ボタンが表示されテキストボックスやラジオボタンの入力・選択も可能になるようにしたいです。 <form action="" method="post"> 検索文字<input type="text" name="keyword"><br> <input type="radio" name="disp_mode" value="1">表示モード1<br> <input type="radio" name="disp_mode" value="2">表示モード2<br> <input type="radio" name="disp_mode" value="3">表示モード3<br> <input type="submit" value="検索"> </form> ラジオボタンを入力出来なくするのは、何とかできそうなのですが、「検索」ボタンと「再設定」ボタンを、同じ場所で切り替えるのがわかりません。よろしくお願いいたします。

質問日時: 2020/09/29 05:45 質問者: mintohime

ベストアンサー

2

0
【jQuery】ナビゲーションにhoverした時の:not(:animated)の挙動について

#gnavi > ul > li > a にhoverした時に、subnaviがドロップダウンで表示＆画面全体に黒い半透明のマスクがかかるのが理想です。ですがaタグのhoverを繰り返すと、その回数分だけ半透明のマスクがちかちかと表示されてしまいます。 hoverした時だけマスクを表示させたいのですが、以下のコードから修正する方法はありますでしょうか。何卒ご教授のほど、よろしくお願い致します。【HTML】 <nav id="gnavi"> <ul> <li> <a href="javascript:;"><span>タイトル</span></a> <div class="subnavi">コンテンツ</div> </li> <li> <a href="javascript:;"><span>タイトル</span></a> <div class="subnavi">コンテンツ</div> </li> <li> <a href="javascript:;"><span>タイトル</span></a> <div class="subnavi">コンテンツ</div> </li> </ul> </nav> 【jQuery】 $(function(){ $(".subnavi").hide(); $("#header_bg").hide(); //#header_bgが半透明マスクです $("#gnavi > ul > li").hover(function(){ $(".subnavi:not(:animated)", this).slideDown(500);$("#header_bg").fadeIn();}, function(){ $(".subnavi",this).slideUp(100); $("#header_bg").fadeOut(); }); $("#gnavi > ul > li").click(function(){ $(".subnavi:not(:animated)", this).slideToggle(500);$("#header_bg").fadeToggle();}, function(){ $(".subnavi",this).slideToggle(500); $("#header_bg").fadeToggle(); }); $("#header_bg").click(function(){ $(".subnavi").slideUp(100); $("#header_bg").fadeOut(); }); });

質問日時: 2020/09/28 16:13 質問者: mtsm3803

解決済

1

0
ホームページに日付によりかわるメッセージを入れたい。

こんにちはホームページを作っています。そこで、日付によって毎日メッセージが変わるようにしたいのですが、検索しても、出てきません。「月によって変わるメッセージ」というのはありました。それを改造して作ることってできますか？（下にコードを貼っておきます。）もし改造してもできないのであれば、ヒントやコードなど、教えていただければ嬉しいです。どうかよろしくお願いします。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <p> <script>// <![CDATA[ var mymsg = new Array(); mymsg[0] = '１月（お正月です）'; mymsg[1] = '２月（節分です）'; mymsg[2] = '３月（ひな祭りです）'; mymsg[3] = '４月（入学式です）'; mymsg[4] = '５月（鯉のぼりが空に…）'; mymsg[5] = '６月（この月の花嫁は幸せに…）'; mymsg[6] = '７月（梅雨です）'; mymsg[7] = '８月（夏休みです）'; mymsg[8] = '９月（夏も終わりです）'; mymsg[9] = '１０月（運動会です。）'; mymsg[10] = '１１月（紅葉がきれいです。）'; mymsg[11] = '１２月（一年は早く過ぎます。）'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><font style='font-size : 18px; color : #dc143c'>"+mymsg[mymonth]+"</font></center>"); // ]]></script> </p> </body> </html>

質問日時: 2020/09/26 12:27 質問者: クモハ410系

解決済

2

0
リンク先に飛ぶときに、現在のタブを閉じたい

webページのTOPページから、あるページに飛ぶ際、 target=blank にて　新しいタブを作成し　そこにリンク先を表示させていますそこからTOPページに戻るとき、「TOPへ戻る」のテキストから TOPページに戻るようにしていますが、タブが残ってしまうのが嫌なので、これを閉じたいのですどのようなコードになるのでしょうか？ JavaScriptの範疇でしょうか？

質問日時: 2020/09/25 11:46 質問者: ppp2122

ベストアンサー

2

0
フォーム要素を下から上にフェードイン

首記の件、教えて頂きたくお願い致します。流れとして、下記ソースコードのWebページを開いたら、・ローディング画面が表示される・ローディング画面が徐々に消えてフォームが表示される ※ローディング画面が消えてフォームが表示される時に、フォームが下から上にフェードインしながら表示される様にしたい　←ここで悩んでます。 CSSで#formを取得して、 opacity: 0; transform: translateY(20px); で要素を透明にし、要素を下にさげる JavascriptのclassListでクラスを追加して、そのクラスにCSSを記述する JavaScript； window onload = function() { const fadein = document.getElementById('form'); fadein.classList.add('fade_in'); CSS； .fade_in { opacity: 1; transform: translateY(0); で要素を不透明にし、要素を上にあげるこうすることでフォームのid(form)からクラス(fade_in)に切り替わる事で、CSSの値が(fade_in)のCSSへと変化しフェードインを実現させようとしたのですがうまくできません。 (ローディング画面はうまくできたのですが、やり方が同じなのに出来ません) 宜しくお願い致します。ソースコード； ★HTML； <body> <div id="GIF"></div> <form action="top.html" method="POST" id="form"> <div class="question-form"> <div class="areas"> <div class="columns">会社名・団体名</div> <div class="rows"><input type="text" name="test" class="input-text"><br>(例：＊＊株式会社、＊＊大学＊＊学部＊＊学科)</div> </div> <div class="areas"> <div class="columns">氏名(漢字)<span class="red">(必須)</span></div> <div class="rows"><input type="text" name="sample" class="input-text2"><br>例：令和太郎)</div> </div> <div class="areas"> <div class="columns">氏名(フリガナ)<span class="red">(必須)</span></div> <div class="rows"><input type="text" name="sample" class="input-text3"><br>(例：レイワタロウ))</div> </div> 　　</div> </form> <script src="script.js"></script> </body> _____________________________________________________________________ ★CSS; #GIF { position: fixed; z-index: 1000; top: 0; right: 0; bottom: 0; left: 0; transition: all 1s ease; background:url(images/https___arisago.com_official_wp-content_uploads_2017_08_005.gif) center/300px no-repeat, #080403; } .loaded { opacity: 0; visibility: hidden; } #form { opacity: 0.1; transform: translateY(20px); transition: all 3s; } .fade_in { opacity: 1; transform: translateY(0); } ______________________________________________________________________ ★JavaScript； window.onload = function() { const load = document.getElementById('GIF'); load.classList.add('loaded'); } */ window.onload = function() { const fadein = document.getElementById('form'); fadein.classList.add('fade_in'); }

質問日時: 2020/09/25 10:08 質問者: 零礼

ベストアンサー

2

0
Javascript 郵便番号の入力欄で記述の仕方がおかしいとエラーが出る様にしたい。

首記の件、ご教示お願いします。郵便番号を記述するテキストボックスに、桁数が間違っていた場合や間のハイフンが入っていなかった場合は、’桁数が違います'や'-が抜けています’などのアラートが出る様にしたいです。下記のコードが作成中の物です。 (長いので一部抜粋にします) HTML: <form action="top.html" method="POST" id="form"> <div class="areas"> <div class="columns">郵便番号</div> <div class="rows"><input type="text" name="sample" class="input-text6"><br>(例：123-4567)<br><span class="red">半角</span>でお願いします。</div> </div> </form> ______________________________________________________________________ JavaScript: document.getElementById('form').onsubmit = function() { let textValue6 = document.querySelector('.input-text6').value; if(textValue6.match(/[^0-9a-zA-Z-]+/)) { window.alert('半角英数字で入力してください'); return false; 　　 } }; 半角英数字で入力されてない場合はエラーが出る様にはしたのですが、・桁数を間違って入力した場合(前半３桁ー後半４桁) ・ハイフンが入ってない場合上記２つを組み込むにはどの様なコードを記述すればいいのでしょうか？宜しくお願いします。

質問日時: 2020/09/22 11:02 質問者: 零礼

ベストアンサー

5

0
HTMLを見ているときに変化した所に移動

普通のテキストエディタでHTMLファイルを編集しています。ブラウザとエディタを左右に並べて結果を見つつ編集したいのですが、両者は全く別個のソフトなので当然連携しません。ブラウザ側の設定とかHTMLファイルのスクリプトで、一秒間に一回程度で十分なので、変更された箇所がブラウザの中央になるように出来ないですかね。 Javascriptで表示位置を変える方法は知っています。一秒間に一回の周期で何かのスクリプトを実行する方法も知っていますが、チェック前とチェック後で編集された場所を知る方法が分からない... 編集中のHTMLファイルはローカル。編集後は、全く動きのない単純なHTMLファイルになります

質問日時: 2020/09/20 10:46 質問者: ood

解決済

1

0
Java Scriptのグローバルオブジェクトについて質問です。・1つのグローバルオブジェクトは、

Java Scriptのグローバルオブジェクトについて質問です。・1つのグローバルオブジェクトは、複数のグローバル変数や関数で共有される。・1つのグローバルオブジェクトは、複数のタブ間で共有される。これはどちらも正しい記述ですか？

質問日時: 2020/09/20 10:07 質問者: stella51

ベストアンサー

1

0
javascriptでファイルダウンロードをさせようとしたとき2回目以降ダウンロード失敗する。

javascriptでファイルダウンロードをさせようとしたときに、一度目は成功するのですが、同じリンクを2度目からクリックしてもダウンロード失敗します。失敗　ネットワークエラーと出ます。どういったことが問題なのでしょうか。 <div> <a id="df" href="javaScript:testdownload()" download>ダウンロードテスト </a> </div> function testdownload() { var link = document.createElement("a"); link.target = "_blank"; link.download = "targetfile.pdf"; link.href = "http://127.0.0.1:8887/download/targetfile.pdf"; link.click(); } ご存じの方よろしくお願いします。

質問日時: 2020/09/18 11:14 質問者: あしたみる

解決済

2

0
Javascriptに条件分布ついて(再)

前回に引き続いた質問になってしまいますが、下記コードにて、テキストボックスが未入力で送信ボタンを押した場合、アラートが表示される様になります。＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ HTML(一部抜粋): <form action="#" method="POST" id="form"> <div class="question-form"> <div class="areas"> <div class="columns">会社名・団体名</div> <div class="rows"><input type="text" name="test" id="input-2"><br>(例：＊＊株式会社、＊＊大学＊＊学部＊＊学科)</div> </div> <div class="columns-submit">内容をご確認の上、よろしければ下記ボタンをクリックして下さい。</div> <div class="rows-submit"><input type="submit" name="sample" value="送信" class="input-text"></div> <div class="submit-text">（上記ボタンを押した後、次の画面がでるまで、４～５秒かかりますので、続けて２回押さないようにお願いいたします。）</div> </div> </form> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ Javascript: document.getElementById('form').onsubmit = function() { let blank = document.getElementById('form').test.value; if(blank === "") { window.alert('入力されていません'); } }; ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ですが、これが下記の様にテキストボックスが2つ以上になると上手く分岐してくれず、入力をしてもアラートが表示されてしまいます。 <form action="#" method="POST" id="form"> <div class="question-form"> <div class="areas"> <div class="columns">会社名・団体名</div> <div class="rows"><input type="text" name="test" id="input-2"><br>(例：＊＊株式会社、＊＊大学＊＊学部＊＊学科)</div> </div> 　　 <div class="areas"> <div class="columns">氏名(漢字)<span class="red">(必須)</span></div> <div class="rows"><input type="text" name="test" class="input-text"><br>例：明和太郎)</div> </div> <div class="columns-submit">内容をご確認の上、よろしければ下記ボタンをクリックして下さい。</div> <div class="rows-submit"><input type="submit" name="sample" value="送信" class="input-text"></div> <div class="submit-text">（上記ボタンを押した後、次の画面がでるまで、４～５秒かかりますので、続けて２回押さないようにお願いいたします。）</div> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿イメージとしてテキストボックスが両方、もしくはどちらかが未入力の場合にアラートを表示される様にしたいです。テキストボックスが1つだと正しく動作するのに何故2つ以上だと動作しないのかわかりません。テキストボックスが1つ増えるごとにname属性だけを変えて、上記のJabascriptを繰り返し記述する事になってしまうのでしょうか？前回,HTMLのとある属性であっさり解決してしまいましたがJavascriptで作れるようになりたいと思い、再度投稿しました。宜しくお願いします。

質問日時: 2020/09/17 21:09 質問者: 零礼

ベストアンサー

3

0
配列のチェックボックスをjavascriptで全選択する際のループの仕方

以下のサンプルで、チェックを入れる部分をループにしたいのですが、うまくいきません。 ----------------------------------------------------------------- <form name="form" method="GET"> <input type="checkbox" name="aaa" onClick="AllChecked();" /> 全選択 <input type="checkbox" name="bbb[0]"> <input type="checkbox" name="bbb[1]"> <input type="checkbox" name="bbb[2]"> </form> <script language="JavaScript" type="text/javascript">  </script> ----------------------------------------------------------------- bbbの配列は、データベースから抽出したデータ数によって変化します。最大30個あります。 bbbの数の分だけ、ループでチェックを入れたいのですが、どうしたら良いのでしょうか。 ※ちなみに、このフォームには、他にも配列のチェックボックスがあります。　bbbだけ、全選択の処理を行いたいです。よろしくお願いいたします。

質問日時: 2020/09/15 03:53 質問者: mintohime

ベストアンサー

3

0
Javascriptの条件分布が機能しない

下記コードにてテキストボックスが未入力の場合、送信ボタンを押したらアラートが出る様にしたいのですがうまくいきません。教えて頂きたくお願い致します。 HTML： <form action="test.html" method="POST" id="form"> <div class="question-form"> <div class="areas"> <div class="columns">会社名・団体名</div> <div class="rows"><input type="text" name="sample" class="input-text"><br>(例：＊＊株式会社、＊＊大学＊＊学部＊＊学科)</div> </div> <div class="areas"> <div class="columns">氏名(漢字)<span class="red">(必須)</span></div> <div class="rows"><input type="text" name="sample" class="input-text"><br>例：令和太郎)</div> </div> <div class="areas"> <div class="columns">氏名(フリガナ)<span class="red">(必須)</span></div> <div class="rows"><input type="text" name="sample" class="input-text"><br>(例：令和タロウ))</div> </div> <div class="areas"> <div class="columns">メールアドレス<span class="red">(必須)</span></div> <div class="rows"><input type="text" name="sample" class="input-text"><br>(例：XXXXX@zyz.jp)<br><span class="red">半角</span>でお願いします。</div> </div> <div class="areas"> <div class="columns">メールアドレス(確認)<span class="red">(必須)</span></div> <div class="rows"><input type="text" name="sample" class="input-text"><br>(例：XXXXX@zyz.jp)<br><span class="red">半角</span>でお願いします．</div> </div> <div class="areas"> <div class="columns">郵便番号</div> <div class="rows"><input type="text" name="sample" class="input-text"><br>(例：例：123-4567)<br><span class="red">半角</span>でお願いします。</div> </div> <div class="areas"> <div class="columns">住所</div> <div class="rows"><input type="text" name="sample" class="input-text"></div> </div> <div class="areas"> <div class="columns">TEL</div> <div class="rows"><input type="text" name="sample" class="input-text"><br>(例：例：03-1234-5678)<br><span class="red">半角</span>でお願いします。</div> </div> <div class="areas"> <div class="columns">FAX</div> <div class="rows"><input type="text" name="sample" class="input-text"><br>(例：例：03-1234-5678<br><span class="red">半角</span>でお願いします。</div> </div> <div class="areas"> <div class="columns">お問合せ内容、お見積りはこちらへどうぞ<span class="red">(必須)</span></div> <div class="rows"><textarea name="textarea" rows="10" cols="40" class="input-text"></textarea><br>(例：例：03-1234-5678)<br><span class="red">半角</span>でお願いします。</div> </div> <div class="columns-submit">内容をご確認の上、よろしければ下記ボタンをクリックして下さい。</div> <div class="rows-submit"><input type="submit" name="sample" value="送信" class="input-text"></div> <div class="submit-text">（上記ボタンを押した後、次の画面がでるまで、４～５秒かかりますので、続けて２回押さないようにお願いいたします。）</div> </div> </form> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ Javascript： let blank = document.querySelectorAll('.input-text').value; document.getElementById('form').onsubmit = function() { if(blank === "") { window.alert('入力されていません'); return false; } };

質問日時: 2020/09/13 18:27 質問者: 零礼

ベストアンサー

3

0
GASを使って、Gmailから自動送信したいのですが、エラーが出ます。何が問題でしょうか。

function autoMail() { var subject = 'スケジュールについて'; var body = ''; body += '各位\n'; body += 'これはテストです'; body += 'よろしくお願いします。'; body += '\n'; body += '\n'; GmailApp.sendEmail( 'abc@yahoo.co.jp', subject, body, 　　　　　{ bcc:'abc@yahoo.co.jp' , name:'abcカンパニー' 　　　} }; }

質問日時: 2020/09/12 16:44 質問者: ymrs

ベストアンサー

1

0
HTML上のテキストボックスから変数を指定する方法

HTML上のテキストボックスから、 JavaScriptで定義した変数の変数名を指定することは可能でしょうか。 document.getElementById('入力情報').value では変数として認識されませんでした。

質問日時: 2020/09/11 09:36 質問者: seanp

ベストアンサー

2

0
JavaScriptは言語？私の古い認識では、JavaScriptはHTMLに埋め込むすくりであっ

JavaScriptは言語？私の古い認識では、JavaScriptはHTMLに埋め込むすくりであってプログラミング言語ではないと思います。学校教育ではJavaScriptを教えると聞きましたが、それは教えやすくていいだろうけど将来の役に立つのかと不思議に思います。Ｃ言語とは言いませんが、少なくともプログラミング言語を教えるべきではないのでしょうか？

質問日時: 2020/09/05 09:15 質問者: y_hisakata

ベストアンサー

7

0
Javascript_submit()完了後に処理したい

postでURLに対してデータを送信し、自分の画面は閉じる動きを実現したいです。ですが、現在の状態では、submit()されずに自画面が閉じてしまいます。 onClick()イベント内　：　form.submit(); 　window.open('about:blank', '_self').close(); 対して、以下のように自画面を閉じる処理をコメントアウトすると正常にsubmit()されます。 onClickイベント内　：　form.submit(); 　//window.open('about:blank', '_self').close(); submit()が完了するよりも前に画面が閉じてしまうために送信できていないのだと想定しています。そのため、 parent.window.open('about:blank', '_self').close(); を、submit()がちゃんと完了したら動くようにしたいです。 onClickイベント完了後、またsubmit()が完了後に発火するようなイベントはあるでしょうか？また、そのほかに良い方法はあるでしょうか？よろしくお願いいたします。

質問日時: 2020/09/03 14:08 質問者: fjvadpmjio

解決済

3

0

←前の結果
1
...
6
7
8
9
10
11
12
13
14
15
16
...
20
次の結果→

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

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

質問する（無料）

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

弁護士が解説！あなたの声を行政に届ける「パブリックコメント」制度のすべて

社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

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

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

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