JavaScript

ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか？ ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー｜　　86行目　　｜ーーーーー｜ ーーーーー｜　　87行目　　｜ーーーーー｜　　96行目　 83行目　　｜　　88行目　　｜　　92行目｜　　97行目 ーーーーー｜　　89行目　　｜ーーーーー｜ 【やりたいこと】 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜ ーーーーー｜　　86行目｜87行目　｜ーーーーー｜　　96行目　 83行目　　｜　　88行目｜89行目　｜　92行目　｜　　97行目 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜

エイサーの Chromebook 15 CB3- 532 F 14 のブラウザの Chrome からブックマークレットを使いたいと思っています。 javascript:alert('こんにちは'); や あやしいリンク先の実際のリンクを確認する javascript:(function(){var a=document.activeElement; alert(a.outerHTML);})(); は本を参考に試したところ実行できました。 同じように リンク先を確認してからジャンプする javascript: captureEvents(Event.CLIK); void( onclick=function(e){ return confirm(e. target. href) } ) では失敗しました。 失敗は計算機能 javascript:( function(){ var c=prompt(“計算式を入力してください”); if(c!=null){ alert(eval (c)); } void(0); } )(); でも起きました。 失敗で表示される画面は違うはずなのに結果として同じようです。 添付ファイルにその状態を示します。 両方とも市川市図書館のURL で試したのでその URL のトップが見える画面です。 直し方を教えてくださいよろしくお願いします

お世話になります。 下記スクリプトの改良する点を教えていただきたいです 何十件と続くリストの中から選択したinputタグの中身をコピーしたいと考えています。 いろいろチャレンジしているのですが、正解を導き出せず、困っています。 ご教授よろしくお願いします。 <!--　JavaScript --> function copyToClipboard() { // コピー対象をJavaScript上で変数として定義する var copyTarget = document.getElementById("copyTarget[可変する数字]"); // コピー対象のテキストを選択する copyTarget.select(); // 選択しているテキストをクリップボードにコピーする document.execCommand("Copy"); // コピーをお知らせする alert("コピーできました！ : " + copyTarget.value); } <!-- HTML内--> <div class="list"><input name="url" type="text" value="https://www.aaaaaaaaaaa.com/img/2020/8/3333333.jpg" id="copyTarget1" style="width:96%;" /><input type="button" id="copy" value="クリップボードへコピーする" onclick="copyToClipboard()"></div> <div class="list"><input name="url" type="text" value="https://www.aaaaaaaaaaa.com/img/2020/8/2222222.jpg" id="copyTarget2" style="width:96%;" /><input type="button" id="copy" value="クリップボードへコピーする" onclick="copyToClipboard()"></div> 以下ループで続く...

お世話になります HTML内に下記のようなフォームが複数存在しています。 select[name="page_name"]が変更されたときに値を取得しPHP に送信したいのですが、一番上にあるselectの値が取得されてしまいます。 ひとつのscriptで複数のselectに対応したい場合、どのような記述になりますでしょうか？ 助けていただきたいです。よろしくお願いします。 <!--１番目のセレクト--> <form method="post" action="javascript:void(0);"> <input type="hidden" id="img_id" name="img_id" value="3"> <select name="page_name"> <option value="">選択してください</option> <option id="page_name" value="1">あああ</option> <option id="page_name" value="2">いいい</option> <option id="page_name" value="3">ううう</option> </select> </form> <!--２番目のセレクト--> <form method="post" action="javascript:void(0);"> <input type="hidden" id="img_id" name="img_id" value="4"> <select name="page_name"> <option value="">選択してください</option> <option id="page_name" value="1">あああ</option> <option id="page_name" value="2">いいい</option> <option id="page_name" value="3">ううう</option> </select> </form> <!--３番目のセレクト--> ---省略--- /*script*/ $('select[name="page_name"]').change(function() { var data = { 'page_name' : $('#page_name').val(), 'img_id' : $('#img_id').val() }; $('#name').text(data['img_id']); $.ajax({ type: "POST", url: "/admin/change/", data:data }); alert("画像使用ページを変更しました！"); return false; }); });

