JavaScript

オセロを作成しています。 盤面の上にaからhも文字を表示して盤面の左に１から８の文字を表示させたいのですが、どうもうまくいきません。どうすればよいでしょうか。 Javascript // ボードの上に a から h までの文字を表示する const letters = document.createElement("div"); letters.classList.add("letters"); for (let i = 0; i < 8; i++) { const letter = document.createElement("div"); letter.classList.add("letter"); letter.textContent = String.fromCharCode(97 + i); letters.appendChild(letter); } // ボードの左に 1 から 8 までの数字を表示する const numbers = document.createElement("div"); numbers.classList.add("numbers"); for (let i = 1; i <= 8; i++) { const number = document.createElement("div"); number.classList.add("number"); number.textContent = i; numbers.appendChild(number); } board.appendChild(numbers); // 盤面を作成 for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { const cell = document.createElement("div"); cell.classList.add("cell"); cell.setAttribute("data-row", row); cell.setAttribute("data-col", col); board.appendChild(cell); cells[`${row}-${col}`] = cell; } board.appendChild(letters); } css .letters { display: flex; justify-content: space-between; margin-bottom: 8px; } .letter { width: 12.5%; text-align: center; } .numbers { display: flex; flex-direction: column; justify-content: space-between; margin-right: 8px; } .number { height: 12.5%; text-align: center; }

eval() 関数の代替関数を教えてください。 ［現在］ var x = 5; var y = eval('x + 3'); // eval() 関数 console.log("y=", y); // 8 ［代替］ var x = 5; var y = □□□□□□□□□□ // 代替関数 console.log("y=", y); // 8

