JavaScript

この状態でr.src = ""が効かない原因を知りたいです。 var se = d.createElement("audio"); var r = document.createElement("input"); r.type = "file"; var blobel = new Array(25); dc("info")[0].appendChild(r); var idd = 0; function ppd(){ blobel[idd] = r.files[0]; r.src = ""; idd++; if (idd == 11){ clearEventListener("change", ppd()); r.style.display = "none"; } if (idd == 1){ se.src = blobel[0]; } } r.addEventListener("change", ppd()); 要はinput fileを初期化したいがイベントが発火しないという困り事です。 ご意見、よろしくお願いします。

jQuery 円周上に配置した要素を加工したい ここに円周上に等間隔に要素を配置するコードがあります。 これを下記の要件を満たすためには、どんなコードにしたらよいですか？ ＜要件＞ ・基準点を赤丸で表示させる ・時計の文字盤のような数字の配置にする（真上がゼロ） ・円内の文字が上下左右とも、中央に来るようにする ・数字は赤丸を天にした向きに表示させる <script src='https://code.jquery.com/jquery-3.7.0.min.js'></script> <style> .main-board { position: relative; width: 300px; } .circle-box { } div.item { position: absolute; width: 40px; height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: #0dd; } </style> <section class="main-board"> <section class="circle-box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </section> </section> <script> $(function(){ var item_num = $('div.item').length; var deg = 360.0 / item_num; var red = (deg * Math.PI / 180.0); var circle_r = $("div.item").width() * 2.5; $('div.item').each(function(i, elem) { var x = Math.cos(red * i) * circle_r + circle_r; var y = Math.sin(red * i) * circle_r + circle_r; $(elem).css('left', x); $(elem).css('top', y); $(elem).text(i); }); }); </script>

JavaScript テーブルのデータをシャッフルするには？ ここに１つのテーブルがあります。 tbody td のセルデータをシャッフルするには どんなコードでできますか？ 要は、テーブル内容をランダムに並べ替える、ということです。 ＜仕様＞ ・ボタンを押すごとに テーブル内を並べ替える ・thの内容は固定 ・並べ替えるのは tbody tdの内容 [HTML] <button id="button1">シャッフル</button> <table id="table5" border="1"> <thead> <tr> <th></th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th> <th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>春</td> <td>夏</td> <td>秋</td> <td>冬</td> <td>朝</td> <td>昼</td> <td>番</td> <td>花</td> <td>鳥</td> <td>風</td> </tr> <tr> <th>2</th> <td>月</td> <td>天</td> <td>地</td> <td>人</td> <td>愛</td> <td>4.3</td> <td>3.5</td> <td>8.4</td> <td>6.1</td> <td>6.4</td> </tr> <tr> <th>3</th> <td>1.8</td> <td>7.8</td> <td>1.4</td> <td>7.5</td> <td>6.2</td> <td>6.5</td> <td>5.1</td> <td>7.9</td> <td>7.2</td> <td>2.8</td> </tr> <tr> <th>4</th> <td>83</td> <td>64</td> <td>18</td> <td>51</td> <td>36</td> <td>45</td> <td>84</td> <td>22</td> <td>16</td> <td>25</td> </tr> <tr> <th>5</th> <td>arm</td> <td>bat</td> <td>cat</td> <td>dog</td> <td>egg</td> <td>fig</td> <td>gal</td> <td>hit</td> <td>ink</td> <td>joy</td> </tr> </tbody> </table>

JavaScript 簡単なコードで表を転置できますか？ ここに１つのテーブルがあります。 これを簡単なコードで 転置できますか？ ここにいう転置とは、 表のセルについて、(m×n行列) => (n×m行列) に変換することです。 ＜仕様＞ ・テーブルの列と行を入れ替える ・文字は横書きのままで変更なし ・Vanilla JS で ( jQuery 無用 ) ・チェックボックスでトグル <div><input type="checkbox" id="menu">転置</div> <div class="container"> <table id="table2" border="1"> <caption>世界の高い山 トップ10</caption> <thead> <tr><th>順位</th><th>山の名称</th><th>標高 (ｍ)</th></tr> </thead> <tbody> <tr><td> 1位</td><td>エベレスト</td><td>8,848</td></tr> <tr><td> 2位</td><td>Ｋ２</td><td>8,611</td></tr> <tr><td> 3位</td><td>カンチェンジュンガ</td><td>8,586</td></tr> <tr><td> 4位</td><td>ローツェ</td><td>8,516</td></tr> <tr><td> 5位</td><td>マカルー</td><td>8,485</td></tr> <tr><td> 6位</td><td>チョ・オユー</td><td>8,201</td></tr> <tr><td> 7位</td><td>ダウラギリ</td><td>8,167</td></tr> <tr><td> 8位</td><td>マナスル</td><td>8,163</td></tr> <tr><td> 9位</td><td>ナンガ・パルバット</td><td>8,126</td></tr> <tr><td>10位</td><td>アンナプルナ</td><td>8,091</td></tr> </tbody> </table> </div>

<script> var n = n || {}; n.queue = n.queue || []; </script> この構文の意味を教えてください

JavaScript 簡単なコードで順位を上下反転できますか？ ここに１つのテーブルがあります。 これを簡単なコードで順位を上下反転できますか？ ＜仕様＞ ・フィールド行（項目名）は最上位で固定 ・CSS または Vanilla JS ( jQuery 無用 ) ・チェックボックスでトグル <div><input type="checkbox" id="menu">逆順</div> <table id="table1" border="1"> <caption>ビタミンC 含有量トップ10</caption> <thead> <tr><th>順位</th><th>野菜名</th><th>含有量 (mg)</th></tr> </thead> <tbody> <tr><td> 1位</td><td>ピーマン(トマピー)</td><td>200</td></tr> <tr><td> 2位</td><td>赤ピーマン(パプリカ)</td><td>170</td></tr> <tr><td> 3位</td><td>芽キャベツ</td><td>160</td></tr> <tr><td> 4位</td><td>黄ピーマン(パプリカ)</td><td>150</td></tr> <tr><td> 4位</td><td>オレンジピーマン(パプリカ) </td><td>150</td></tr> <tr><td> 6位</td><td>ブロッコリー</td><td>140</td></tr> <tr><td> 7位</td><td>とうがらし</td><td>120</td></tr> <tr><td> 7位</td><td>パセリ</td><td>120</td></tr> <tr><td> 9位</td><td>なばな</td><td>110</td></tr> <tr><td>10位</td><td>カリフラワー</td><td>81</td></tr> </tbody> </table>

JavaScript 動的な作表コード：普通じゃ物足りない？ 動的に作表するには、次のメソッドが使われています。 createElement, insertRow, insertCell さて、これらを用いずに 作表するにはどんなコードになりますか？ 下記のとおり、素材を用意しました。 <script> //表の名称 (caption) const title = "一般果物　エネルギー　上位１０"; //表の元データ (分割子は半角スペース) const data = ` 順位 果物名 含量 (Kcal) 1位 中国栗 207 2位 アボカド 178 3位 日本ゆで栗 152 4位 ドリアン 140 5位 バナナ 93 6位 あけび 89 7位 チェリモヤ 82 8位 アテモヤ 81 9位 ホワイトサポテ 73 10位 ぐみ 72`; </script>

JavaScript スライダーでオブジェクト変数の値を変更するには？ <div id="wrap"> <div class="target">○</div> <div class="target">○</div> <div class="target">○</div> </div> <div>delay : <input type="range" id="delay_slider" min="0" max="100" value="0" step="10"> <span id="delay_slider_span">0</span> </div> <script> //全ての対象要素を取得して配列に変換 const targets = Array.from(document.querySelectorAll('#wrap .target')); const animations = []; //生成アニメーションの格納配列 //取得した要素にアニメーションを設定 targets.forEach((target, i) => { const animation = target.animate( [ { transform: 'translateX(0px)'}, { transform: 'translateX(60px)'}, ], { duration: 500, fill: 'forwards', delay: 0, endDelay: 0 } ); animation.cancel(); animations.push(animation); }); </script> スライダー要素を動かして、 オブジェクト変数の値「delay」を変更するためには どういうコードで実現できますか？ くわしい方のお力添えをお待ちしております。

<h1>JS 分割子が混在したデータの成型コードは？</h1> <pre> さまざまな分割子が混在したデータがあります。 これを１つの分割子に統一するには どんなコードでできますか？ 【仕様】 [分割子] ・二重引用符 ・一重引用符 ・タブ区切り　　・・・ 単語と単語の間 ・半角空白　　　　　　 同上 ・パイプ（縦棒）・・・ 行頭と末尾に有る、無いの２ケース [データ型式] (注) 適合しないデータが含まれています １列目：３桁カンマ区切り ２列目：文字データ ３列目：整数・小数（負数を含む） [備考] ・空白行は詰める ・エラーデータは「****」と出力 </pre> <pre id="data"> 1,234 あさがお 23.45 7,904 みかん 0.92 5,021 うさぎ 5.63 8,753 えんどう 1.724 2,657 いちご 10.87 9,841 ひまわり 77.33 432 ベニバナ 4.09 7,123 メロン 98.14 432 しらゆり 4.09 6,722 ナツメグ 65.1 "333,333","fish","67.82" "98,765","animal","26.5" "216,017","lion","5.74" "60,580","cat","31.07" "43,604","river","25.94" '90,742','lamp','0.45' '23,809','teacup','7.23' '3,582','dish','80.72' '5,600','stove','59.35' '4,65','soap','23.84' 9,001|violin|28.03 5,345|guitar|4.52 |4,890|goldfish|135.45| |2,8760|mountain|79.43| |5,032|radio|17.03| </pre> <div> <button id="button1">成型する</button> </div> <textarea id="output" cols=60 rows=30></textarea> <script> //例 button1.onclick = function(){ // step.1 データから、分割子を除いた単語として配列に格納 // step.2 エラーデータは「****」に変換 // step.3 分割子を指定してテキストエリアに出力 }; </script> くわしい方のお力添えをお待ちしております。

特定の日付に対して、画面の表示がなされるようにしたいです。 例えば、10月12日、11月3日、11月24日に実際になったときにだけ、画面に表示されるようにして、それ以外の日は、 画面上に表示されないというのは可能ですか。 以下を参考にしています。 http://r113.web.fc2.com/p/viewer/jrw-hokuriku-20150314/index.html 以下のjavascriptの文章を試しましたが、全然うまくいきませんでした。 僕は天才じゃないため、断片的な情報から組み合わせて、 一つのものを作り上げる能力はありません。 ですので、断片的な情報ではなく、 全部書いてくださるとありがたいです。 //ダイヤタイプの定義 const diagram = { WeekDay: 1, //平日ダイヤ Holiday: 2, //休日ダイヤ A: 3, //Aダイヤ B: 4, //Bダイヤ C: 5, //Cダイヤ } //ダイヤを判定する function dayJudge(year, month, date, day) { //フラグ（初期値：平日ダイヤ） var diagramFlag = diagram.WeekDay; //土日判定 if(day == 0 || day == 6) { diagramFlag = diagram.Holiday; } //特別な日 if((month == 10 && date == 12)||(month == 11 && date == 3)||(month == 11 && date == 24)) { diagramFlag = diagram.A; } else if(month == 5 && date == 25) { diagramFlag = diagram.B; } else if(month == 5 && date == 30) { diagramFlag = diagram.C; } return diagramFlag; }

if関数で、aまたはbまたはcという選択できますか。 ver num=1; if(x=1||x=3||x=5){ console.log("true"); } else{ console.log("folse"); }。 といった書き方はできませんか。 //ダイヤタイプの定義 const diagram = { WeekDay: 1, //平日ダイヤ Holiday: 2, //休日ダイヤ A: 3, //Aダイヤ B: 4, //Bダイヤ C: 5, //Cダイヤ } //ダイヤを判定する function dayJudge(year, month, date, day) { //フラグ（初期値：平日ダイヤ） var diagramFlag = diagram.WeekDay; //土日判定 if(day == 0 || day == 6) { diagramFlag = diagram.Holiday; } //特別な日 if((month == 10 && date == 12)||(month == 11 && date == 3)||(month == 11 && date == 24)) { diagramFlag = diagram.A; } else if(month == 5 && date == 25) { diagramFlag = diagram.B; } else if(month == 5 && date == 30) { diagramFlag = diagram.C; } return diagramFlag; } ができなくて困っています。

<h1>JS 分割子が混在したデータを成型するには</h1> <pre> さまざまな分割子が混在したデータがあります。 これを１つの分割子に統一するには どんなコードでできますか？ replaceメソッドを用いたら 芋ずる式のようになってしまい、coolじゃない（？） 【仕様】 [分割子] ・二重引用符 ・一重引用符 ・タブ区切り　　・・・ 単語と単語の間 ・半角空白　　　　　　 同上 ・パイプ（縦棒）・・・ 行頭と末尾に有る、無いの２ケース [データ型式] １列目：３桁カンマ区切り ２列目：文字データ ３列目：整数・小数（負数を含む） [備考] 空白行は詰めて作表する </pre> <pre id="data"> 1,234 あさがお 23.45 7,904 みかん 0.92 5,021 うさぎ 5.63 8,753 えんどう 1.724 2,657 いちご 10.87 9,841 ひまわり 77.33 432 ベニバナ 4.09 7,123 メロン 98.14 432 しらゆり 4.09 6,722 ナツメグ 65.1 "333,333","fish","67.82" "98,765","animal","26.5" "216,017","lion","5.74" "60,580","cat","31.07" "43,604","river","25.94" '90,742','lamp','0.45' '23,809','teacup','7.23' '3,582','dish','80.72' '5,600','stove','59.35' '4,65','soap','23.84' 9,001|violin|28.03 5,345|guitar|4.52 |4,890|goldfish|135.45| |2,8760|mountain|79.43| |5,032|radio|17.03| </pre> <div> <button id="button1">成型する</button> </div> <textarea id="output" cols=60 rows=30> </textarea> <script> //例 二重引用符で統一する let format ='"'; button1.onclick = function(){ // ？？？ }; </script> 正規表現にくわしい方のお力添えをお待ちしております。

列車走行位置で、フラグによる分岐から、enum分岐のint文にしたいです。 以下のプログラムを参考にして作っています。 http://r113.web.fc2.com/p/viewer/jrw-hokuriku-20150314/index.html 以下はjsの文章ですが、 //平日ダイヤか土・休日ダイヤかを判定する function dayJudge(year, month, date, day) { //alert(year +" "+ month +" "+ date +" "+ day) //フラグ var weekdayFlag = true; //月〜金なら立てる if(day >= 1 && day <= 5) weekdayFlag = true; else weekdayFlag = false; //祝日ならたおす if(year == 2013 && month == 1 && date == 1) weekdayFlag = false; else if(year == 2013 && month == 10 && date == 14) weekdayFlag = false; else if(year == 2013 && month == 11 && date == 4) weekdayFlag = false; else if(year == 2013 && month == 12 && date == 23) weekdayFlag = false; else if(year == 2014 && month == 1 && date == 1) weekdayFlag = false; return weekdayFlag; } 僕が具体的に行ったのは、フラグを3つ以上に分けることでした。 しかし、フラグを分けても、ことは解決しかなったです。 フラグというのはBoolean型の一種で、 真偽値を返すものであって、 AorBにしかならないのです。 以下はjavaにおけるbooleanの説明ですが、 javascriptでも同じことがいえると思います。 https://www.sejuku.net/blog/41241 そこで、抜本的な解決策として、enum型のint文があるのを知りました。 https://qiita.com/BMJr/items/5ec834e6513fe5f0ad87 上記のenum型のint文にして、先ほどのjavasc 僕には天才ではないため、 断片的な情報から、一つの情報をあびきだすのはできないです。 どうか、ご教授願えたら幸いです。 フラグだと、1個フラグを作って終わりです。 理由はonかoffのどちらかしかないからです。 実際、土日以外の切り替えの構文を書こうとすると知識がないせいか、切り替えボタンの切り替えができなかったり、真っ白になったりしました。 一方、enum型やそれに付随するint文に注目する理由は、 選択肢が3つ以上あるときにも使えるということです。 例えば、1月1日にはAダイヤ、1月2日にはBダイヤ、1月3日にはCダイヤに切り替わるようなプログラムにしたいのです。 jrの特急列車だと、土日ダイヤのほかに特定の日付だけ運転する多客期とかってのがありますから、それを実現したいのです。 全文書いてもらわないと困ります。 これが答えられないと、日本のプログラマーは世界に立ち遅れてもしょうがないと思います。😡

列車走行位置で、フラグによる分岐から、enum分岐のint文にしたいです。 以下のプログラムを参考にして作っています。 http://r113.web.fc2.com/p/viewer/jrw-hokuriku-20150314/index.html 以下はjsの文章ですが、 //平日ダイヤか土・休日ダイヤかを判定する function dayJudge(year, month, date, day) { //alert(year +" "+ month +" "+ date +" "+ day) //フラグ var weekdayFlag = true; //月〜金なら立てる if(day >= 1 && day <= 5) weekdayFlag = true; else weekdayFlag = false; //祝日ならたおす if(year == 2013 && month == 1 && date == 1) weekdayFlag = false; else if(year == 2013 && month == 10 && date == 14) weekdayFlag = false; else if(year == 2013 && month == 11 && date == 4) weekdayFlag = false; else if(year == 2013 && month == 12 && date == 23) weekdayFlag = false; else if(year == 2014 && month == 1 && date == 1) weekdayFlag = false; return weekdayFlag; } 僕が具体的に行ったのは、フラグを3つ以上に分けることでした。 しかし、フラグを分けても、ことは解決しかなったです。 フラグというのはBoolean型の一種で、 真偽値を返すものであって、 AorBにしかならないのです。 以下はjavaにおけるbooleanの説明ですが、 javascriptでも同じことがいえると思います。 https://www.sejuku.net/blog/41241 そこで、抜本的な解決策として、enum型のint文があるのを知りました。 https://qiita.com/BMJr/items/5ec834e6513fe5f0ad87 上記のenum型のint文にして、先ほどのjavascriptの文章を書き直すことって可能でしょうか。 僕には天才ではないため、 断片的な情報から、一つの情報をあびきだすのはできないです。 どうか、ご教授願えたら幸いです。

前回はiframeからの情報で親ページに作表するように 検討しました。（https://okwave.jp/qa/q10136205.html） しかし、セキュリティ上の制限でできないようだと判断して 諦めました。（できる方は是非ご教示願います） 今回は、エクスプローラーで ファイルＡＰＩ（Drag&Drop）を用いて作表することを 検討しています。 できるだけシンプルなコードでは、どうなりますか？ スキルをお持ちの方のお力添えをお願い申し上げます。 （HTML素材は、前回のものをお使いいただけます）

今、インラインフレームにデータを読み込んで作表するサンプルを作成中です。 インラインフレームには select() メソッドが使えないために 手作業でテキストエリアに copy&pasteしている状態です。 この手作業から解放されたいのですが、どういうコードでできますか？ スキルある方のお力添えをお待ちしております。 【親ページ】parent.html <body> <div>parent.html 親ページです.</div> <style> body { background: lavender; } .wrap { list-style-type: none; display: flex; width: 640px; padding: 1.5em; background: lightgreen; border-radius: 10px; } form > div { margin-top: 1em; font-weight: bold; } label { display: block; } pre b { color: red; } #iframe3 { width: 300px; height: 160px; background: #eee; } #textArea { margin-left: 10px; width: 300px; height: 160px; } </style> <pre> 【テーマ】子ページ内のデータで作表する ＜条件＞ ・子ページの情報で親ページに作表する ・ローカル環境（当然 Ajax(XMLHttpRequest)は対象外、new FileReader不使用） ・ファイルは、親子とも同じ場所 ・現在は、<b>読込ファイル選択 ▶ IFRAMEをCTRL+C ▶ TEXTAREAでCTRL+V ▶ 作表ボタン押下 ▶ 作表</b> 　理想は、手作業を省略して、<b>読込ファイル選択 ▶ 作表</b> </pre> <ul class="wrap"> <li>(1)［IFRAME］（理想は非表示に） <iframe id="iframe3" src="./20230515-child.tsv" title="子ページ"> </iframe> </li> <li>　(2)［TEXTAREA］（理想は非表示に） <textarea id="textArea" placeholder="貼付場所"></textarea> </li> </ul> <form name="form1"> <div>読込データファイルの選択</div> <label><input name="cbox" type="radio" value="0" checked> １.TSVファイル (タブ区切り .tsv)</label> <label><input name="cbox" type="radio" value="1"> ２.HTMLファイル</label> </form> <p> <button id="button1">作表</button> <table id="listTable"></table> </p> <script> (function () { //エレメント const iframe = document.getElementById('iframe3'); const table = document.getElementById('listTable'); const textArea = document.getElementById('textArea'); const button1 = document.getElementById('button1'); //読み込みファイルの選択 document.form1.onchange = function(event) { let n = event.target.value; iframe.src = "./child." + ["tsv","html"][n]; } //作表処理 button1.onclick = function (){ // 値を全選択してコピー (※使用不可能) // iframe.select(); // var result = document.execCommand("copy"); //------------------------------------------------------------- // 整形 文字データの配列化 作表 // (略) //------------------------------------------------------------- }; })(); </script> </body> 【子ページ１】child.tsv 番号 名称 半径 衛星個数 1 水星 2,439 0 2 金星 6,051 0 3 地球 6,378 1 4 火星 3,396 2 5 木星 71,492 95 6 土星 60,268 104 7 天王星 25,559 27 8 海王星 24,764 14 9 冥王星 1,188 5 【子ページ２】child.html <pre> 番号 名称 半径 衛星個数 1 水星 2,439 0 2 金星 6,051 0 3 地球 6,378 1 4 火星 3,396 2 5 木星 71,492 95 6 土星 60,268 104 7 天王星 25,559 27 8 海王星 24,764 14 9 冥王星 1,188 5 </pre>

このSpck EditorってjavascriptのDOM操作できますか？ どこのサイトを見ても書いてません。 これとは違うのですが追加で、 ＤＯＭ操作ができるアンドロイドアプリもあれば教えてください。

インラインフレームを用いたサンプルを作っています。 親から子へ指示を送ったら、子がそれに応じるというものです。 ローカル環境でエラーを出さずに実現するには postMessageで、どんなコードになりますか？ 【親ページ】parent.html <body style="background:bisque"> <div>parent.html 親ページです.</div> <pre> 【テーマ】親ページから子ページ内の操作をする ＜条件＞ ・ローカル環境 ・親子とも同じ場所 ・親の指示で子が応じる </pre> <iframe id="iframe2" width="500" height="160" src="./child.html"> </iframe> <div>親からの指示内容</div> <div><button onclick="func1()">書き換え１</button> 「囲まれています」を「囲まれました」に書き換える</div> <div><button onclick="func2()">書き換え２</button> 「-----」を「親から伝言あり」に書き換える</div> <script> //子に指示する関数 function func1(){ } function func2(){ } </script> </body> 【子ページ】child.html <body style="background:#eee"> <div>child.html 子ページです.</div> <p> <span id="test">ここは「id属性がtest」のspan要素に囲まれています。</span> <div id="result">output:<span>-----</span></div> </p> <script> //子が応じる関数 </script> </body>

JavaScriptのコーディング上、 ステートメントの末尾に半角空白は何故あるのか？ 書籍では、そのような記述は見たことがありません。 あるWEｂの技術解説ページには、下記のように書かれています。 例（□：半角空白） // 絶対指定 scrollTo( 0, 100 )□; // 相対指定 scrollBy( 0, 100 )□ ; この半角空白に関して、 １なぜ入っているのか？　（ＯＳ，エディターのせい？） ２それがあるメリットは何か？　（無いほうが見慣れている） くわしい方に ご教示いただけましたら幸いです。

JavaScript iframeに追記はできますか？ タイトルのとおりです。 インラインフレームのページと インラインフレーム内のページは 同じ場所にあって、ローカル環境です。 要は、１つのiframe内に２つのファイルを入れられるか？ ・HTMLファイルを１つ追加する ・ＪＳファイルを１つ追加する くわしい情報をご存じの方、ご教示お願い致します。