下のページを参考に、自分のウェブサーバーで再現しようと思い全く同じように作成したファイルを配置しました。しかし、サンプルページと同じような動きになりません。 添付した画像のようにマウスと拡大画像が連動して動かず、円が残像のように表示されます。 すべて全く同じファイルと構造にしているのに動きが違うので困っています。みなさんはサンプルページと同じように動きますか？ここをチェックしてみてという所があったら教えてください。 http://thosokawa.sakura.ne.jp/blog/2016/11/05/canvas%E3%81%AE%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E8%99%AB%E7%9C%BC%E9%8F%A1%E6%8B%A1%E5%A4%A7/ サンプルページ http://thosokawa.sakura.ne.jp/lab/01/ どうぞよろしくお願いします。

＜単純なデータ型＞ 1. 以下のようなケースでxに５という値を代入すると1行目の「let x = 1;」で「x」の値が5に変わるというのは理解できます。 この場合、2行目は「y」の値は「1」のままです。「5」でないのがわかりません。 代入したことによって「let y =x」へは影響を及ぼさないのはなぜですか？ 少なくともスコープの範囲以内は代入の影響が出るものと考えてしまいます。 { let x = 1; let y = x; x = 5; console.log(x); //5 console.log(y); //1 } <配列> 2.このような配列の場合、「x[0]」に配列である[1, 2];が代入されているわけですよね。 以下のように「x[0]」に5を代入した場合、console.logで見てみると、[5, 2]となるのは理解できます。 しかし、２行目の「let y = x;」も[5, 2]となっています。 上の単純なデータ型のケースをもとに考えるならば、ここは[1, 2]のままでないのはなぜなのでしょうか？　試しに自分で「x[1]」に書き換えてみると両方とも「1, 5」となります。 { let x = [1, 2]; let y = x; x[0] = 5; console.log(x); //[5, 2] console.log(y); //[5, 2] } なぜ、単純なデータ型と配列ではパターンが異なってくるのでしょうか？ 初心者です。学習中でまだ基礎的な段階なのですが、つまづいてしまいました。 分かる方いらっしゃいましたら教えて下さい。よろしくお願いいたします。

いつも大変お世話になり、誠にありがとうございます。 標記の件。 最初は小さなバラの花束がクリックすると拡大しました。 この技はどうするのでしょうか？ 教えて下さい。 どうか、宜しくお願い申し上げます。

プログラム初心者で、プロゲートなどでJavaScriptの基礎を学んでいます。 作りたいものは色々あるのですが、そもそもの概念的な部分でわからないことが1点。 何かプログラムを書いたら、画像のようなアプリケーションを作れるのかと思っていたのですが、JavaScriptだとHTMLと組み合わせたものにしかならないのでしょうか？ HTMLをブラウザで開いて、中に配置したボタンなどで実行する、みたいな。 それとも何かこういったアプリケーション形式にまとめ上げる手順があるのでしょうか？ もう1点、プロゲートで環境構築ということで、わけもわからないままnode.jsのインストール、Nodistのインストール、babelのインストールなどしました。 インストールと聞くと、通常のソフトウェアのように…例えばLINEやOpera、Evernoteなどのように、Windowsのソフトウェアの一覧の中に組み込まれるのかと思っていたのですが、全く見当たりません。 わけがわからないまま諸々他のサンプルフォルダなどと一緒に削除してしまったのですが、これはフォルダの中に配置されるという意味でのインストールだったのでしょうか。 それともソフトウェアの一覧に組み込まれていないだけで、実はプログラムとしてパソコン内のどこかに保管されていて使えるようになっているのでしょうか。 まだまだ分からないことだらけで勉強中ではあるのですが、どのように認識していいのかわからずずっと消化不良で気持ち悪い状態が続いています。 個人的な事情ですが、この状態を保ったまま先に進むのが苦手なので、上記2点教えていただけると嬉しいです。 よろしくお願いいたします。

全画面表示の時に表示されるアドレスバーの部分を消す方法をご教授下さい。 自分のホームページ内で、クリックしたら別窓で全画面表示で立ち上がるようにする部分を作ったんですけど、私のやり方ではアドレスバーの部分が表示されてしまいます。 このアドレスバー（画像の赤い部分です。アドレスの横にあるトグルボタン？なども含めすべて）を表示させない方法はないでしょうか。 ↓以下がhtmlに入れているJavaScriptのタグになります。 【head部分】 <script language="JavaScript"> <!-- function fullopen(strURL) { win=window.open(strURL, "","fullscreen=1"); win.window.moveTo(0,0); win.window.resizeTo(screen.availWidth,screen.availHeight); } //--> </script> 【別窓を立ち上げ、全画面表示で開かせたいURL部分】 <a href="javascript:void(0);" onclick="fullopen('～.html');"></a> これのどの部分をどのように直せばいいでしょうか。 当方JavaScriptほぼ素人のため、できるだけわかりやすく教えて頂けるととても助かります。 よろしくお願いします。

　大阪府地図形当てクイズを作成しています。ボタンをクリックすると音声が鳴るところまではうまく行きましたが、同じボタンで同時に「正解」などの表示を出す方法について教えてください。 コードを下に示しますが、<script>の最後に // アラート表示 alert('正解'); } を加えるとポップアップはすべてのボタンで「正解」になってしまいます。 　<a onClick="soundbell(1)" >のところに何か付け加えるとどうかいろいろ試していますが、なかなかうまく行きません。 <script> function soundbell(n) { // 割り当てるID名（引数のnを連結して指定） var id = 'sound-'+n ; // 初回の再生以外だったら音声ファイルの再生ポイントを先頭にしておく if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ) { document.getElementById( id ).currentTime = 0; } // [ID:sound-file]の音声ファイルを再生[play()]する document.getElementById( id ).play() ; } </script> </head> <BODY> <p align="center"> <a onClick="soundbell(1)"><input type="button" value="　能勢町　"></a> <a onClick="soundbell(2)"><input type="button" value="　高槻市　"></a> <a onClick="soundbell(2)"><input type="button" value="　豊能町　"></a> <a onClick="soundbell(2)"><input type="button" value="　島本町　"></a> //----- 略 ----- <a onClick="soundbell(2)"><input type="button" value="　大阪市　"></a> </p> <audio id="sound-1" preload="auto"> <source src="correct-answer.mp3" type="audio/mp3"> </audio> <audio id="sound-2" preload="auto"> <source src="wrong-answer.mp3" type="audio/mp3"> </audio> </BODY> </HTML>

ネット情報のコピペでhead部分に <script> function soundbell(n) { // 割り当てるID名（引数のnを連結して指定） var id = 'sound-'+n ; // 初回の再生以外だったら音声ファイルの再生ポイントを先頭にしておく if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ) { document.getElementById( id ).currentTime = 0; } // [ID:sound-file]の音声ファイルを再生[play()]する document.getElementById( id ).play() ; } </script> を書いて body部分に <a onClick="soundbell(1)"><input type="button" value="aaaaaa"></a> <a onClick="soundbell(2)"><input type="button" value="＊＊＊＊"></a> <audio id="sound-1" preload="auto"> <source src="correct-answer.mp3" type="audio/mp3"> </audio> <audio id="sound-2" preload="auto"> <source src="wrong-answer.mp3" type="audio/mp3"> </audio> を記述してうまく音が出ています。 ここで、同じボタンをクリックすると同時に、音とポップアップ表示することに挑戦していますが、なかなかうまくいきません。 どなたか教えてくれませんかね。

[script] $(function() { $(".btn").on('click',function(){ Tmp=$(this).attr('id').replace('button','p'); $(".box").hide(); $("#"+Tmp).show(); }); }); [css] .box{ display:none; } [html] <p id="p1" class="box">テスト１</p> <p id="p2" class="box">テスト2</p> <p id="p3" class="box">テスト3</p> <input type="button" id="button1" value="ボタン1" class="btn" /> <input type="button" id="button2" value="ボタン2" class="btn" /> <input type="button" id="button3" value="ボタン3" class="btn" /> 上記のコードのボタン部分、表示部分を変えたいのですがうまくいかないので教ええてください。 <input type="button" id="button1" value="ボタン1" class="btn" />ここの部分を<p id="tab1 class="tab">に変更し、 <p id="p1" class="box">テスト１</p>　ここの部分を <div class="">(cssでアイテム（ul）全体を右に寄せています。) <ul> <a href="/"><li><img src="hoge/hoge1.png"><p>hogehoge</p></li></a> <a href="/"><li><img src="hoge/hoge2.png"><p>hoge</p></li></a> </ul> </div> よろしくお願いします。

jsのプログラムで質問があります。 p id1を押したらテスト1が表示されますが、p id2を押したら1が表示されたまま2が表示されてしまいます。 2を押したら1を隠して2を表示させたいのですが、やり方を教えてください。 3も、同じようにしたいです。 <p id="p1">テスト１</p> <p id="p2">テスト2</p> <p id="p3">テスト3</p> <input type="button" id="button1" value="ボタン1" /> <input type="button" id="button2" value="ボタン2" /> <input type="button" id="button3" value="ボタン3" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { // 初期表示を非表示にする $('#p1').hide(); // 初期表示を非表示にする $('#p2').hide(); // 初期表示を非表示にする $('#p3').hide(); $("#button1").click(function() { // 表示する $("#p1").show(); }); $("#button2").click(function() { // 表示する $("#p2").show(); }); $("#button3").click(function() { // 表示する $("#p3").show(); }); }); </script>

jqueryをスマホの時だけ動作させたいのですが、どう記述すればよいかご教示お願いいたします。 コピペOKの情報サイトからアコーディオンメニューのやり方を拝借したのですが、 PCでは動作させず、スマホで見た時だけアコーディオンにしたいと思っています。 素人ながら調べてやってみても思うようにいきません。 どなたか下記にどう追加すればよいか教えていただけないでしょうか。 宜しくお願い致します。 <script> $(function() { $('●●').each(function() { $(this).on('click', function() { $(this).toggleClass('on'); $("●●", this).slideToggle() return false; }); }); }); </script>

下記のようなコードを見つけました。 points.map(([x, y]) => ([ grid.x + grid.k * x, ← これをaとする grid.y + grid.k * y ← これをbとする ])); 上記を簡単な表示になおすと下記になります points.map(([x, y]) => ([a,b])); カッコがいっぱいあります。 一番外側はmapの引数のカッコ points.map() ([x, y]) はアロー関数の引数のカッコ では([a,b])の ( ) は何の役目なのでしょうか？

下記のように書いたらエラーとならず c と表示されました どのような原理でcと表示されるのでしょうか？ const d=("a","b","c"); console.log(d);

h1に下記のように値を設定しました const h1 =[ ]; h1.push({x: 0.23, y: 326}); h1.push({x: 0.21, y: 326}); h1.push({x: 0.29, y: 334}); h1.z = "C"; そして下記のように表示しました h1.forEach(d => { console.log(d) }); しかし、表示されるのは下記のみでCは表示されません。Cはどこにいったのでしょうか? {x: 0.23, y: 326} {x: 0.21, y: 326} {x: 0.29, y: 334}

HTTP通信でJSON形式のデータを読み込むメソッドがあります。 サンプルなどをみると下記のように書かれています。これは略記で書かれているのでしょうか？？？ $.getJSON() ※引数は省略しています。 上記のコードを略記で書くと $.getJSON() 略記で書かないと jQuery.getJSON() という事で合っていますか。 すみませんが宜しくお願いします。 では、失礼します。

forやwhileを即座に終了させることは可能ですか？ return や breakでは、その場所まで処理が実行されます。そうではなくボタンを押した瞬間に処理を終了させたいのですがそんな方法あるでしょうか？

以下の記述について、ちょっと気になったので... $() → jQuery() ※同じ意味 $.メソッド → ？？？.メソッド ※「$.(ドルマーク+ドット)」と同じ意味がある記述し方 聞きたい事は$.(ドルマークドット)の記述と同じ意味の記述の仕方を教えて下さい。 なんて説明していいのかわからないけど... わかっていただけたでしょうか。 宜しくお願いします。