JavaScript

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ファイルを１つ追加する ・ＪＳファイルを１つ追加する くわしい情報をご存じの方、ご教示お願い致します。

div要素でも並び替えがしたいです。 <div class="table"> <div class="row"> <div class="cell">内容1</div> <div class="cell">内容2</div> <div class="cell">内容3</div> </div> <div class="row"> <div class="cell">内容4</div> <div class="cell">内容5</div> <div class="cell">内容6</div> </div> </div> <style> #sort_table { border-collapse:collapse; } #sort_table td { border:1px solid lightgray; } #sort_table th { cursor:pointer; background-color:lightgray; } </style> 以上でもテーブルは作れます。しかし、これでは、並び替えができません。 https://blog.ver001.com/javascript-table-sort/ なぜなら通常はテーブル要素で書くからです。 しかしテーブルには弱点があり、<td>や<th>にしか、divや、pといったタグを置くことができません。 しかし、これだと、セルを変えることができません。 先ほどいただいた <script> function viewChange(){[Box1,Box2,Box3].forEach((a,b)=>a.style.display=sample.selectedIndex==b?'':'none')} window.onload = viewChange; </script> というご回答だと、1つのテーブルしか表示が不可能です。 これがdivだと何個も表示ができますが、いかんせん並び替えができないのです。 jsだけで、プログラムのインストールなし、オフラインでかつ、ごちゃごちゃしたjqueryも使わないというのは贅沢な願望でしょうか。 後僕は天才ではないので、断片的な情報から組み合わせて１つのものを完成させる能力はないです。 お願いです。力をお貸しください。