度々すみません。以下のようにセレクトボックスを２段階、「年」「月」を選択後に画像を３つ出力するコードでほぼ出来上がっているのですが、初期に画像を出しておきたいので、表示としては 「年」「月」画像1（2023−1.jpg）、画像2（2023−1-2.jpg）、画像3（2023−1-3.jpg）が初期画面で出るようにしたいのです。 詳しい方がいらっしゃいましたら、教えていただければ嬉しいです。よろしくお願いいたします。 <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> window.addEventListener('DOMContentLoaded', ()=>{ // 追加 2023-04-21 11:05 //---------------------------------------------------------- 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; let v = cate.options[1].text+"-"+ ha.options[1].text; [...subbox3].forEach(function(elem){ if (elem.textContent==v){elem.style.display="block"} }); //---------------------------------------------------------- }); </script>

セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを２段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <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" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <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>

セレクトボックスを２段階選択後にテキストを出力する以下のコードがあるのですが、現状では１段階のセレクトボックスを選択しないと２段階目のボックスが出て来ません。 これを最初から２段階目のボックスを表示して、出力するテキストもデフォルトのもの（最上段のもの）を最初から出力したいのです。 詳しい方がいらっしゃいましたらご教示いただけると幸いです。よろしくお願いいたします。 <form> <div class="pulldownset vegetable"> <select id="cate" class="subbox" > <option value="">年</option> <option value="ha">2023</option> <option value="ka">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="ka" class="subbox2"> <option value="">月</option> <option value="ka1">1月</option> <option value="ka2">2月</option> <option value="ka3">3月</option> </select> </div> </form> <div id="ha1" class="subbox3">2023-1月</div> <div id="ha2" class="subbox3">2023-2月</div> <div id="ha3" class="subbox3">2023-3月</div> <div id="ka1" class="subbox3">2024-1月</div> <div id="ka2" class="subbox3">2024-2月</div> <div id="ka3" class="subbox3">2024-3月</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>

フラグから区分値に置換するにはどうすればいいですか。 以下はその例文です。 フラグでは、基本的に立てたり、倒したりするもので、 yesかnoの2通りしか分岐をさせることができません。 つまり、else ifが使えないということです。 一方区分値は複数の分岐をさせることができます。 なので、これにはelse ifが使えます。 それはいかに記述があります。 https://www.gixo.jp/blog/382/ そこで、以下の部分を区分値に置換するにはどのようにすればいいですか。 フラグから区分値に置換した事例を紹介してくれているサイトは皆無です。 以下は、そのコードです。 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; return weekdayFlag; }

先だってchart.js4.2でカラー設定をする方法(https://okwave.jp/qa/q10117946.html)で複数グラフを上1、下3できれいに配置する方法を教えてもらいました。そのコードに今まで2.9系で上下2個づつの配置表示したものを一つの画像にする下記のコードを加え試しましたが使えませんでした。 function imageDownload() { var chartWidth = 350; var chartHeight = 242; var imageType = "image/png" var imageFileName = "chart.png"; var bufferCanvas = document.createElement("canvas") bufferCanvas.width = chartWidth * 1.82; bufferCanvas.height = chartHeight * 2.2; bufferCanvas.style.display = "none"; document.body.appendChild(bufferCanvas); var ctx = bufferCanvas.getContext("2d"); // 背景色を設定（しない場合は透過） ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height); // グラフを貼り付け for (i = 1; i <= 4; i++) { ctx.drawImage( document.getElementById("myChart" + i), i % 2 == 1 ? 0 : chartWidth, i <= 2 ? 0 : chartHeight ); } var imageURL = bufferCanvas.toDataURL(imageType); そこで、スタイル設定のボックスを無くし下記のように配置するようにしました。 <div class="row" style="width:100%;" > <div class="chart1" style="position: relative; top: 0; right: 0; left: 0; margin:0;" >c <canvas id="myChart1" width="400px" height="230px"></canvas></div> <div class="chart2" style="position: absolute; top: 300px; right: 0; left: 0; margin:0;" > <canvas id="myChart2" width="210px" height="210px"></canvas></div> <div class="chart3" style="position: absolute; top: 300px; right: 0; left:215px; margin:0;"> <canvas id="myChart3" width="210px" height="210px"></canvas></div> <div class="chart4" style="position: absolute; top: 300px; right: 0; left:430px; margin:0;"> <canvas id="myChart4" width="210px" height="210px"></canvas></div> </div> しかしながらこの画像化コードでは上下に2個配置するようになっているため大きさの違う上のグラフと下の最初のグラフが左右に一部重なって描画される結果となりました。 そこで、任意の配置状態を保ったまま一つの画像とする方法をお教えください。

ボタン一つで、複数運賃の計算を一括で計算したいです。 以下は、htmlとjsの文章になります。 <script src="泉北 20220801 Mon\jsファイル 20220801 Mon\運賃 20220801 Mon.js"></script> <script src="大阪メトロ 20220803 Wed\jsファイル 20220801 Mon\運賃 20220801 Mon.js"></script> <style> textarea.hoge { width: 150px; height:200px;} </style> <body> <form name="semboku_f"> 出発駅は <select name="semboku_q1"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select> です。 <p> 到着駅は <select name="semboku_q2"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select> です。<p> <input type="button" name="b1" value="運賃検索" onclick="semboku_kotae()"> <p></input> <table border="1"> <tr><th>距離</th><th> <input name=semboku_tokuten size="6">km</input></th></tr> <tr><th>普通大人</th><th><input name=semboku_futsu_otona id="semboku_futsu_otona_2">円</input></th></tr> <tr><th>普通小児</th><th><input name=semboku_futsu_shoni id="semboku_futsu_kodomo_2">円</input></th></tr> </table> </form> <!--HTMLここまで--> <!--問題--> <br> <hr> <br> <!--阪和線--> <body> <form name="osakametro_f"> 出発駅は <select name="osakametro_q1"> <option>選択肢</option> <option>江坂</option> <option>梅田</option> <option>なんば</option> </select> です。 <p> 到着駅は <select name="osakametro_q2"> <option>選択肢</option> <option>江坂</option> <option>梅田</option> <option>なんば</option> <option>天王寺</option> </select> です。<p> <input type="button" name="b2" value="運賃検索" onclick="osakametro_kotae()"> <p></input> <table border="1"> <tr><th>距離</th><th> <input name=osakametro_tokuten size="6">km</input></th></tr> <tr><th>普通大人</th><th><input name=osakametro_futsu_otona id="osakametro_futsu_otona_2">円</input></th></tr> <tr><th>普通小児</th><th><input name=osakametro_futsu_shoni id="osakametro_futsu_kodomo_2">円</input></th></tr> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームに入力された数値の取得</title> </head> <body> <form> <button id="button">足す</button> </form> <table border="1"> <tr><th><label for="futsus_otona">普通大人: </label></th><th><input type="text" id="futsu_otona"></th></tr> <tr><th><label for="futsus_shoni">普通子供: </label></th><th><input type="text" id="futsu_shoni"></th></tr> <table> </body> <script> var button = document.getElementById("button"); var button = document.getElementById("button"); button.addEventListener("click", function(e) { e.preventDefault(); var semboku_futsu_otona_2 = document.getElementById("semboku_futsu_otona_2").value; var osakametro_futsu_otona_2 = document.getElementById("osakametro_futsu_otona_2").value; var sum = parseInt(semboku_futsu_otona_2, 10) + parseInt(osakametro_futsu_otona_2, 10); var futsu_otona = document.getElementById("futsu_otona"); futsu_otona.value = sum; }); </script> を、例えば、普通大人運賃と普通小児運賃の計算をボタン一つで計算する場合、どうしたらいいですか。 一つならできました。 尚、自分がわかっているのはイベントは一つのhtmlで同時使用できないため、for関数を使用するのと、buttonタブであれば、for (let i = 0; i < buttonElements.length; i++) { buttonElements[i].addEventListener('click', function () {}を使うことです。

今回、chart.jsの2系から4系に変更するにあたり下記の多重円のサンプルで以前から気になっていた系列を利用した凡例の■（以前は濃いグレー）を黒からそれぞれ任意の色に出来ないかと思い悩んでいましたが、米国のあるQ&Aサイトに載っていた方法（前に投稿しましたが削除済み）等試しましたがそこまでしなくても単にfontColorをreturn内で指定するだけで出来ました（下記コード）。 しかしこの方法でもボックス部分とテキストを含めた凡例全体の色が変わりました。今回はpinkで指定したところ、テキストの色がpinkでは見た目が鮮明とはいえません。やはり、テキストとボックス部分で別の色の出来ないかと思いまして、何か解決方法があればお教えください。 <script> const CHART_COLORS = {'赤': 'rgb(230,0,18)','プラム': 'rgb(221,160,221)','マゼンタ': 'rgb(228,0,127)','スカイブルー': 'rgb(160,216,239)','紫': 'rgb(146,7,131)','緑': 'rgb(0,153,68)','ゴールド': 'rgb(255, 215, 0)' }; const ctx = document.getElementById("myPieChart"); const myPieChart = new Chart(ctx, { type: 'pie', data: { labels: ['Jan','Feb','Mar','Apr','May','June'], // Ｘ軸のラベル datasets: [ { label: 'NY', data: [32, 59, 40, 42, 38, 25],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false}, { label: 'LA', data: [52, 45, 38, 28, 59, 40],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false}, { label: 'CHI', data: [65, 23, 48, 60, 62, 70],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false} ] }, options: { responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 plugins: { legend: { // 凡例 display: true, // 表示の有無 position: 'bottom', // 表示位置 labels: { generateLabels: function(chart) { return chart.data.datasets.map(function(datasets, i) { return { fontColor: 'pink', //凡例の色を指定 datasetIndex: i, text: datasets.label, fillStyle: datasets.backgroundColor, strokeStyle: datasets.borderColor, // 表示状態に連動して取り消し線表示 hidden: !chart.isDatasetVisible(i), }; }); } }, onClick: function(e, legendItem){ const index = legendItem.datasetIndex; const ci = this.chart; const meta = ci.getDatasetMeta(index); meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; ci.update(); } } } } }); </script> さらに欲を言えば「labels: ['Jan','Feb', 」等を使ったデフォルトの凡例も別位置に配置出来ないかと考えています。なお、デフォルト凡例と <button・・でで作った凡例の両方操作できる方法は、このサイトで以前(https://okwave.jp/qa/q9820330.html)教えてもらっています。 どうかよろしくお願いいたします。 また、同じような内容で投稿、削除を繰り返し行っていることお許しください。

先の質問「chart.js4.2でカラー設定をする方法 ・・https://okwave.jp/qa/q10117946.html」のコードで描画すると棒グラフが上半分くらいに圧縮されたようにしか描画されなかったのでそれを直すために datasets: datasets }, options: { maintainAspectRatio: false, plugins: { としていましたが、これを回答してもらったコードに加えると棒グラフの縦幅が大きくなりすぎ下のグラフと重なるような状態となりました。 デフォルトでは、 「リサイズしても、元のキャンバスの縦横比（幅／高さ）は維持されます。」 とあります。さらに縦横比（幅／高さ）に関し 「aspectRatio number 1|2 キャンバスの縦横比（すなわち、幅 / 高さ、値 1 は正方形のキャンバスを表す）。なお、このオプションは、高さが属性として、またはスタイルによって明示的に定義されている場合は無視されます。放射状チャート（ドーナツ、パイ、polarArea、レーダー）のデフォルト値は1、その他のチャートのデフォルト値は2です。 」 それで最初の棒グラフでは縦横比が1/2になっているためとなんとなくこの動きは理解できましたが、しかし後の方でもcssのスタイル設定で明示的に .container .chart1 { margin-bottom: 0; width: 400px; height: 350px; } としているのに「スタイルによって明示的に定義されている場合は無視されます」ありますが1/2のままです。そこでmaintainAspectRatio: falseを加えて初めてスタイル設定が有効になります。 2系に比べ4系は本家のサイトによる情報が主ですし英語は翻訳サイトを使うしか能がないため理解できないことがすこぶる多いのが現状ですので、宜しければ、適正なサイズの設定方法に関する明快で詳しい情報のご教授お願いいたします。

chromeのdeveloper toolでjavascriptを実行するテストをしたのですが <script>document.location='http://yahoo.co.jp'<script> エラーが返ってきて Uncaught SyntaxError: Unexpected token '<' 解らないのでどなたかご教示お願いします。 因みに仮想マシンのlinuxのdebian系のOSでやっています。

過去にこのサイトでchart.js2.9を使い複数グラフを表示する方法(https://okwave.jp/qa/q9834370.html)を教えてもらいましが、今回v.4.2にそれを適用するにあたりプラグインのカラー設定に代わる方法がないかと試行を繰り返し、素人のため無理筋の方法ですが下記のコードまで至りました。そこで、このお粗末なコードを適切なものに手直ししていただきたくお願い申し上げます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>multiグラフ</title> </head> <body> <div class="row" style="width: 100%;" > <div class="chart1" style="float: left;width:300px; height:250px" > <canvas id="myChart1"></canvas></div> <div class="chart2" style="float: right;width:300px; height:250px"> <canvas id="myChart2"></canvas></div> <div class="chart3" style="bottom: 0;float: left;width:300px; height:250px"> <canvas id="myChart3"></canvas></div> <div class="chart4" style="bottom: 0;float: right;width:300px; height:250px"> <canvas id="myChart4"></canvas></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script> <script> function displayChart(canvasId, chartType, datasets, options) { var ctx = document.getElementById(canvasId); var myPieChart = new Chart(ctx, { type: chartType, data: { labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], // Ｘ軸のラベル datasets: datasets }, options: { plugins: { //responsive: false, title: { display: options.title.length > 0, // タイトルがあれば表示 text: options.title }, legend: { // 凡例 display: true, // 表示の有無 position: options.legendPosition, // 表示位置 labels: { usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか } } } } }); } const color1 = ['red','green','skyblue']; const mycolor = ['rgb(221,160,221)','rgb(228,0,127)','rgb(160,216,239)','rgb(146,7,131)','rgb(0,153,68)','rgb(255, 215, 0)','rgb(0,158,150)']; const label1 = [ {label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000],backgroundColor:mycolor}, {label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000],backgroundColor:mycolor}, {label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000],backgroundColor:mycolor} ]; const datasets = [ {label: label1[0].label,data: label1[0].data,backgroundColor:color1[0]}, {label: label1[1].label,data: label1[1].data,backgroundColor:color1[1]}, {label: label1[2].label,data: label1[2].data,backgroundColor:color1[2]} ]; displayChart('myChart1', 'bar', datasets,{ title: '', usePointStyle: false, legendPosition: 'top', }); for (var i = 0; i < 3; i++) { displayChart("myChart".concat(i + 2), 'pie', [label1[i]], { title: label1[i].label, backgroundColor:mycolor, usePointStyle: true, legendPosition: 'left' }); } </script> </body> </html> 特にbackgroundColorの設定をoptionで設定出来ないかと思いましたが方法が分かりませんでしたのでこのようなコードをに成り果てました。 また、カラースキーム組み合わせは別の手段を使って作りコピペしているのですがこれも貧弱なものですので、使えるプラグインがあればご教授お願いいたします。

すみません、誤って同様の質問を締め切ってしまったので再投稿させていただきます。 https://gist.github.com/kawaz/72f61d8389fed0e9d4e7dc9eb01b39c8 setIntervalはブラウザのタブがバックグラウンドで動作しないとのことで動作させるためのサンプルコードが ないかと調べていたところ上記サイトを見つけました。 上記サイトでは下記のようなコードが記述されていたのですやっていることがわからなかったのですが どなたか解説して頂けないでしょうか。 大きく下記2点が不明です。 1. const code = `self.addEventListener('message', msg=>{setInterval(()=>self.postMessage(null), msg.data)})` の部分 setIntervalの第一引数に関数定義「()=>self.postMessage(null)」を渡し、第二引数にmsg.data を渡しています。 これはmessageイベントが発生したらsetIntervalで定期的にpostMessageでWorkerにメッセージ(msg.data)を送信する ということなのでしょうか？ そしてその処理をWorkerに渡して処理をバックグラウンドで動かすということをやっているのでしょうか？ そもそも'message'イベント(メッセージを受信？どこから？)っていつ起こるものなのでしょうか。 2. superIntervalに渡している引数 (使い方)にあるsuperInterval()に渡している引数がよくわからないです。 　第二引数で500を渡していながらsuperIntervalの第二引数はinterval=1000となってるし、 その他の引数についても何のためにどういう使い方をしているかわかりますでしょうか？ (superInterval.js) const superInterval = (cb, interval=1000, ...args) => { try { const code = `self.addEventListener('message', msg=>{setInterval(()=>self.postMessage(null), msg.data)})` const w = new Worker(`data:text/javascript;base64,${btoa(code)}`) w.onmessage = () => cb(...args) w.postMessage(interval) return {stop:()=>w.terminate()} } catch(_){ // 実装の問題またはCSPによる拒否などで Worker が使えなければ普通の setInterval を使う const id = setInterval(cb, interval, ...args) return {stop:()=>clearInterval(id)} } } (使い方) { const log = (...args) => console.log(...args) const {stop} = superInterval(log, 500, 1, {a:2}, [3]) setTimeout(stop, 3000) }

https://gist.github.com/kawaz/72f61d8389fed0e9d4e7dc9eb01b39c8 setIntervalはブラウザのタブがバックグラウンドで動作しないとのことで動作させるためのサンプルコードが ないかと調べていたところ上記サイトを見つけました。 ただ、その書きっぷりも訳が分らない & 何をやっているのかわからないです。 当方が昔、見たことのあるJavaScriptとはまるで違っていて「そんな書き方あったっけ？」 という感じです。 例えばsuperInterval.jsの下記の部分に出てくる '=>' というのが謎でそれぞれ何を意味しているのでしょうか？ とくに3つ目の 「() => cb(...args)」なんていうのが？？？です const superInterval = (cb, interval=1000, ...args) => { const code = `self.addEventListener('message', msg=>{setInterval(()=>self.postMessage(null), msg.data)})` w.onmessage = () => cb(...args) (superInterval.js) const superInterval = (cb, interval=1000, ...args) => { try { const code = `self.addEventListener('message', msg=>{setInterval(()=>self.postMessage(null), msg.data)})` const w = new Worker(`data:text/javascript;base64,${btoa(code)}`) w.onmessage = () => cb(...args) w.postMessage(interval) return {stop:()=>w.terminate()} } catch(_){ // 実装の問題またはCSPによる拒否などで Worker が使えなければ普通の setInterval を使う const id = setInterval(cb, interval, ...args) return {stop:()=>clearInterval(id)} } } (使い方) { const log = (...args) => console.log(...args) const {stop} = superInterval(log, 500, 1, {a:2}, [3]) setTimeout(stop, 3000) }

プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。

<!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (value == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // function selectboxChange11() { var value = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (value == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> ↑はjsの分ですが、 2個選んだら初めてイベントが発生するプログラムを作成しているのですが、 いかんせんうまくいきません。 恐らく、var value = document.forms.form1.Select1.value;のところで、躓いているのだと思います。 document.formsにカンマをつけてみたり、さらに、両端に[]をつけてみたり、いろいろ試しましたが、うまくいきません。 それとも、重ねること自体ができないのでしょうか。 どうしたらいいのでしょうか。

プルダウンのメニューを表示を2つ設定したいのですが、 どこが間違っているのでしょうか。 基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。 間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>

以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。 これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。 どうしたら改善されますか。

char.js4.2.1で下記のコードを使い人口ピラミッドを作ることは出来たのですがマウスオーバー時に 80～84歳 ■男: -14,805 の形で表示されますがこの数値を絶対値で処理する方法をお教えください。 <script> var ctx = document.getElementById("myBarChart").getContext('2d'); var data = { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [{ label: '男', data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880], backgroundColor: 'red' }, { label: '女', data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049], backgroundColor: 'green' }] }; var options = { indexAxis: 'y', scales: { y:{ beginAtZero: true, stacked: true, display: true, title:{ display: true, text: '年齢' } }, x:{ stacked: true, display: true, //min: 300, title:{ display: true, text: '人数' }, ticks: { callback: function (v) { return Math.abs(v) } } }, }, plugins: { title: { display: true, text: 'Pyramide des ages' } } }; var ex_chart = new Chart(ctx, { type: 'bar', data: data, options: options, }); </script>

以前使っていたchart.jsのバージョン2.9系から最新の4.2系に変えたいと思い試行しています。基本的なサンプルはなんとかなるのですが、3系統に変わってから大きく変化した部分が全く理解しないまま2系統を使い続けて来たのが現況です。今回、4系統に挑戦するにあたり下記の2系統で人口ピラミッドのためのコードの書き換え方をお教えください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>multiグラフ</title> </head> <body> <div class="row" style="width: 100%;" > <div class="chart1" style="float: left;" > <canvas id="myChart1" width="300" height="450"></canvas></div> <div class="chart2" style="left: 300px"> <canvas id="myChart2" width="350" height="450"></canvas></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script> Chart.defaults.global.defaultFontColor = 'black'; var ctx = document.getElementById("myChart1").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'男',data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880,], backgroundColor: "red" } ] }, options: { responsive: false, title: { display: true, text: 'Pyramide des ages' }, scales: { xAxes: [{ stacked: true, ticks: { callback: function (v){ return Math.abs(v) } } }], yAxes: [{stacked: true, ticks: { display: false } }] } } }); var ctx = document.getElementById("myChart2").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'女',data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049], backgroundColor: "green" } ] }, options: { responsive: false, title: { display: true, text: '' }, scales: { xAxes: [{ stacked: true, }], yAxes: [{stacked: true }] }, } }); </script> </body> </html> これは、Y軸のラベル表示を真ん中に置きたいがため2個のcanvasを強引に並べています。 ちなみに、canvas分けないで一つだけにしてY軸を左端にした場合で試したところ。 "horizontalBar"の部分を type: "bar", options: { indexAxis: "y", }, に代えても　肝心の「xAxes」の部分をどう変えていいか分からないためそままにしておいたら、当然のごとく Invalid scale configuration for scale: xAxes Invalid scale configuration for scale: yAxes のエラーメッセージが出てグラフも左右でなく上下の状態となります。 コピペだけで既存のコードを利用している者として不勉強で申し訳ありませんがご教授お願いいたします。