JavaScript
- プルダウンのメニューを表示を2つ設定。
プルダウンのメニューを表示を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>
- ベストアンサー
- semboku_love
- JavaScript
- 回答数1
- jsでプルダウンで選択したものがうまく表示されない
以下の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> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。 どうしたら改善されますか。
- ベストアンサー
- semboku_love
- JavaScript
- 回答数1
- chart.js4.2でマウスオーバー情報の変更
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>
- ベストアンサー
- turu575
- JavaScript
- 回答数1
- chart.jsのコードを2.9から4.2に変換
以前使っていた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 のエラーメッセージが出てグラフも左右でなく上下の状態となります。 コピペだけで既存のコードを利用している者として不勉強で申し訳ありませんがご教授お願いいたします。
- 締切済み
- turu575
- JavaScript
- 回答数1
- Canvasを使わずに直角三角形を描画できますか？
図のような図形の描画を、JavaScriptで描くには？ 条件は、 ・Vanilla JavaScriptのこと ・Canvasを不使用 ・ｓｖｇを不使用
- ベストアンサー
- retorofan
- JavaScript
- 回答数4
- グリースモンキーで
グリースモンキーで https://dic.nicovideo.jp/a/%E7%A7%91%E5%AD%A6 の本文の文字リンクを消すスクリプトを教えてください
- 締切済み
- 8903852308520
- JavaScript
- 回答数1
- replace() メソッドで表を作れますか？
HTMLの表(テーブル)は、 通常、table, th, td などのタグを用いて作成します。 私は、それに飽きてしまったので、それらのタグを使わずに replace() メソッドで表を作ることができました。 【HTML】 <pre class="table"> No. ARTIST SONG TITLE RELEASE 01 Ava Max Salt 2019 02 Sia Move Your Body 2016 03 Ken Laszlo Hey Hey Guy 1984 04 The Weeknd Save Your Tears 2020 05 Suri Media Thuong Ly Biet 2021 06 Charlie Thompson Changed My Mind 2013 </pre> 皆さんでしたら、どんなコーディングで実現できますか？ 【条件】 ・元データのセル間はタブ区切り ・createElement()を用いないこと ・メソッドチェーンは可読性が劣るので不可 ・CSSは用いずに、文字の太さ・セルの背景色も JavaScriptで設定
- 締切済み
- retorofan
- JavaScript
- 回答数3
- DIVタグ内のテキストをセレクトできますか？
textareaタグ内のテキストは element.select(); で選択できます。 では、DIVタグ内のテキストの時は どのようにすればよいのでしょうか？
- ベストアンサー
- retorofan
- JavaScript
- 回答数1
- txtファイルを読み込んでWeb上で自動作表したい
本日２月２０日は、西郷輝彦さんの命日です。 当方は、彼の歌が好きで、歌のリストを作りました。 このテキストファイルをHTMLで読み込んで、 Web上で自動作表したいと思っています。 条件は、次のとおりです。 ・ローカル環境でできること ・OBJECTタグ、または、IFRAMEタグに読み込む ・JavaScriptでコーディングする ・読み込むファイルの例は次のとおり 曲名 発売日 チャペルに続く白い道 1964.04.15 星空のあいつ 1964.06.01 潮風が吹きぬける町 1967.10.01 JavaScriptに詳しいかたにご教示願いたく、 よろしくお願いいたします。
- 締切済み
- retorofan
- JavaScript
- 回答数2
- HackAllの攻略
HackAll v2のレベル３は、自分のユーザーエージェントが正解ですが、ソースコードにはそれを照合するコードがありません。 レベル１と２は照合するコードがあります。 レベル３はどうやって照合していますか？ https://hackall.cipher.jp/
- 締切済み
- dfuioauefiauw
- JavaScript
- 回答数2
- クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。
- ベストアンサー
- noname#254329
- JavaScript
- 回答数1
- Jqueryを使った特定語句の自動タグ付与について
### 前提 ワードプレス記事内の指定した特定語句にjQueryを使って自動で<span>タグとクラスを付与することによって自動で特定語句をハイライト（強調）しています。 このコードはjavascript.js内に記述しており全てのページに反映されます。 ### 実現したいこと ①類似した語句に自動で<span>タグを付与しないようにしたい（これは正直難しい） ②もっと簡単な方法で特定ページでは動作しないようにしたい ### 発生している問題・エラーメッセージ ①下記例の場合、 "トロ"という語句に<span>タグを付与している場合、 "トトロ"という語句がくると"トロ"だけ反応してしまい ト"トロ" のように意図せぬ場所でハイライトされてしまいます。 ②数百あるページのうち数ページはハイライトが不要なのですが javascript.jsに記述してある為、不要でも無効化することができません。 全ての個ページにそれぞれ記述すれば解決しますがハイライトが必要/不必要なページの比率的に現実的ではありません。 ``` ### 該当のソースコード jQuery().ready(function($) { $('p').each(function() { var txt = $(this).html(); $(this).html(txt .replace(/トロ/g,'<span class = "Ptext">トロ</span>') .replace(/サーモン/g,'<span class = "Ptext">サーモン</span>') .replace(/トト/g,'<span class = "Ptext2">トト</span>') ); }); }); ``` ### 試したこと ①クラス名は適当ですがこの場合、トロという語句に対してPtextで強調したい色やサイズでcssを指定します。 次にトトロで反応しないようにトトという語句に対してPtext2で通常フォントを指定して他の語句も見つけ次第展開していきます。 ②ハイライト不要ページ内ではPtextを全てPtext2に書き換えて記述します。 よろしくお願いいたします。
- ベストアンサー
- GU-PI
- JavaScript
- 回答数1
- 複数のスタンプ画像の選択肢をphpに送りたい
質問ページを作成したいのですが、formを作る際にgoo質問のような1目でわかるリアクションスタンプを実装したいです。 質問文は<form></form>を使い実装可能だと考えたのですが、スタンプ画像を設置した状態でその中から選択肢を選ばせる方法が分かりません。Wordpressを使っているためAjaxのようなデータの送信ができない前提で作りたい場合、どのようなコードが必要になるのでしょうか？アドバイスお願い致します。 ※参考イメージ https://imgur.com/CjdK1Hf.gif ※参考サイト https://okwave.jp/qa/q8315548.html https://okwave.jp/qa/q8315548.html
- ベストアンサー
- php_learn
- JavaScript
- 回答数1
- 列車の走行位置プログラムを作りたいです。
2022/12/28 13:23 自分は、列車の現在時刻をもとにアニメーションを描画するプログラミングを考案したいなぁと考えております。 以下のサイトを参照しています。 http://r113.web.fc2.com/p/viewer/nankai ... index.html 以下のサイトだと、平日ダイヤと土・休日ダイヤの割り振りしかできません。 フラグをいじってみてわかったことですが、これは、曜日単位で分けるものであり、 日付単位で分けることができません。 <code> //平日ダイヤか土・休日ダイヤかを判定する 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; } </code> 自分は初歩的なプログラミングしかできませんが、 <code> //月?金なら立てる if(day >= 1 && day <= 5) weekdayFlag = true; else weekdayFlag = false; </code> の部分が、いわば、曜日で分かれるように設定してあることに気が付きました。 これを個別の日にち単位で分けるとしたら、どんなプログラムが考えられるでしょうか。 自分は3つ以上のダイヤパターンを考えたいです。
- 締切済み
- semboku_love
- JavaScript
- 回答数1
- javascriptで歪度と尖度を求めるコード
サイトを参考に不偏分散から歪度と尖度を下記のコードで求めることが出来たのですが、 <!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8 > <title>unbiased_Variance</title> </head> <body> <script> const arr = [70,71,70,74,75,73,72] // 平均値を計算 let sum = 0; arr.forEach((x, i) => sum += x) const ave = sum / arr.length; // 分散を計算 let dist = 0; arr.forEach((x, i) => dist += (x - ave) ** 2) const unbiasedVariance = dist / (arr.length-1); //不偏分散 const SD = Math.sqrt(dist / (arr.length-1)); // 歪度と尖度を計算 let sum3 = 0; let sum4 = 0; for (var i in arr){ sum3 += Math.pow((arr[i] - ave)/SD, 3); sum4 += Math.pow((arr[i] - ave)/SD, 4); } const skew = sum3*arr.length/(arr.length-1)/(arr.length-2); const exKurt = arr.length*(arr.length+1)/(arr.length-1)/(arr.length-2)/(arr.length-3)*sum4 - 3*(arr.length-1)*(arr.length-1)/(arr.length-2)/(arr.length-3); console.log(unbiasedVariance); console.log(skew); console.log(exKurt); </script> </body> </html> javascriptはコピペで使用が主なので複雑な計算方法の書き方は分かりません、そこでこんな形のコピペのコードが出来上がりました。 配列から歪度と尖度を求めるコードをもっとすっきりした形になればと思い質問しました。もし宜しければご教授お願います。
- ベストアンサー
- turu575
- JavaScript
- 回答数2
- javascriptの計算結果の出力について
いつもお世話になっております。下記のjavascriputoで最頻値を求める場合結果はconsole.logに表示されますが、この結果をテキストかCSVのデータとして出力する方法をお教えください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8 > <title>Array_mode</title> </head> <body> <script> var store = ['aa','bb','cc','dd','ee','bb','ee','cc','ee','aa','bb'], distribution = {}, max = 0, result = []; store.forEach(function (a) { distribution[a] = (distribution[a] || 0) + 1; if (distribution[a] > max) { max = distribution[a]; result = [a]; return; } if (distribution[a] === max) { result.push(a); } }); console.log('count: ' + max); console.log('mode: ' + JSON.stringify(result)); //console.log(distribution); </script> </body> </html>
- ベストアンサー
- turu575
- JavaScript
- 回答数2
- jsのcase文では、～かつ～が使えないのはなぜ。
jsのcase文では、～かつ～を使いたいです。 例えば、月曜日かつ火曜日としたいのですが、どこにもそのようなサイトが載っていないのです。 どうしてですか。なければ代替案を教えてください。
- ベストアンサー
- semboku_love
- JavaScript
- 回答数2
- ショートカットキーの作り方
Aキーを押したら関数を実行するが、textareaに文字を入力しているときは、関数を実行しない方法を教えください。
- ベストアンサー
- yukazu2123
- JavaScript
- 回答数2
- スクロールで画面が読み込まれたら動くようにしたい
下記html、cssでテキストを動くようにしたのですがjavascript(jquery)で スクロールで画面が読み込まれたら動くようにしたいのですがどうすれば良いでしょうか。 素人なのでコピペで教えて欲しいです。 html <body> <section> </section> <div class="heading"> <div> <p class="slide-up">テキスト</p> </div> <div> <p class="slide-up">テキスト</p> </div> <div> </div> </body> </body> </body> css body, html { width: 100%; font-family: 'Times New Roman', Times, serif; } section { height: 200vh; } .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } .heading { margin: 80px 0 0 80px; font-size: 15em; line-height: 90%; } .heading>div { overflow: hidden; } .heading>div>p { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; margin: 0; } div.heading>div { -webkit-animation-delay: 1s; animation-delay: 1s; } .slide-up { -webkit-animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; } @-webkit-keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } } @keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } }
- 締切済み
- yamasusu
- JavaScript
- 回答数1