style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById(&#039;Box1&#039;).style.display = "";と、 document.getElementById(&#039;Box1&#039;).style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById(&#039;sample&#039;)){ id = document.getElementById(&#039;sample&#039;).value; if(id == &#039;select1&#039;){ document.getElementById(&#039;Box1&#039;).style.display = ""; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = "none"; }else if(id == &#039;select2&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = ""; document.getElementById(&#039;Box3&#039;).style.display = "none"; } else if(id == &#039;select3&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。

style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

cssのみでドロップダウン選択で表示切替は無理ですよね。 ドロップダウンじゃなかったら、表示切替ができました。 <input type="checkbox" id="toggle1"></input> <div class="toggle-outer"> <label for="toggle1">クリックして開く▼</label> </div> <div class="toggle-inner"> <p> 長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章 </p> </div> <style> #toggle1 { /* display: none; */ visibility: hidden; opacity: 0; transition: 2s; } .toggle-inner { /* display: none; */ transition: 1s; visibility: hidden; opacity: 0; } #toggle1:checked ~ .toggle-inner { /* display: block; */ visibility: visible; opacity: 1; transition: 1s; } </style>

テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。 //本文 <table id="sort_table"> <tr> <th>No</th> <th>全角項目</th> <th>数値項目</th> <th>カンマ</th> </tr> <tr><td>1</td><td>かきくけこ</td><td>1</td><td>1,000</td></tr> <tr><td>2</td><td>さしすせそ</td><td>10</td><td>10,000</td></tr> <tr><td>3</td><td>あいうえお</td><td>100</td><td>2,000</td></tr> <tr><td>4</td><td>カキクケコ</td><td>2001</td><td>3,000</td></tr> <tr><td>5</td><td>アイウエオ</td><td>2002</td><td>20,000</td></tr> <tr><td>6</td><td>サシスセソ</td><td>2003</td><td>11,000</td></tr> <tr><td>7</td><td>一丁目</td><td>1.234</td><td>12,000</td></tr> <tr><td>8</td><td>二丁目</td><td>12.34</td><td>30,000</td></tr> <tr><td>9</td><td>三丁目</td><td>123.4</td><td>31,000</td></tr> <tr><td>10</td><td>１丁目</td><td>0.001</td><td>32,000</td></tr> <tr><td>11</td><td>２丁目</td><td>0.002</td><td>400,000</td></tr> <tr><td>12</td><td>３丁目</td><td>0.003</td><td>50</td></tr> </table> <style> #sort_table { border-collapse:collapse; } #sort_table td { border:1px solid lightgray; } #sort_table th { cursor:pointer; background-color:lightgray; } </style> //javascript <script> window.addEventListener('load', function () { let column_no = 0; //今回クリックされた列番号 let column_no_prev = 0; //前回クリックされた列番号 document.querySelectorAll('#sort_table th').forEach(elm => { elm.onclick = function () { column_no = this.cellIndex; //クリックされた列番号 let table = this.parentNode.parentNode.parentNode; let sortType = 0; //0:数値 1:文字 let sortArray = new Array; //クリックした列のデータを全て格納する配列 for (let r = 1; r < table.rows.length; r++) { //行番号と値を配列に格納 let column = new Object; column.row = table.rows[r]; column.value = table.rows[r].cells[column_no].textContent; sortArray.push(column); //数値判定 if (isNaN(Number(column.value))) { sortType = 1; //値が数値変換できなかった場合は文字列ソート } } if (sortType == 0) { //数値ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareNumberDesc); } else { sortArray.sort(compareNumber); } } else { //文字列ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareStringDesc); } else { sortArray.sort(compareString); } } //ソート後のTRオブジェクトを順番にtbodyへ追加（移動） let tbody = this.parentNode.parentNode; for (let i = 0; i < sortArray.length; i++) { tbody.appendChild(sortArray[i].row); } //昇順／降順ソート切り替えのために列番号を保存 if (column_no_prev == column_no) { column_no_prev = -1; //降順ソート } else { column_no_prev = column_no; } }; }); }); //数値ソート（昇順） function compareNumber(a, b) { return a.value - b.value; } //数値ソート（降順） function compareNumberDesc(a, b) { return b.value - a.value; } //文字列ソート（昇順） function compareString(a, b) { if (a.value < b.value) { return -1; } else { return 1; } return 0; } //文字列ソート（降順） function compareStringDesc(a, b) { if (a.value > b.value) { return -1; } else { return 1; } return 0; } </script> let、var、constはfunctionの中で使うと、ローカル変数となってしまいます。 グローバル変数にするにはどのようにしたらよいのでしょうか。 しかし、let table、let tbodyに対応する関数がございません。 もう八方塞がりです。 jsの部分のみご記述ください。

jsのドロップダウンの取得方法についてお教えください。 必ず、valueを記述しないと、選択したドロップダウンのリストを表示させることができない仕組みになっているのでしょうか。 個人的には、getEventListenersとか、innnerHTMLとかいう形で、 alertでも、外部ページにリンクでも、console.logという形でもなくて、表面に出したいです。 また、ちなみに、２つ以上のドロップダウンリストを使うと、初めて、指定できるようなシステムを作りたいです。 後、formは崩したくないです。 そんな贅沢は実現不可能でしょうか。 <form name="nankai_f"> 出発駅は <select name="nankai_q1"> <option>選択肢</option> <option id="hoge">難波</option> <option>新今宮</option> <option>天下茶屋</option> <option>堺東</option> </select> です。 <p> 到着駅は <select name="nankai_q2"> <option>選択肢</option> <option>難波</option> <option>新今宮</option> <option>天下茶屋</option> <option>堺東</option> です。<p> 無理なら無理とはっきり言ってくださいね。

以前こちらで質問をして retorofan さんに追加のscriptを詳しく教えていただき、実際の表示もほぼうまくいったのですが、選択ごとに表示位置が変わってしまってうまくいきません。inlineの部分をblockにしてだいぶ良くなったのですが、それでもまだ一定位置に出てくれません。どこを修正すれば一定位置に画像を出せるのでしょうか？ <form> <div class="pulldownset vegetable"> <select id="cate" class="subbox" > <option value="">年</option> <option value="ha">2023年</option> <option value="ne">2024年</option> </select> <select id="ha" class="subbox2"> <option value="">月</option> <option value="ha1">1月</option> <option value="ha2">2月</option> <option value="ha3">3月</option> </select> <select id="ne" class="subbox2"> <option value="">月を選択</option> <option value="ne1">1月</option> <option value="ne2">2月</option> <option value="ne3">3月</option> </select> </div> </form> <!-- 画像1 --> <div id="ha1" class="subbox3"><img src="2023−1.jpg" width="130" height="37" alt=""/></div>　 <div id="ha2" class="subbox3"><img src="2023−2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3.jpg" width="130" height="37" alt=""/></div>　 <div id="ne1" class="subbox3"><img src="2024−1.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne2" class="subbox3"><img src="2024−2.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne3" class="subbox3"><img src="2024−3.jpg" width="130" height="37" alt=""/></div>　　 <!-- 画像2 --> <div id="ha1" class="subbox3"><img src="2023−1-2.jpg" width="130" height="37" alt=""/></div>　 <div id="ha2" class="subbox3"><img src="2023−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-2.jpg" width="130" height="37" alt=""/></div>　 <div id="ne1" class="subbox3"><img src="2024−1-2.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne2" class="subbox3"><img src="2024−2-2.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne3" class="subbox3"><img src="2024−3-2.jpg" width="130" height="37" alt=""/></div>　　 <!-- 画像3 --> <div id="ha1" class="subbox3"><img src="2023−1-3.jpg" width="130" height="37" alt=""/></div>　 <div id="ha2" class="subbox3"><img src="2023−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-3.jpg" width="130" height="37" alt=""/></div>　 <div id="ne1" class="subbox3"><img src="2024−1-3.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne2" class="subbox3"><img src="2024−2-3.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne3" class="subbox3"><img src="2024−3-3.jpg" width="130" height="37" alt=""/></div>　　 <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll(".subbox2,.subbox3").forEach(x=>{ x.style.display ="none"; }); document.querySelector("#cate").addEventListener('change',e=>{ document.querySelectorAll(".subbox2").forEach(x=>{ x.value=""; x.style.display =x.getAttribute("id")===e.target.value?"inline":"none"; }); document.querySelectorAll(".subbox3").forEach(x=>{ x.style.display ="none"; }); }); document.querySelectorAll(".subbox2").forEach(x=>{ x.addEventListener('change',e=>{ document.querySelectorAll(".subbox3").forEach(y=>{ y.style.display =y.getAttribute("id")===e.target.value?"inline":"none"; }); }); }); }); </script> <script> //------------------------------------------------------------------------------ // 初期画面の表示内容 //「年」「月」画像1（2023−1.jpg）、画像2（2023−1-2.jpg）、画像3（2023−1-3.jpg） //------------------------------------------------------------------------------ window.addEventListener('DOMContentLoaded', ()=>{ // 追加 2023-04-21 22:40 //---------------------------------------------------------- const cate = document.getElementById("cate"); const ha = document.getElementById("ha"); const subbox3 = document.querySelectorAll(".subbox3"); ha.style.display =""; cate.options[0].selected = true; ha.options[0].selected = true; [...subbox3].forEach(function(elem, index){ if (index % 6 == 0){ elem.style.display="inline-block"; //横並び //elem.style.display="block"; //縦並び } }); //---------------------------------------------------------- });

