回答数
気になる
-
【急募】選択した物件と施設の距離をランキング&条件によって画像表示を変更する方法。
どなたかご教授の方よろしくお願いします。。 現在セレクトボックスを二つ実装して、施設(コンビニA店)と複数物件情報を含んだ市町村(○○市)を選択した後、ボタンクリックで施設とコンビニの距離?を実装するところまで来ました。質問・回答して欲しい箇所は以下の通りです。 1,距離を計算した後にランキング形式で表示したい。 2,セレクトボックスを増やしても計算できる実装にしたい。 3,よりHTMLっぽいGUIにしたい。 4,表示された物件名によって、画像表示が変わるようにしたい。 (物件1ならa.jpg、物件2ならb.jpg等表示順の変更(ランキング表示形式の場合)) 参考になるように、コード貼っておきます。 使用言語はHTML,CSS,javascriptです。 ご回答待っています。よろしくお願いします。 ソースコード <div id="page-1"> <select id="shop"> <option value="a">コンビニA店</option> <option value="b">コンビニB店</option> <option value="c">コンビニC店</option> </select> <select id="city"> <option value="icity">い市</option> <option value="rocity">ろ市</option> <option value="hacity">は市</option> </select> <button id="btn" >ボタン</button> </div> <div id="page-2"> </div> <script> // 施設データ const conveni = { a: {x: 99, y: 121}, b: {x: 134, y: 153}, c: {x: 98, y: 150}, } // 物件データ const data = { icity: [ {name: '物件1', x: 123, y: 111}, {name: '物件2', x: 95, y: 191}, {name: '物件3', x: 133, y: 81}, ], rocity: [ {name: '物件4', x: 81, y: 111}, {name: '物件5', x: 95, y: 123}, {name: '物件6', x: 133, y: 123}, ], hacity: [ {name: '物件7', x: 191, y: 161}, {name: '物件8', x: 95, y: 191}, {name: '物件9', x: 143, y: 81}, ]}; document.getElementById('btn').addEventListener('click',()=>{ document.getElementById('page-1').style.display = 'none'; const conv = conveni[document.getElementById('shop').value]; const city = data[document.getElementById('city').value] .map(b => { b.len = (b.x - conv.x) ** 2 + (b.y - conv.y) ** 2; return b; }) .sort((a, b) => a.len - b.len); document.getElementById('page-2') .appendChild(Object.assign(document.createElement('ol'),{ innerHTML: city.map(c => `<li>${c.name}</li>`).join('') })); },false); </script>
質問日時: 2021/12/24 07:08 質問者: programanman
ベストアンサー
2
0
-
フレームワークのjavaScriptについて
教えてください。プログラミング初心者です。 フレームワークのjavascriptでprototypejsやbackbonejsなどあるかと思いますが、サーバーからのレスポンスをどの様なかたちで受け取って処理するのか、何がメリットなのかあまりイメージができていません。 またオブジェクト指向のjavascriptという点についてもサーバーとの連携でメリットがあるのかも分かりません。何か具体的に教えてください。
質問日時: 2021/12/22 00:44 質問者: ymoshimoshi
解決済
2
0
-
プログラミング初心者です。どうぞご教授ください。
Youtubeにてあきちょんさんの動画、テトリスを作る17回でテトリスを回転させるコードについて分からないことがあったので質問させて頂きます。必要そうなコードのみ抜粋、変数は自分が分かりやすいように多少変えてます。 <!DOCTYPE html> <html> <body> <script> let tetro = [ [0,0,0,0], [1,1,0,0], [0,1,1,0], [0,0,0,0], ]; function rotate() { let kaiten=[] for( let y = 0; y<4; y++ ) { kaiten[y] = [] for( let x = 0; x<4; x++ ) { kaiten[y][x] = tetro[3-x][y]; } } return kaiten; } let ntetro = rotate(); //一回目回転させる tetro = ntetro ntetro = rotate(); //二回目回転させる tetro = ntetro </script> </body> </html> のコードですが、前々回第15回でも二次元配列を初期化、代入を説明されていたので、 let kaiten を関数の外で宣言してreturnを受け取らずにしました。 <!DOCTYPE html> <html> <body> <script> let tetro = [ [0,0,0,0], [1,1,0,0], [0,1,1,0], [0,0,0,0], ]; let kaiten=[] //関数の外で宣言 function rotate() { for( let y = 0; y<4; y++ ) { kaiten[y] = [] for( let x = 0; x<4; x++ ) { kaiten[y][x] = tetro[3-x][y]; } } } //returnを受け取らない rotate(); //一回目回転させる tetro = kaiten rotate(); //二回目回転させる tetro = kaiten </script> </body> </html> このようにしたところ、一回回転させる分には正常なのですが、2回目からバクるんですが、なぜだか分かりません。どうぞご教授ください。プログラミング初めて一か月くらいなので、平たく解説していただけると助かります。
質問日時: 2021/12/17 09:19 質問者: しん太郎
ベストアンサー
4
0
-
入力フォームにの名前を入力するフォームに下のフリガナ入力をオート入力にしたいのですが、 オートかな入
入力フォームにの名前を入力するフォームに下のフリガナ入力をオート入力にしたいのですが、 オートかな入力には jquery.autoKana.js を使うと良いらしいのですが、オートかな入力に必要な jquery.autoKana.js ダウンロードできないのですが、どこからダウンロードするのでしょうか? 以下のサイトの jquery.autoKana.jsの所をクリックして、ダウンロードページに行ってダウンロードするそうですが、 https://qiita.com/u-chida/items/6c07d558b3f06c9ed8d8 最終的には画像のような画面に辿り着くだけで、ダウンロードできないです。 画像のような画面の下の方にあるソースコードをコピーして、ファイル名を jquery.autoKana.jsにして保存するわけではないですよね。
質問日時: 2021/12/16 08:37 質問者: hayosato
解決済
2
0
-
セレクトボックスで年月日を選択するコードを書いているのですが、提示のコードでは、付属画像のようにきち
セレクトボックスで年月日を選択するコードを書いているのですが、提示のコードでは、付属画像のようにきちんと表示 され完璧です。 何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると 曜日まで表示されて満足です。付属画像参考。 しかし、提示のコードではfirefoxなどのブラウザでも表示されるようにしたいのですが、●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると 曜日まで表示される今の状況を維持したままどうコードを書いたら よいでしょうか? 調べたところjQuery UI の Datepickerなどがあるようですが、調べてコードを書いても意味が分からず何も動きませんでした。 ●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると 曜日まで表示される今の状況を維持したままfirefoxなどのブラウザでも表示されるようにしたいのですが、どうコードを書いたら よいでしょうか? コードはwandleboxの共有コード内のURL(以下)にあります。 URLの中の白いシートの部分がソースコードです。 回答よろしくお願いいたします。 https://wandbox.org/permlink/tnisdTxbbWaPuqB9
質問日時: 2021/12/14 09:05 質問者: hayosato
ベストアンサー
2
0
-
javascript の export default について
export default を教えてください。 以下は何をしているのでしょうか ? export default とは何でしょう ? export default { title: 'TITLE', parameters: { docs: { page: doc; } } }
質問日時: 2021/12/10 18:57 質問者: i-d-a-i
ベストアンサー
1
0
-
Javascript の関数の引数箇所について。
const sample = ({ test1, test2 }) => { } という書き方をみたのですが、なぜ、波括弧が必要かわかりませんでした。 わかる方教えてください。
質問日時: 2021/12/10 18:52 質問者: i-d-a-i
ベストアンサー
1
0
-
javascript 関数の return について
アロー関数の return に``大文字のクォート ? みたいな文字で、 リターンしてたものが動作してるのを見たのですが、 そういう書き方をする理由が知りたいです。 教えてください。
質問日時: 2021/12/10 17:41 質問者: i-d-a-i
ベストアンサー
2
0
-
Javaについて質問です。 要素数5のInt型配列に1から100までの整数乱数 5件をそれぞれ格納し
Javaについて質問です。 要素数5のInt型配列に1から100までの整数乱数 5件をそれぞれ格納し、配列を昇順ソートするために どのように記述すればいいですか?(randomクラスを必ず用いて)
質問日時: 2021/12/07 16:52 質問者: トリプレッタ
解決済
2
0
-
処理の構想が知りたいです
javascriptで以下のような処理を作るにはどういう形で作ればいいですか? ①2つの選択肢AとB(わかりやすいようにボタンにする) ↓ ②選択肢の「Aボタン」を押すと①に戻る 「Bボタン」を押すと③に進む ↓ ③3つの選択肢CとDとE「ボタン」の画面が出る ↓CかDかEボタンを押すか、時間経過(例えば3秒)で④に進む ④3つの選択肢FとGとH「ボタン」の画面が出る →同様にボタンを押すか、時間経過で①に戻る console.logに ”一回目はBとDとH” "二回目はA" ”三回目はBとCとF”みたいな感じで表示させたいです
質問日時: 2021/12/03 16:58 質問者: kongoon
解決済
6
0
-
値の入った<li>要素の数をカウントしたい
特定の要素(今回は<li>)の数をカウントしたくて以下のように書きました。 <ul class="hoge"> <li>あああ</li> <li></li> <li>いいい</li> <li></li> </ul> <script> $(function(){var hoge=$("ul.hoge li").length; $(".echo").text(hoge)}); </script> <li>は、全部で<span class="echo"></span>個です。 これで 「<li>は、全部で4個です。」 と表示されてうまく行ったので小躍りして喜んでいたのですが、今度は少しひねった要望が出て 「空っぽの<li>は数えないようにしたい、つまり何か文字列が入っている<li>だけをカウントしてほしい。」と言われてしまい、現在泣いています。 理想とする吐き出され方は、以下です。 「要素の入っている<li>は、全部で2個です。」 調べても調べてもそんなことができる読み物が見つけられずに泣き続けているのですが、どなたかお教えいただけませんでしょうか( ノД`)シクシク…
質問日時: 2021/12/02 18:54 質問者: j1781352
ベストアンサー
2
0
-
javascriptとPHPで入力フォームのコードを書いているのですが、 流れとしては、①入力フォー
javascriptとPHPで入力フォームのコードを書いているのですが、 流れとしては、①入力フォーム→②確認画面→③送信画面の3段階で構成しています。 初めの入力フォームで入力した値を②の確認画面で表示される「戻る」ボタンで 戻っても入力した内容をjavascriptで保持するようにしたいです。 もとから、PHPのみでは保持するコードは書いてある(提示したコードにある)のですが、PHPの内容は変更せず に①の画面で入力した内容を②確認表示画面で戻っても入力した内容をjavascriptで保持するようにしたいです。 調べてよく分かりません。どうコード書いたらよいでしょうか? ①の画面でjavascripによる入力エラーメッセージの表示の設定をしたら、PHPが発動しなくなりましたが、PHPの内容は変更したくないです。 この質問で提示したコードは①入力フォームのコードのみです。字数制限で全て提示できません。 回答よろしくお願いいたします。 ●●①入力フォーム <?php session_start(); $errors = array(); if(isset($_POST['submit'])) { $name = $_POST['name']; $name = htmlspecialchars($name, ENT_QUOTES); if($name === "") { $errors['name'] ="名前が入力されていません。 "; } if(count($errors) === 0) { $_SESSION['name'] = $name; /* 確認画面の表示, */ header('Location:http:▼▼'); exit(); } } if(isset($_GET['action']) && $_GET['action'] === 'edit'){ $name = $_SESSION['name']; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <title></title> <script src="jquery-3.6.0.min.js"></script> <style type="text/css"> .auto-style1 { text-align: center; } </style> <?php echo "<ul>";foreach($errors as $value) { echo "<li>"; echo $value; echo "</li>"; } echo "</ul>"; ?> </head> <body> <form action="companyhp6form1.php" method="post" id="form"> <div class="auto-style1"> <p class="tel-titile"> 名前 </p> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" /> </div> <div class="auto-style1"> <button type="submit" id="submit" name="submit" class="auto-style4"> 送信</button> </div> </form> </body> <script> const form = document.querySelector('#form'); const name = document.querySelector('#name'); form.addEventListener('submit', function(event) { let msg = ""; if (name.value == "") msg += "名前が入力されていません。\n"; if (msg == "") return; event.preventDefault(); alert(msg); }); </script> <script src="jquery-3.6.0.min.js"></script> </html>
質問日時: 2021/12/02 09:18 質問者: pjdmgam
ベストアンサー
2
0
-
【JavaScriptわからない】1クリックで同時に2ページへ遷移、POSTとGETで値も持たせたい
下記form内のsubmitボタンをクリックしたとき以下の条件を満たしたいです。 (1) actionで外部リンクを新規タブで開く (2) 同時にregist.phpへパラメータ(kanryo=0)を持たせて遷移 ======================================== 【head内】 <script> jQuery(document).on("click", '#viewing', function() { $.get("regist.php", { kanryo: "0" }, function(data) {}); }); </script> 【body】 <form action="外部リンクURL" method="POST" target="_blank"> <input type="hidden" name="SAMLResponse" value="<?=$samlresponse ?>" /> <input type="submit" value="動画を視聴する" id="viewing"> </form> ======================================== ■問題点 (1) でPOST送信できており遷移するが、(2) の遷移が何の変化もなくできていない。 JavaScript での飛ばし方が問題があるのかと思ったのですが、 他者が以前書いた記述であるのと、JavaScriptについてほぼ無知なので原因がわかりません。 このJavascript の記述でregist.phpへ遷移はできるはずなのでしょうか? 問題ないのであれば、それ以外の部分でおかしいところを検証します。 別内容になりますが、飛ばしたいパラメータを2にしたい場合は このJavascript の記述はどしたら良いでしょうか? 前提知識が少ないため、調べても判断ができず、申し訳ありません。 どうぞよろしくお願いいたします。
質問日時: 2021/11/28 17:41 質問者: zawa2929
ベストアンサー
2
0
-
Javascript 親から設定したaddEventListnerは消えてしまう?
こんばんは、お世話になります。 親ウィンドウから、window.openメソッドにて子ウィンドウを開きます。 そして、親ウィンドウから子ウィンドウの要素にaddEventListenerにて何かしらのイベントを設定します。 このとき、親ウィンドウが生きていれば設定したイベントが発生しますが、存在しない(閉じられている)とイベントが発生しなくなってしまうのですが、何故でしょうか? また、解決策があれば教えていただきたいです 以下、一例です (子ウインドウのGoogle検索トップページで検索ボックスをクリックするとボックスの背景色をピンクにする) //childのwindow.nameを持つ子ウインドウを開く child = window.open("https://www.google.com/?hl=ja" , "child"); //子ウインドウの検索ボックスにクリックイベントを設定 child.document.querySelector("input").addEventListener( "click" , function(){ this.style.backgroundColor = "lightpink"; }) //上記までの状態であれば、意図どおりに動作する //child.opener.close()などで親ウィンドウを閉じると、設定したイベントが消去されてしまう
質問日時: 2021/11/27 18:59 質問者: Hypnomatic
解決済
1
0
-
付属の写真のようにエラーが出るようにしたいです。 提示したコードだけでは、エラーメッセージ文字が上の
付属の写真のようにエラーが出るようにしたいです。 提示したコードだけでは、エラーメッセージ文字が上の方に出てくるだけで、四角い図形も出てきません。 javascriptでエラーメッセージを出せれば、写真のようなになると思います。 そこでなのですが、 PHPのコードはそのまま崩さずjavascriptでも同じエラーメッセージ出すコードが書けません。どうコードを書いたら よいでしょうか? nameとquestionの2つフォームとがあります。 回答よろしくお願いいたします。 <?php session_start(); $errors = array(); if(isset($_POST['submit'])) { $plan = $_POST['plan']; $name = $_POST['name']; $question = $_POST['question']; if($name === "") { $errors['name'] ="名前が入力されていません。 "; } if($question === "") { $errors['question'] ="お問い合わせ内容入力(150文字以内)が入力されていません。 "; } if(count($errors) === $_SESSION['name'] = $name; $_SESSION['question'] = $question; /* 確認画面の表示, */ header('Location:http://▼▼php'); exit(); } } if(isset($_GET['action']) && $_GET['action'] === 'edit'){ $name = $_SESSION['name']; $question = $_SESSION['question']; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <title>お問い合わせ画面</title> <style type="text/css"> /* 入力フォームの位置 */ .auto-style1 { text-align: center; } </style> <?php echo "<ul>";foreach($errors as $value) { echo "<li>"; echo $value; echo "</li>"; } echo "</ul>"; ?> </head> <body> <form action="companyhp6form1.php" method="post"> <div class="auto-style1"> <p class="tel-titile"> 名前:※ </p> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> お問い合わせ内容入力(150文字): </p> <textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内で入力して下さい。"></textarea> </div> <div class="auto-style1"> <button type="submit" id="submit" name="submit" class="auto-style4"> 送信</button> </div> </form> </body> <script src="main.js"></script> </html>
質問日時: 2021/11/23 08:27 質問者: pjdmgam
ベストアンサー
1
0
-
Canvasを使って描画して面積取得
教えて下さい。初心者です。 アプリケーション上でマウスの操作から描画して、面積取得するのに、javascriptとHTML5でどのようにコードを書けばいいでしょうか。
質問日時: 2021/11/21 13:35 質問者: ymoshimoshi
解決済
3
0
-
Java Script を.jsファイルを利用しシンプル化する
Dreamweaverで作成した商品ページで、以前は税抜価格のみを表示していたのですが、先の消費税総額表示対応のため、現在、Java Scriptを利用し、商品リストを下記のように記述し対応しているものの、商品リストページには多数の商品が掲載されているため、同じコードが多数並んでしまっています。 ■HTML ------------------------------------------------------------ 白菜<br> 100円<br> <SCRIPT TYPE="text/javascript">document.write("(税込",Math.round(■ * 1.1),"円)")</SCRIPT> ■ブラウザ表示 ------------------------------------------------------------ 白菜 100円(税込110円) ------------------------------------------------------------ これを、.jsファイル等を作成して、記述を簡略化することは可能でしょうか? ※■の箇所は、Dreamweaverの機能で、置換の際に価格を正規表現で代入しています。 html化すれば「("(税込",Math.round(100 * 1.1),"円)")」となります。 上記につきましてご回答いただけますと幸いです。 以上、よろしくお願い申し上げます。
質問日時: 2021/11/18 14:48 質問者: maru11586
ベストアンサー
4
0
-
JavaScriptからローカルにテキストファイルを作成する
以前に、下記①の環境でJavaScriptからローカルにテキストファイル作成することができていました。(ソースは下記参照) しかし、下記②の環境に移行したところ、③の行にて④のエラーが表示されます。ネットで④のエラーを検索してみましたが、解決策が見つかりません。 もし分かる方がおられましたら、ご教授願います。 (下記ソースのオリジナルはネットから見つけたものです。) ① Linux(CentOS 5.6) / Firefox(version 3.6.13) ② Linux(CentOS 7.4.1708) / Firefox(version 60.5.0) ③ netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); ④ Error: TypeError: netscape.security.PrivilegeManager is undefined □ Please contact the website owners to inform them of this problem. ---------------------------------------------------------------------------- <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function writeToLocal(filename, content) { var ua = navigator.userAgent.toLowerCase(); try { if (ua.indexOf('firefox') != -1) { // Firefox filename = (ua.indexOf('windows') != -1 ? 'C:\\tmp\\' : '/tmp/') + filename; netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var file = Components.classes['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile); file.initWithPath(filename); var fileStream = Components .classes['@mozilla.org/network/file-output-stream;1'] .createInstance(Components.interfaces.nsIFileOutputStream); fileStream.init( file, 0x02 | 0x08, 0664, 0 ); var converterStream = Components .classes['@mozilla.org/intl/converter-output-stream;1'] .createInstance(Components.interfaces.nsIConverterOutputStream); converterStream.init( fileStream, 'UTF-8', content.length, Components.interfaces.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER ); converterStream.writeString(content); converterStream.close(); fileStream.close(); alert('書き込みが完了しました!'); } } catch (e) { alert('Error: ' + e); } } writeToLocal('test.txt', 'これはJavaScriptが作成したファイルだよ!\n'); </script> </head> </html> ----------------------------------------------------------------------------
質問日時: 2021/11/17 02:12 質問者: ysakmtmt
解決済
2
0
-
htmlを組み替え(?)たい
画像と文章が1セットのものが複数あり(こんな感じのhtmlが複数あるのを) <div> <img> <p>内容</P> </div> 画像と文章を分けたい <div> <img><img><img>… </div> <div> <p>内容</p><p>内容</p><p>内容</p>… </div> みたいにJavaScriptで組み替えたいのですが、可能でしょうか。
質問日時: 2021/11/15 12:05 質問者: 16164le_tai
ベストアンサー
2
0
-
Javascript クロージャの動きがよくわからないです
javascriptのクロージャの例として下記のような例があります function outer(){ var x = 1; return function (){ console.log(x); x = x + 1; }; } hoge=outer(); hoge(); //1 hoge(); //2 hoge(); //3 変数hogeに関数outerを代入し、hoge()を1回目に実行したときに「1」が返ってくるのは理解できます。 しかし、2回目以降にhoge()を実行したときに、カウントアップしたxが返ってくるのがわかりません 2回目以降の呼び出しの際にouter関数内のvar x = 1は実行されないのでしょうか?
質問日時: 2021/11/14 22:30 質問者: Hypnomatic
ベストアンサー
3
0
-
javascriptでエクセルデータ読み込み
いつもお世話になっております javascriptでエクセルデータ読み込み は可能でしょうか また、共有ファイルみたく使用することは できますでしょうか。
質問日時: 2021/11/13 22:53 質問者: りんごプリン
解決済
3
0
-
html selectの内容を初期値に戻す
selectの内容をボタンを押せば初期値に戻すやり方がいまいちわかりません 例えばselectボックスにeeeを選択した後、戻すボタンを押せばaaaに戻るようにしたいです <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <select name="select-name"> <option value="aaa">aaa</option> <option value="iii">iii</option> <option value="uuu">uuu</option> <option value="eee">eee</option> <option value="ooo">ooo</option> </select> <button id="modosu">戻す</button> <script> const select = document.getElementById("select-name"); const btn = document.getElementById("modosu"); function btn addEventListener("click",function(){ select.remove(); }); </script> </form> </body> </html> また、仮にボタンを押せば選択していたvalueの値を取ってhtmlに表示させるにはどうすればいいですか?
質問日時: 2021/11/10 18:29 質問者: hookeey
ベストアンサー
2
0
-
スクリプト
ホームページビルダーで落ち葉が落ちスクリップトを作ってみました。 ビルダーでプレビューを見ると上手く葉がゆらゆら揺れて落ちていますが 名前を付けてhtmlファイルとして保存しました。 落ち葉の画像も同じフォルダーにありますが、 htmlを起動させても添付 の画面の様な静止画面表示で 動きません・・・ 動く様にするには何処を修正すればよろしいのでしょうか? そのタグは </HEAD> <body><span id="img01" style="position:absolute; left : 90px; top : 10px; z-index : 8;"><IMG src="icho.gif"></span> <span id="img02" style="position:absolute; left : 161px; top : 21px; z-index : 5;"><IMG src="icho2.gif"></span> <span id="img03" style="position:absolute; left:30px; top:10px; z-index : 6;"></span> <span id="img04" style="position:absolute; left:40px; top:10px; z-index : 7;"><IMG src="ha3.gif"></span> <span id="img05" style="position:absolute; left : 172px; top : 147px; z-index : 2;"><IMG src="ha2.gif"></span> <div style="width : 60px;height : 12px;top : -1px;left : -1px; position : absolute; z-index : 4; " id="Layer1"><Script Language='JavaScript'> <!-- //********************************* //Miko & Mako yumemail(taterandam) //********************************* var dx0, xp0, yp0, iw0,ih0 ; var am0, stx0,sty0,pxo0, pyo0; var i0, dw = 0, dh = 0; var kosu0=5; dx0 = new Array(); xp0 = new Array(); yp0 = new Array(); am0 = new Array(); pxo0 = new Array(); pyo0 = new Array(); stx0 = new Array(); sty0 = new Array(); tow0 =0 bow0 =1 iw0 = new Array( 0, 29, 49, 29, 34, 46) ih0 = new Array( 0, 30, 46, 30, 32, 46) var sukudo0=100; function startpos0() { dw = document.body.clientWidth; dh = document.body.clientHeight; for (i0 = 1; i0 <= kosu0; ++ i0) { name0='img0'+ i0; dx0[i0] =0; xp0[i0] = Math.random()*(dw*bow0-dw*tow0-iw0[i0])+(dw-iw0[i0])*tow0; yp0[i0] = Math.random()*(dh-ih0[i0]); am0[i0] = Math.random()*25; stx0[i0] = 0.02 + Math.random()/10; sty0[i0] = 0.7 + Math.random()*3; moveto0(name0,xp0[i0],yp0[i0]) } document.body.scroll = 'yes'; movegif0(); } function moveto0(name,left,top){ document.all(name).style.pixelTop = top; document.all(name).style.pixelLeft =left; } function movegif0(){ for ( i0=1;i0 <= kosu0;i0++) { name0='img0'+ i0; dw = document.body.clientWidth; dh = document.body.clientHeight; yp0[i0]+= sty0[i0]; //xp[i] = dw * 0.5; if (yp0[i0] >(dh+document.body.scrollTop-ih0[i0])) { xp0[i0] = Math.random()*(dw*bow0-dw*tow0-iw0[i0])+(dw-iw0[i0])*tow0; stx0[i0] = 0.02 + Math.random()/3; sty0[i0] = 0.7 + Math.random()*3; yp0[i0] = 0+document.body.scrollTop; } yp0[i0]+= sty0[i0]; dx0[i0] += stx0[i0]; pxo0[i0]=xp0[i0] + am0[i0]*Math.sin(dx0[i0]); moveto0(name0,pxo0[i0],yp0[i0]) } setTimeout('movegif0()',sukudo0); } // End --> </Script><Script Language='JavaScript'> <!-- startpos0(); // End --> </Script><IMG src="icho1.gif"> ******************************以上************************ 恐れ良いりますが、宜しくお願い致します。
質問日時: 2021/11/10 13:45 質問者: 2021五郎蔵
ベストアンサー
11
0
-
webフォームに、jQueryのUIでカレンダーを入れています。 datepickerで、金曜に限り
webフォームに、jQueryのUIでカレンダーを入れています。 datepickerで、金曜に限り、土日を選択出来ないようにしたいのですが、方法はありますでしょうか? 初心者です。よろしくお願いいたします。
質問日時: 2021/11/08 12:42 質問者: sorasora2010
ベストアンサー
1
0
-
Javascript 要素の作成と追加について
下記のようなHTML構造において、それぞれのdivの子要素にボタンを追加したいとします <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </body> そこで、下記のようなjavascriptをブラウザのコンソールで実行したところ、最後のdivにしかボタンが追加されませんでしたが、何故ですか? btn = document.createElement("input"); btn.setAttribute("type","button"); btn.value = "ボタン"; document.querySelectorAll("div").forEach( elm =>{ elm.appendChild(btn); })
質問日時: 2021/11/06 22:04 質問者: Hypnomatic
ベストアンサー
2
0
-
Javascriptで同じ数字を2回打つとアラートが出るプログラミングを作ってます。
画像のように2回同じように打つとアラートを出すようなプログラミングを作ろうとしてます。 let Exist = new Array(); while(true){ let msg = ""; let inp = inputs; console.log(inp) if(Exist[inp]){ msg = inp+"は既に存在します"; }else{ msg = inp+"は存在しないのでExistに登録します"; Exist[inp] = true; // false; // } alert(msg); } inputsにテキストの要素を入れています。2回同じことを打つと if(Exist[inp]){ msg = inp+"は既に存在します"; } のイベントを起こしたいのですが今のままだと1回目で if(Exist[inp]){ msg = inp+"は既に存在します"; } のイベントが起きてしまいます。 どうすれば2回目以降でこのイベントを発生できるかを教えてください。 サンプルコードでいいのでよろしくお願いします。
質問日時: 2021/11/01 16:36 質問者: kyojinnsann_1000
ベストアンサー
14
0
-
チェックボックスのオン⇔オフに応じて並列の画像の濃さを動的に変化させたい
以下のサンプルHTMLのとおり、チェックボックス+小画像という見た目ですが、 ●チェックが入っていない時は、画像を薄く(style="opacity: 0.2;")して ●チェックが入っている時は、通常通り(style="opacity: 0.2;"はつけない、またはopacity: 1) ●チェックがオン⇔オフされたら瞬時に上記が反映 こういう動的な動作をさせたいですが、シンプルな方法(javascript?)をご教示いただけないでしょうか。 専門的には「onclickのイベントを発生させる」などになるのでしょうが、 最初に画面の飛んでくる際、PHP5でMySQL5の値を読み込んでチェックを入れるかどうかも判断していますので、 そこが難しいところかと予想しています。。。 <html> <body> <table> <tr> <td><label><input type="checkbox" name="val1" value="1" checked>りんご<br><img src="./img/10.png" width="100" height="100" style="opacity: 0.2;"></label></td> <td><label><input type="checkbox" name="val2" value="1" checked>みかん<br><img src="./img/20.png" width="100" height="100" style="opacity: 0.2;"></label></td> <td><label><input type="checkbox" name="val3" value="1" checked>ぶどう<br><img src="./img/30.png" width="100" height="100" style="opacity: 0.2;"></label></td> </tr> </table> </body> </html>
質問日時: 2021/10/31 22:05 質問者: litton101
ベストアンサー
1
0
-
javascript ループ中の処理
ループカウントが増えてくにつれてImagesectionにある画像2つ(pics_srcAとpics_srcB)を配列通りに変更したいです! 例 ループカウント0の時→画像リンゴ ファーム 1の時→画像ばなな フォレスト 2の時→画像ぶどう こうえん 3の時→終了(非表示にしてる) 分からないことは画像の配列pics_srcA.Bをループ処理のどこで使うかと カウントが増えてくたびに画像を変更する処理をどうすればいいかです HTML---------------- <body> <br> <section id="start-section" style="background-color:#5d5;"> <a id="start-btn" class="btn btn--orange" href="#">テストを始める</a> </section> <link rel="stylesheet" href="style.css"> <section id="image-section" style="background-color:rgb(42, 201, 103);"> <h1>画像をセットで覚えてください(3秒)</h1> <img id="mypicA" src="imgo/apple.jpg" width="380" height="320"> <img id="mypicB" src="imgh/farm.jpg" width="380" height="320"><br><br> </section> <section id="input-section"> <tb class ="inputa">オブジェクトと背景の2つの画像はフィットしますか?(6秒)</tb><br><br> <input type="range" class = "inputb" id="example" min="1" max="5" step="1"> <p class = "inputc">とても悪い ちょっと悪い 普通 ちょっと良い とても良い<!--<span id="current-value"></span>-->。</p> </section> <script src="js/gazou.js"></script> <link rel="stylesheet" href="style.css"> </body> Javascript----------------- const StartBtn = document.getElementById(`start-btn`); const StartSection = document.getElementById(`start-section`); const ImageSection = document.getElementById('image-section'); const InputSection = document.getElementById('input-section'); const pics_srcA = [ "apple.jpg", "banana.jpg", "grape.jpg", ], IMGA = document.getElementById("mypicA"); const pics_srcB = [ "farm.jpg", "forest.jpg", "park.jpg", ], IMGB = document.getElementById("mypicB"); let numA = 0; let numB = 0; function init() { ImageSection.style.display = 'none'; InputSection.style.display = 'none'; /* スタート・ボタンにクリックイベントを追加 */ StartBtn.addEventListener(`click`, function () { /* スタート・セクションを消して * ループ関数をloopFlag=0で実行 */ StartSection.style.display = 'none'; loopSection(0); }, false); } /* 画像セクションとインプットセクションを交互に表示する関数 * 引数 loopFlag は、0か1。 * 0のときは画像・セクションが表示。 * 1のときはインプット・セクションが表示。 */ let loopCount = 0; //ループをカウントする function loopSection(loopFlag) { let timer; // 待ち時間の変数 if (loopCount === 3){ //3回目でループ終了 ImageSection.style.display = 'none'; InputSection.style.display = 'none'; } else if (loopFlag === 0) { ImageSection.style.display = 'block'; InputSection.style.display = 'none'; timer = 3500; loopFlag = 1; } else { ImageSection.style.display = 'none'; InputSection.style.display = 'block'; timer = 6000; loopFlag = 0; loopCount = (loopCount + 1); } window.setTimeout(function () { loopSection(loopFlag); }, timer); }; /* init関数を実行 */ init();
質問日時: 2021/10/30 14:44 質問者: わちょん
ベストアンサー
1
0
-
GASでGmail送信をするとある文字(赤●など)が文字化けするのを解消したい
Google Apps Script(GAS)についての質問です。 下記スクリプトを実行しました。 function test2() { var str="表示結果 → 赤●" SpreadsheetApp.getActive().getActiveSheet().getRange("A1").setValue(str); GmailApp.sendEmail("testemailaddress@gmail.com", "test2", str); } ※赤●は本当は添付にあるやつです。 ※ここの質問では特殊文字だからか認識されなかったため赤●と表記しています。 実行結果は添付画像の通りです。 添付画像左:シートへの出力結果 添付画像右上:GASでGmail送信した結果 添付画像右下:手でGmail送信した結果 こちらが受信したメール本文のコピペです。 表示結果 → ������ これを添付画像右下のように送受信したいです。 GASでは不可能なのでしょうか? ご存知の方がいらっしゃればご教示宜しくお願いしますm(_ _)m 補足説明 ※自分のgmailアドレスから自分のgmailアドレス(同じアドレス)に送信しています。 ※赤●はmac PCやiPhoneで出てくる特殊文字です。赤、黒などいろいろありますがなぜか白だけは文字化けせずに送れました。 ※上記メールアドレスは質問用に変更しています。 ※画像の左と右は同じPC、同じブラウザで同じタイミングで見ています。
質問日時: 2021/10/30 01:43 質問者: t000506g
ベストアンサー
3
0
-
javascript ループがうごかない
javascriptでわからないです html <body> <br> <a id="btn--orange" class="btn btn--orange">テストを始める</a> <div id = "gazoud" class = "gazous"> <h3>画像をセットで覚えてください</h3> <img id="mypic" src="imgo/apple.jpg" width="380" height="320"> <img id="mypict" src="imgh/farm.jpg" width="380" height="320"><br><br> </div> <div id = "fitd"class = "fits"> <td>物と背景の2つの画像の相性は?</td><br><br> <input type="range" id="example" min="1" max="5" step="1"> <p>2つのペア画像の相性は<span id="current-value"></span>。</p> </div> <script src="js/gazou.js"></script> </body> </html> JavaScript const pics_srcA = [ "apple.jpg", "banana.jpg", "grape.jpg", ], IMG = document.getElementById("mypic"); const pics_srcB = [ "farm.jpg", "forest.jpg", "park.jpg", ], IMG = document.getElementById("mypict"); const x = document.getElementById(`btn--orange`); let pa = document.getElementById('gazoud'); let pi = document.getElementById('fitd'); pa.style.display = 'none'; pi.style.display = 'none'; x.addEventListener(`click`, func = () => { x.style.display = 'none'; function loop2(flag){ let timer; // 待ち時間の変数 if(flag === 0){ pi.style.display = 'none'; //非表示にする pa.style.display = 'block'; //表示する timer = 3500; //3.5秒 flag = 1; }else{ pa.style.display = 'none'; pi.style.display = 'block'; timer = 6000; flag = 0; } window.setTimeout(function(){ loop2(flag); },timer); }; }); divでまとめたやつを変数pa pi にして、表示したり非表示にさせたりしたいのですが動かないです divのidとclassは一緒にしてます(これがいいのか悪いのかわからない...けど反応はする) ボタンを押したらループを開始したいです ループはまだサンプル画像が3枚づつしかないので3回だけにしたいです
質問日時: 2021/10/25 16:19 質問者: わちょん
ベストアンサー
2
0
-
html javascript 作った配列をボタンをクリックしたときに表示させる方法
htmlで <label> フルーツの名前は <fruit> </label> <input type="button" value="進む" onclick="go(1)"> //ボタン <script> const fruit = [ "りんご", "ばなな", "ぶどう", ]; //フルーツの配列 let num = 0; function go(e) { fruit [num + 1]; </script> これだとhtmlのラベルに入ってる<fruit>が反応しないのですがどこが間違ってますか?? ボタンをクリックしたときに名前が変わるようにしたいです
質問日時: 2021/10/25 15:51 質問者: わちょん
解決済
2
0
-
プログラミングについてです。 今JavaScriptを勉強しています。 Progateを3周して、基
プログラミングについてです。 今JavaScriptを勉強しています。 Progateを3周して、基礎はある程度分かったのですが、次に何をすればいいかわかりません。 教えてください。
質問日時: 2021/10/24 14:10 質問者: 12aoao21
ベストアンサー
5
0
-
フォームの状態やGETのURLは保持しつつ、チェックボックスON/OFFした瞬間にSUBMITしたい
以下のHTMLで例えば、「アルファベット/昇順」を選んだ後に、「高校生」にチェックしてsubmitすると、URLが以下のようにヘンテコリンになってしまうのですが・・・ http://localhost/index.php?kou=1&s=.%2Findex.php%3Fs%3D2 こういう風な → http://localhost/index.php?kou=1&s=2 「きちんとした」URLにするには、ここをどう書き換えるべきでしょうか? onChange="location=this.options[this.selectedIndex].value" 加えて、小学生、中学生、高校生、それぞれのチェックボックス(または<label>でくくられた画像)にチェックが入る/外れる瞬間にSUBMITが回る(チェックのON/OFF状況、プルダウン、検索キーは保持される)ようにしたいのですが、ネットで前例みてみると、かなりハードルが高そうで・・・ https://teratail.com/questions/122347 よろしくお願い致します。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <form method="get" action="./index.php" name="Form1"> <table> <tr> <td rowspan="2"> <table border="0"> <tr lang="zh-cn"> <td><label><input type="checkbox" value="1" name="sho"<?php if ($_GET["sho"] == 1) { echo " checked";} ?>>小学生<br><img src="./img1.png"></label></td> <td><label><input type="checkbox" value="1" name="chu"<?php if ($_GET["chu"] == 1) { echo " checked";} ?>>中学生<br><img src="./img2.png"></label></td> <td><label><input type="checkbox" value="1" name="kou"<?php if ($_GET["kou"] == 1) { echo " checked";} ?>>高校生<br><img src="./img3.png"></label></td> </tr> </table> </td> <td> ソート<br> <select name="s" onChange="location=this.options[this.selectedIndex].value"> <option value='./index.php?s=0'<?php if ($_GET["s"] == 0) { echo " selected";} ?>>日本語五十音/昇順</option> <option value='./index.php?s=1'<?php if ($_GET["s"] == 1) { echo " selected";} ?>>日本語五十音/降順</option> <option value='./index.php?s=2'<?php if ($_GET["s"] == 2) { echo " selected";} ?>>アルファベット/昇順</option> <option value='./index.php?s=3'<?php if ($_GET["s"] == 3) { echo " selected";} ?>>アルファベット/降順</option> </select> </td> </tr> <tr> <td> キーワード<br> <input value="<?php echo trim(htmlspecialchars(stripslashes($_GET['q']))); ?>" type="text" name="q"> <input type="submit" value="OK"> </td> </tr> </table> </body></form> </html>
質問日時: 2021/10/24 01:12 質問者: litton101
ベストアンサー
3
0
-
Gas初心者です ネット上のとあるシステムに表がありまして、題目とチェックボックスがあり、GASを使
Gas初心者です ネット上のとあるシステムに表がありまして、題目とチェックボックスがあり、GASを使って指定した題目のチェックボックスに自動的にチェックが入るようにしたいのですが、そういったことは可能でしょうか? HTML?を使用するんでしょうか なんと調べたら良いかも教えていただけると助かります
質問日時: 2021/10/22 22:52 質問者: 中山あ
ベストアンサー
1
0
-
javascrip 切り替えのやり方
下のhtmlがあるとき テストを始めるボタンを押したらボタンが消えて→2つの画像が表示→画像が消えて→スライダー(range)を動かす画面を表示→新しい2つの画像を表示→画像が消えて→スライダー.....をループさせるようにするにはどうすればいいですか 注意☆画像はまだサンプルの2枚しか追加してないです 教えてほしいjavascriptは消し方と出し方と時間経過と1連の動作をループ仕方 調べたらsetInterval ()使うてかいてたけどあまりわからなかった <!DOCTYPE html lang="ja"> <head> <meta charset="UTF-8"> <title>練習プログラム</title> </head> <body> <link rel="stylesheet" href="style.css"> <script src="js/gazou.js"></script> <a href="" class="btn btn--orange">テストを始める</a> <h3>画像のペアをセットで覚えて (3秒間表示)</h3> <head> <img id="mypic" src="imgleft/apple.jpg" width="380" height="320"> <img id="mypict" src="imgright/farm.jpg" width="380" height="320"><br><br> <td>左と右の2つの画像の相性はどれくらい良い?(6秒間表示)</td><br><br> <input type="range" id="example" min="1" max="5" step="1"> <p>2つのペア画像のフィットは<span id="current-value"></span>。</p> </body> </html>
質問日時: 2021/10/20 17:59 質問者: わちょん
ベストアンサー
1
0
-
javascript スライダーについて
https://code-kitchen.dev/html/input-range/ 前回の質問の続きになってしまうのですが、上のサイトを参考に -----html----- <input type="range" id="example" min="1" max="5" step="1"> <p>2つのペアの画像は相性が<span id="current-value"></span>です。</p> ----javascript----- window.onload = () => { const inputElem = document.getElementById('example'), currentValueElem = document.getElementById('current-value'), setCurrentValue = (val) => {currentValueElem.innerText = val;}, rangeOnChange = (e) =>{setCurrentValue(e.target.value);}; inputElem.addEventListener('input', rangeOnChange); setCurrentValue(inputElem.value); } となった時にhtmlの<span id="current-value"></span>の部分を数字ではなく言葉を入れたいときはjavascriptでvalをいじればいいのでしょか? 自分で試したのはletで新しい変数aisyoを作って、jsの5行目のvalを新しい変数aisyoに変えて if文でvalの数がこれならaisyoはこの文字列を代入するってやったんですが動かなかったです
質問日時: 2021/10/19 15:35 質問者: わちょん
ベストアンサー
1
0
-
Backbone.js イベントが効かない
"click li" : "_onClick" のイベントが動作しません。 分かる人いましたら、教えてください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.2/backbone.js"></script> </head> <body> <script type="text/template" id="user-template"> <%- name %> <%- age %> 才 </script> <script> const Person = Backbone.Model.extend({}); const Users = Backbone.Collection.extend({ model: Person }); const users = new Users(); //データ追加 users.add({ name: "太郎", age: 8 }); // 要素の作成 const span_view = Backbone.View.extend({ tagName: "li", template: _.template($("#user-template").html()), events : { "click li" : "_onClick" }, _onClick: function() { console.log('detected'); }, render: function() { const tpl = this.collection.map( v => this.template(v.attributes) ).join('<br>'); this.$el.html(tpl); return this; } }); const span = new span_view({ collection: users }); // 要素を画面に描画 $("body").html(span.render().el); </script> </body> </html>
質問日時: 2021/10/19 13:14 質問者: i-d-a-i
ベストアンサー
1
0
-
javascript スライダー
https://code-kitchen.dev/html/input-range/ このページに書いてあるサンプルコードの完成形と同じことをやってもhtmlの<span id="current-value"></span>ここに入るはずの数字が表れません どのスライダーを選んでも”現在の値はです”と表示されます 分かる方教えてください
質問日時: 2021/10/19 05:29 質問者: わちょん
ベストアンサー
2
0
-
Javascript でログインできないページ
こんばんは 下記サイトなのですが、javascriptでユーザーIDとパスワードを入力しても、エラーで弾かれてしまうのですが、なぜなのでしょうか? https://ds.digitalpharmacy.jp/login document.querySelectorAll("input")[0].value = "hoge"; document.querySelectorAll("input")[1].value = "huga"; document.querySelectorAll("button")[1].click();
質問日時: 2021/10/16 20:13 質問者: Hypnomatic
解決済
2
0
-
js ぽっぷあっぷ?
おそらくjsの技術だと思います。 1,ポップアップというのでしょうか? 2,棚に入れる というボタンをクリックしたら そのうえ?に「見終わった」「見たい」などのボタンが表示されます。下記の画像ようなプログラムはどうすれば作れますか?
質問日時: 2021/10/16 17:17 質問者: 9うい9p
ベストアンサー
3
1
-
ajax で読み込みを途中で止めたり、途中から開始したい。
ajax で読み込みを途中で止めたり、途中から開始したい。 そういうことはできるのでしょうか ? サンプルになるページは見つかりませんでした。 ソースもしくは、参考になるページを知りませんか ? よろしくお願いします ! <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <script src="./lib/jquery-1.8.2.js"></script> <script src="./lib/underscore.js"></script> <script src="./lib/backbone.js"></script> --> <script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.2/backbone.js"></script> </head> <body> <script> const PostModel = Backbone.Model.extend({ url: 'http://jsonplaceholder.typicode.com/posts/1' }) new PostModel() .fetch() // 取得 .done(function(post) { console.log(JSON.stringify(post)); }) //.done((post) => console.log(JSON.stringify(post))); /* function () {} アロー関数 function を取る。中括弧をアローにする。アローの先に中身を書く () => 中身。 */ </script> </body> </html>
質問日時: 2021/10/15 22:37 質問者: i-d-a-i
ベストアンサー
2
0
-
javascript教えてください
const rows = []; function go_forward() { const row = [ pics_src[num], //リンゴの画像 document.formname.a001.value,//赤い document.formname.a002.value,//おいしそう document.formname.a003.value,//フルーツ document.formname.a004.value,//丸い document.formname.a005.value, ].join(','); rows.push(row); document.formname.a001.value = '';//空白に戻す document.formname.a002.value = ''; document.formname.a003.value = ''; document.formname.a004.value = ''; document.formname.a005.value = ''; } htmlで5つフォームを作ってフォームの内容と写真の名前を go_forward(ボタン)を押すとcsvに保存してフォーム内容を空白にするコードがあるのですが jsで上記を書いても動かないです これはhtmlの内容が悪いのか、上のコードが物足りないのかわからないです
質問日時: 2021/10/14 20:54 質問者: わちょん
ベストアンサー
2
0
-
htmlとjavascriptの違い
htmlのscriptタグの内容とjavascriptの内容は何が違うのですが? どちらもfunctionなどを入れれば中身を動かせそうですが
質問日時: 2021/10/14 20:41 質問者: わちょん
ベストアンサー
3
0
-
csvに保存しているデータをURLにする方法
フォームに書いた内容をcsvに保存するところまでは行けたのですが、それをblobにしてダウンロードURLを作るやり方がわからないです
質問日時: 2021/10/14 19:28 質問者: わちょん
ベストアンサー
3
0
-
Googleクロム開発ツール JavaScriptについて
プログラミング初心者です。 現在、Googleクロムの開発ツールを使用して、JavaScriptで組む練習をしています。 そんな中、写真データがブラウザへ反映させる方法がわからず、困っています。 参考として、エラー画面を添付いたします。 すみませんが、どなたかご教示いただけると助かります。 宜しくお願いいたします。
質問日時: 2021/10/13 20:54 質問者: はんばーぐ1219
ベストアンサー
2
0
-
JavaScript プログラミング言語について
プログラミング言語学習の初心者です。 現在、JavaScriptの開発ツールにgoogleクロムのものを使用しております。 言語で大文字と小文字が誤っているとエラー表示が出ます。 そもそも大文字と小文字は、なぜ区別する必要があるのでしょうか? 本当に初歩的な質問で申し訳ありませんが、どなたか教えてください。 ちなみにエラー表示が出た言語は以下の言語となります。 getelementbyid('nextbtn');
質問日時: 2021/10/11 23:04 質問者: はんばーぐ1219
ベストアンサー
1
0
-
ブログのボタン
jsなどで添付画像のようなブログでよくある 「ボタンをクリックするとhtmlタグが挿入される」 物を作りたいのですが、どのように作ればよいか&検索ワードがわかりません。 教えていただけませんか? 例えば、 if(イタリックが選択されれば) { 要素の作成 } else if(もう一度押されれば) { 上記の終了タグを追加 } みたいな感じでしょうか?
質問日時: 2021/10/09 08:50 質問者: 9うい9p
ベストアンサー
2
0
-
webデザインの勉強をしているのですが、お問い合わせフォームにjquery validation P
webデザインの勉強をしているのですが、お問い合わせフォームにjquery validation Pluginを使ってエラーメッセージを表示させようとしたら、わざと文章を何も入れないで送信ボタンをメッセージは出るのですが、そこからまた送信ボタンを押したり一度枠の中をクリックしてから外側を押すと更にその上に新しいエラーメッセージが出てきてメッセージがたくさんになってしまいます。何か間違えているのでしょうか? 以下script部分です。 <script src="jquery.validate.min.js"></script> <script> $(function(){ $("#form").validate({ // 入力のルール rules: { // 必須項目 "name_sei": { required: true }, "name_mei" : { required: true }, "email" : { required: true }, "message" : { required: true }, }, // エラーメッセージ messages:{ "name_sei" : { required : "<span class='warning'>・お名前(姓)の入力を行ってください。</span><br>" }, "name_mei" : { required : "<span class='warning'>・お名前(名)の入力を行ってください。</span><br>" }, "email" : { required: "<span class='warning'>・メールアドレスの入力を行ってください。</span><br>" }, "message" : { required: "<span class='warning'>・お問い合わせ内容の入力を行ってください。</span><br> errorPlacement: function(error, element){ error.insertBefore("#form"); } }); }); </script>
質問日時: 2021/10/06 23:45 質問者: reo96319
ベストアンサー
1
0
-
JSについて
jsで要素のアニメーションの制作をしました。 1、cssが left: calc(100% - 100px);ではないと動かなくなるのはなぜでしょうか? ※right:0;とかでは動かなくなる。 2,ボタンの onclick="clickTest()ではなくjsにdocument.getElementById("").onclick = function() { と書いたら動かなくなるのはなぜですか? 以下コード <style> #anime_test{ height: 100px; width: 100px; background-color: #F44336; position: relative; left: 0; transition: 3s; } #anime_test.act { background-color: #2196F3; left: calc(100% - 100px); } #anime_test-btn { margin-top: 10px; display: inline-block; padding: 5px 10px; border: solid 1px; cursor: pointer; } </style> <body> <div id="anime_test"> </div> <div id="anime_test-btn" onclick="clickTest();"> ボタン </div> <script> document.getElementById("anime_test-btn").onclick = function() { function clickTest() { target = document.getElementById("anime_test"); if (target.className == null || target.className=="") { target.className = "act"; } else { target.className = ""; }} }; </script> 本来のコードでは document.getElementById("button").onclick = function() { はないもので動いていました。
質問日時: 2021/10/06 09:38 質問者: 9うい9p
ベストアンサー
2
1
-
JavaScriptの将来性
JavaScriptは将来性が高い言語ですか?JavaScriptを勉強するならTypeScriptも一緒に勉強した方がいいですか?
質問日時: 2021/10/06 08:53 質問者: オバケイ
解決済
2
0
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
最新のコラム/記事
-
マッチングアプリで出会ったカップルは成婚率が高い!?結婚カウンセラーに聞いてみた
パートナーとの出会いの場として、もはや主流となったネット婚活やマッチングアプリ。中でも手軽に登録できるマッチングアプリは、10代から50代と幅広い年代が利用している。一方で、“相手の目的が投資関係の詐欺や...
-
メダロット:第250話「Vol.250※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
メダロット:第249話「Vol.249※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
日本古来の伝統工芸「金継ぎ」で修復した食器は前と同じように使えるの?
大切にしている食器が割れてしまったら、きっと誰もが「元に戻したい」と願うだろう。「教えて!goo」にも「割ってしまったお気に入りの食器を復活できる?」という質問があり、最適な方法について様々な意見が寄せら...
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div>のタッチ状態を維持したままラ...
-
フォームが空欄の時にフォームの外...
-
プラグイン無しでContactform7にdat...
-
変数名をどのようにつけるのが良い...
-
階層別の組織図の自動作成について
-
条件に該当した時のみ定数を宣言す...
-
2段階プルダウンで1段階目の選択を...
-
読み込んだQRコードをフォームに受...
-
初心者です。gulpでコンパイルがで...
-
正規表現について質問です。条件に...
-
jQueryでシンセサイザーを作ってい...
-
メールフォームの日付入力フォーム...
-
二次元配列を使って順位をだすとき...
-
二次元配列の中の各行の要素をラン...
-
出発駅A、到着駅Bを選択すると、2.3...
-
スマホ上で、左右スワイプで次のペ...
-
【Google Apps Script】「ライブラ...
-
jQueryで同じクラス名のものを別物...
-
①入力フォーム→②確認表示画面→③送信...
-
プログラムについて。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次のペ...
-
読み込んだQRコードをフォームに受...
-
追加ボタンを押した際に ok ボタン...
-
①入力フォーム→②確認表示画面→③送信...
-
階層別の組織図の自動作成について
-
セレクトボックスで配列を呼び出し...
-
jsonテキストデータの並び替えがで...
-
【Google Apps Script】「ライブラ...
-
二次元配列を使って順位をだすとき...
-
初心者です。gulpでコンパイルがで...
-
jQueryで同じクラス名のものを別物...
-
HTMLでサブフレームから親のスクリ...
-
Colorboxがうまく設置できません
-
セレクトを全て選択されていないと...
-
画面遷移を行わずに同一ページでHTM...
-
フォームが空欄の時にフォームの外...
-
Googleフォームで選択肢に応じて次...
-
【GAS】WEBアプリでハイパーリンク...
-
jsで質問です。 ボタンが二つ存在し...
-
GASでチェックボックスを一括offしたい
おすすめ情報