コニク（conic）で円グラフがつくれますか？ ここにいうコニク（conic）とは、 CSS の「conic-gradient() 関数」のことです。 単色なら簡単に作れます。 さて、添付図のような多色の円グラフは どんなコードで作れますか？

Canvasで方眼（紙）を描きました。（添付画像） これと同じように、Canvasを用いないで JavaScriptだけで方眼（紙）を描けますか？ できるなら、図と同じに描けるコードはどうなりますか？ 詳しい方のご教示、よろしくお願いいたします。

function ToHebon(){var map={"あ":"a","い":"i","う":"u","え":"e","お":"o", "か":"ka","き":"ki","く":"ku","け":"ke","こ":"ko", "さ":"sa","し":"shi","す":"su","せ":"se","そ":"so", "た":"ta","ち":"chi","つ":"tsu","て":"te","と":"to", "な":"na","に":"ni","ぬ":"nu","ね":"ne","の":"no", "は":"ha","ひ":"hi","ふ":"fu","へ":"he","ほ":"ho", "ま":"ma","み":"mi","む":"mu","め":"me","も":"mo", "や":"ya","ゆ":"yu","よ":"yo", "ら":"ra","り":"ri","る":"ru","れ":"re","ろ":"ro", "わ":"wa","ゐ":"i","ゑ":"e","を":"o","ん":"n", "ぁ":"a","ぃ":"i","ぅ":"u","ぇ":"e","ぉ":"o", "が":"ga","ぎ":"gi","ぐ":"gu","げ":"ge","ご":"go", "ざ":"za","じ":"ji","ず":"zu","ぜ":"ze","ぞ":"zo", "だ":"da","ぢ":"ji","づ":"zu","で":"de","ど":"do", "ば":"ba","び":"bi","ぶ":"bu","べ":"be","ぼ":"bo", "ぱ":"pa","ぴ":"pi","ぷ":"pu","ぺ":"pe","ぽ":"po", "きゃ":"kya","きゅ":"kyu","きょ":"kyo", "しゃ":"sha","しゅ":"shu","しょ":"sho", "ちゃ":"cha","ちゅ":"chu","ちょ":"cho","ちぇ":"che", "にゃ":"nya","にゅ":"nyu","にょ":"nyo", "ひゃ":"hya","ひゅ":"hyu","ひょ":"hyo", "みゃ":"mya","みゅ":"myu","みょ":"myo", "りゃ":"rya","りゅ":"ryu","りょ":"ryo", "ぎゃ":"gya","ぎゅ":"gyu","ぎょ":"gyo", "じゃ":"ja","じゅ":"ju","じょ":"jo", "びゃ":"bya","びゅ":"byu","びょ":"byo", "ぴゃ":"pya","ぴゅ":"pyu","ぴょ":"pyo", "ア":"a","イ":"i","ウ":"u","エ":"e","オ":"o", "カ":"ka","キ":"ki","ク":"ku","ケ":"ke","コ":"ko", "サ":"sa","シ":"shi","ス":"su","セ":"se","ソ":"so", "タ":"ta","チ":"chi","ツ":"tsu","テ":"te","ト":"to", "ナ":"na","ニ":"ni","ヌ":"nu","ネ":"ne","ノ":"no", "ハ":"ha","ヒ":"hi","フ":"fu","ヘ":"he","ホ":"ho", "マ":"ma","ミ":"mi","ム":"mu","メ":"me","モ":"mo", "ヤ":"ya","ユ":"yu","ヨ":"yo", "ラ":"ra","リ":"ri","ル":"ru","レ":"re","ロ":"ro", "ワ":"wa","ヰ":"i","ヱ":"e","ヲ":"o","ン":"n", "ァ":"a","ィ":"i","ゥ":"u","ェ":"e","ォ":"o", "ガ":"ga","ギ":"gi","グ":"gu","ゲ":"ge","ゴ":"go", "ザ":"za","ジ":"ji","ズ":"zu","ゼ":"ze","ゾ":"zo", "ダ":"da","ヂ":"ji","ヅ":"zu","デ":"de","ド":"do", "バ":"ba","ビ":"bi","ブ":"bu","ベ":"be","ボ":"bo", "パ":"pa","ピ":"pi","プ":"pu","ペ":"pe","ポ":"po", "キャ":"kya","キュ":"kyu","キョ":"kyo", "シャ":"sha","シュ":"shu","ショ":"sho", "チャ":"cha","チュ":"chu","チョ":"cho", "ニャ":"nya","ニュ":"nyu","ニョ":"nyo", "ヒャ":"hya","ヒュ":"hyu","ヒョ":"hyo", "ミャ":"mya","ミュ":"myu","ミョ":"myo", "リャ":"rya","リュ":"ryu","リョ":"ryo", "ギャ":"gya","ギュ":"gyu","ギョ":"gyo", "ジャ":"ja","ジュ":"ju","ジョ":"jo", "ビャ":"bya","ビュ":"byu","ビョ":"byo", "ピャ":"pya","ピュ":"pyu","ピョ":"pyo", "ジェ":"jie", "チェ":"chie", "ティ":"tei","ディ":"dei","デュ":"deyu", "ファ":"fua","フィ":"fui","フェ":"fue","フォ":"fuo", "ヴァ":"bua","ヴィ":"bui","ヴ":"bu","ヴェ":"bue","ヴォ":"buo","ー":""}; var temp_data="";var temp_data2="";var temp_data3="";var temp_data4="";var temp_data5="";var temp_data6="";var roma_data="";var result_data="";source_data=document.form1.input_text.value;for(i=0;i<source_data.length;i=i+1){temp_data=source_data.substring(i,i+1);temp_data2=source_data.substring(i,i+2);if(map[temp_data2]===undefined){if(map[temp_data]===undefined){roma_data=roma_data+temp_data}else{roma_data=roma_data+map[temp_data]}}else{i=i+1;roma_data=roma_data+map[temp_data2]}} for(i=0;i<roma_data.length;i=i+1){ temp_data=roma_data.substring(i,i+1); temp_data2=roma_data.substring(i,i+2); temp_data3=roma_data.substring(i,i+3); temp_data4=roma_data.substring(i,i+4); temp_data5=roma_data.substring(i,i+5); temp_data6=roma_data.substring(i,i+6); sub_str2=temp_data2.substring(1,2); if(temp_data4=="noue"){i=i+3;temp_data="noue"} else if(temp_data6=="touchi"){i=i+5;temp_data="touchi"} else{if(temp_data2=="uu"||temp_data2=="ee"||temp_data2=="ou"||temp_data2=="oo"){i=i+1} else if(temp_data2=="nb"||temp_data2=="nm"||temp_data2=="np"){temp_data="m"} else if(temp_data=="っ"||temp_data=="ッ"){if(temp_data3=="っch"||temp_data3=="ッch"){temp_data="t"} else if(sub_str2.match(/[a-z]/gi)){temp_data=sub_str2}else{temp_data="tsu"}}}result_data=result_data+temp_data} if(document.form1.uplow[0].checked){result_data=result_data.toUpperCase()}document.form1.result_text.value=result_data} 現在の状況は、既にカタカナで設定してある文字、例えば、ポケモンはすでにポがpo、ケがkeと、サトシであれば、サがsa、トがtoと指定されているため、 新たにこの場合、例えば、ポケモンの時だけ、pkmnだとか、 サトシをstsという風にすることができません。 このような例外処置をする場合、どのようにすればよろしいでしょうか。 尚、else ifからかっことじの部分までは書いていただきたいです。