JavaScript ランキング(3ページ目)

JavaScriptはWebページにアニメーションや効果を加えることができるプログラミング言語です。入門編のわかりやすいサイトや書籍を紹介してほしい、オブジェクト指向がわからない、文字列の操作を教えてほしい等こちらに投稿してみましょう。

回答数

気になる

switch文は、if文みたいに最初の（）内に式を2つ以上設定できませんか。

switch文は、if文みたいに最初の（）内に式を2つ以上設定できませんか。 caseの部分のことではないです。

質問日時: 2022/07/27 14:07 質問者: 福本英一

解決済

1

0
セレクトボックスを2つ設けて選択して初めてメッセを表示

セレクトボックスを2つ設けて選択して初めてメッセが出るプログラムを作りたいです。どのようにすればいいですか。どのサイトもそのようなサイトは見つかりませんでした。以下のjsを参考にしたいです。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" language="javascript"> function onButtonClick() { selindex = document.form1.Select1.selectedIndex; target = document.getElementById("output"); switch (selindex) { case 0: target.innerHTML = "要素1が選択されています。<br/>"; break; case 1: target.innerHTML = "要素2が選択されています。<br/>"; break; case 2: target.innerHTML = "要素3が選択されています。<br/>"; break; case 3: target.innerHTML = "要素4が選択されています。<br/>"; break; case 4: target.innerHTML = "要素5が選択されています。<br/>"; break; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1""> <option>要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html>

質問日時: 2022/07/27 12:15 質問者: 福本英一

解決済

1

0
セレクトボックスを2つ選択してメッセージなどを表示するには。～運賃検索プログラムを完成させたい～

セレクトボックスを2つ選択してメッセージなどを表示するには。～運賃検索プログラムを完成させたい～次では、セレクトボックスで選択をすれば、メッセージが表示されるようになっています。 <script type="text/javascript" language="javascript"> function onButtonClick() { selindex = document.form1.Select1.selectedIndex; target = document.getElementById("output"); switch (selindex) { case 0: target.innerHTML = "要素1が選択されています。<br/>"; break; case 1: target.innerHTML = "要素2が選択されています。<br/>"; break; case 2: target.innerHTML = "要素3が選択されています。<br/>"; break; case 3: target.innerHTML = "要素4が選択されています。<br/>"; break; case 4: target.innerHTML = "要素5が選択されています。<br/>"; break; } } </script> これと、組み合わせたいのが次のjsの文章です。どうしたらいいですか。 <script type="text/javascript"> function kotae() { ten=0 if((f.q1.value == "松山市"&&f.q2.value == "高松市")||(f.q1.value == "高松市"&&f.q2.value == "松山市")) {f.q1.style.backgroundColor="aqua ";ten = ten + 50} else f.q1.style.backgroundColor="red" if(f.q3.value == "名古屋市"){f.q3.style.backgroundColor="aqua ";ten = ten + 25} else f.q3.style.backgroundColor="red" if(f.q4.value == "金沢市") {f.q4.style.backgroundColor="aqua ";ten = ten + 25} else f.q4.style.backgroundColor="red" f.tokuten.value=ten const keywords = ['あいうえお','かきくけこ', 'さしすせそ']; if (f.tokuten.value=50) { for (let i = 0; i < keywords.length; i++) { console.log(f.rank.value=keywords[0]); }} else if(f.tokuten.value >=20){f.rank.value = 'B'} else if(f.tokuten.value >=15){f.rank.value = 'C'} else if(f.tokuten.value <10){f.rank.value = 'D'} //ここまで } </script> <body> <form name="f"> 愛媛県の県庁所在地は <select name="q1"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。 <p> 香川県の県庁所在地は <select name="q2"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 愛知県の県庁所在地は <select name="q3"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 石川県の県庁所在地は <select name="q4"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> <input type="button" name="b1" value="答え合わせ" onclick="kotae()"> <p> <input name=tokuten size="6">点  <input name=rank class="hoge">ランク  これらを組み合わせて、設問１と設問2でそれぞれ松山市と高松市を選択すればメッセージが表示されるようにしたいです。

質問日時: 2022/07/22 11:10 質問者: 福本英一

解決済

1

0
4

コードレビューをお願いします。

javascriptでカメラとマイクの一覧をselectボックスに表示しボタンの制御によってカメラのon,offマイクのon,offを実現させたいのですがマイクのon,offの箇所がうまくいきません他にもバグがあるかもしれませんがまた、カメラとマイクのデバイス一覧をリストに表示できませんコードレビューをお願いします <html> <head> <script> function start1(camela_flag, mike_flag) { const video = document.getElementById("video") const audio = document.createElement('audio'); if (camela_flag == 1 && mike_flag == 1) { navigator.mediaDevices.getUserMedia({ video: true, audio: true, }).then(stream => { video.srcObject = stream; video.play(); audio.srcObject = stream; }).catch(e => { console.log(e); }) } else if (camela_flag == 1 && mike_flag == 0) { navigator.mediaDevices.getUserMedia({ video: true, audio: false, }).then(stream => { video.srcObject = stream; video.play(); audio.srcObject = stream; audio.stop(); }).catch(e => { console.log(e) }) } else if (camela_flag == 0 && mike_flag == 1) { navigator.mediaDevices.getUserMedia({ video: false, audio: true, }).then(stream => { video.srcObject = null; video.play(); audio.srcObject = stream; audio.play(); audio.muted = false; }).catch(e => { console.log(e); }) } else { navigator.mediaDevices.getUserMedia({ video: false, audio: false, }).then(stream => { audio.autoplay = false; }).catch(e => { console.log(e) }) } } /* navigator.mediaDevices.ondevicechange = event => { updateDeviceList(); } */ window.onload = function updateDeviceList() { navigator.webkitGetUserMedia({ audio: true, video: true }, function () { navigator.mediaDevices.enumerateDevices().then(function (devices) { devices.forEach(function (device) { alert(device.label); }) }) }, function () { console.log('getUserMedia failed') }) const video = document.getElementById("video") const audio = document.createElement('audio'); navigator.mediaDevices.enumerateDevices() .then(function (devices) { var audiolist = document.getElementById('audiolist'); var videolist = document.getElementById('videolist'); var elem_a = document.createElement("option"); var elem_v = document.createElement("option"); devices.forEach(device => { if (device.kind == 'videoinput') { elem_v.text = device.label; elem_v.value = deviceid; videolist.appendChild(elem_v); } if (device.kind == 'audioinput') { elem_a.text = device.label; elem_a.value = deviceid; audiolist.appendChild(elem_a); } }); }); } </script> </head> <body> <div> <audio id="audio"></audio> <video id="video"></video> <input type="button" onclick="start1(1,1);" / value="カメラ＆マイクSTART"> <input type="button" onclick="start1(1,0);" / value="カメラSTART"> <input type="button" onclick="start1(0,1);" / value="マイクSTART"> <input type="button" onclick="start1(0,0);" / value="カメラ＆マイクSTOP"> <input type="button" onclick="updateDeviceList();" / value="デバイス変更"> </div>  <label>Select audio output: </label> <style> select { width: 100px; } </style> <select id="audiolist"></select> <select id="videolist"></select> </body> </html>

質問日時: 2022/07/16 05:38 質問者: 39OK

解決済

1

0
5

プログラムがうまく動きませんレビューお願いします

<html> <head> <script> function start1(camela_flag, mike_flag) { const video = document.getElementById("video") const audio = document.createElement('audio'); if (camela_flag == 1 && mike_flag == 1) { navigator.mediaDevices.getUserMedia({ video: true, audio: true, }).then(stream => { video.srcObject = stream; video.play(); audio.srcObject = stream; }).catch(e => { console.log(e); }) } else if (camela_flag == 1 && mike_flag == 0) { navigator.mediaDevices.getUserMedia({ video: true, audio: false, }).then(stream => { video.srcObject = stream; video.play(); audio.srcObject = stream; audio.stop(); }).catch(e => { console.log(e) }) } else if (camela_flag == 0 && mike_flag == 1) { navigator.mediaDevices.getUserMedia({ video: false, audio: true, }).then(stream => { video.srcObject = null; video.play(); audio.srcObject = stream; audio.play(); audio.muted = false; }).catch(e => { console.log(e); }) } else { navigator.mediaDevices.getUserMedia({ video: false, audio: false, }).then(stream => { video.srcObject = stream; video.stop(); audio.srcObject = stream; audio.muted = true; audio.volume = 0.0; audio.stop(); }).catch(e => { console.log(e) }) } } navigator.mediaDevices.ondevicechange = event => { updateDeviceList(); } function updateDeviceList() { navigator.mediaDevices.enumerateDevices() .then(function (devices) { elem.innerHTML = "<select>"; elem.innerHTML = "<select>"; devices.forEach(device => { let elem = document.createElement("option"); let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i); elem.innerHTML += "<option value =" + kind + "> " + direction + "</option>"; if (type === "audio") { audioList.appendChild(elem); } else if (type === "video") { videoList.appendChild(elem); } }); elem.innerHTML += "</select>"; elem.innerHTML += "</select>"; }); } </script> </head> <body> <div> <video id="video"></video> </div> <div> <audio id="audio"></audio> <input type="button" onclick="start1(1,1);" / value="カメラ＆マイクSTART"> <input type="button" onclick="start1(1,0);" / value="カメラSTART"> <input type="button" onclick="start1(0,1);" / value="マイクSTART"> <input type="button" onclick="start1(0,0);" / value="カメラ＆マイクSTOP"> <input type="button" onclick="updateDeviceList();" / value="デバイス変更"> </div> <div> <audio class="gum" title="audio stream from getUserMedia()" controls></audio> <div class="outputSelector"> <label>Select audio output: </label> <select id = "audio"></select> <select id = "video"></select> </div> </div> </body> </html>

質問日時: 2022/07/10 05:08 質問者: 39OK

解決済

1

0
6

以前の質問だと、どの条件でも配列が表示されてしまいます。

<html> <head> <!DOCTYPE html> <meta charset="utf-8"> <script type="text/javascript"> function change(selbox) { var txt1 = document.getElementById("txt1"); var txt2 = document.getElementById("txt2"); switch(selbox.value){ case '松山市': txt1.style.display = ""; txt2.style.display = "none"; break; case '2': txt1.style.display = "none"; txt2.style.display = ""; break; default: } var todo = ['メール確認', '日報送信', 'スケジュール確認', '資料作成']; var str=''; for (var i = 0; i < todo.length; i++) { str += todo[i] + '<BR>'; } document.getElementById('message_area').innerHTML = str; } </script> <body> <form name="f"> 愛媛県の県庁所在地は <select name="q1" onchange="change(this)"> <option value="">選択肢</option> <option value="1">名古屋市</option> <option value="2">松山市</option> <option value="3">金沢市</option> <option value="4">高松市</option> </select> です。 <p> 香川県の県庁所在地は <select name="q2" onchange="change(this)"> <option value="">選択肢</option> <option value="1">名古屋市</option> <option value="2">松山市</option> <option value="3">金沢市</option> <option value="4">高松市</option> </select> です。<p> 愛知県の県庁所在地は <select name="q3"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 石川県の県庁所在地は <select name="q4"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> テキスト１<input type="text" id="txt1" name="txt1"><BR> テキスト２<input type="text" id="txt2" name="txt2"><BR> <div id="message_area" /> <body> </html> 以上はそのプログラムです。私は、設問1と設問2でそれぞれ松山市と高松市を選んだら配列を表示できるプログラムを求めています。こんなことはどこのサイトにも書いていません。いい加減にしてくださいね。

質問日時: 2022/07/09 11:40 質問者: 福本英一

解決済

1

0
7

console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします

2022のみconsole.logに表示されて2021が表示されません。 let result = JSON.stringify(allobj); にしてJSON.stringifyをまとめても、console.log(JSON.stringify(objA));console.log(JSON.stringify(objB));と分けてもダメでした。打てる手はすべてやったと思っているのですが、どうすればいいんでしょうか… <div class="selectbox"> <select name="top"> <option value="">年を選択</option> <option value="op-a">2021</option> <option value="op-b">2022</option> </select> <select name="op-a"> <option value="">2021グループから選択</option> <option value="op-a-1">1</option> <option value="op-a-2">2</option> <option value="op-a-3">3</option> <option value="op-a-4">4</option> <option value="op-a-5">5</option> <option value="op-a-6">6</option> <option value="op-a-7">7</option> <option value="op-a-8">8</option> <option value="op-a-9">9</option> <option value="op-a-10">10</option> <option value="op-a-11">11</option> <option value="op-a-12">12</option> </select> <select name="op-b"> <option value="">2022グループから選択</option> <option value="op-a-1-1">1</option> <option value="op-a-1-2">2</option> <option value="op-a-1-3">3</option> <option value="op-a-1-4">4</option> <option value="op-a-1-5">5</option> <option value="op-a-1-6">6</option> <option value="op-a-1-7">7</option> <option value="op-a-1-8">8</option> <option value="op-a-1-9">9</option> <option value="op-a-1-10">10</option> <option value="op-a-1-11">11</option> <option value="op-a-1-12">12</option> </select> <button type="button" id="selectbox-reset">リセット</button> <style> .selectbox select:not(select[name=top]) { display:none; } </style> <script> window.addEventListener('load', function () { //onchangeイベントの設定 document.querySelectorAll('.selectbox select').forEach(elm => { elm.onchange = function () { let elm2 = document.getElementsByName(this.value)[0]; if (elm2) { elm.style.display = 'none'; elm2.style.display = 'block'; } } }); //リセットボタン document.getElementById('selectbox-reset').onclick = function () { document.querySelectorAll('.selectbox select').forEach(elm => { if (elm.name == 'top') { elm.style.display = 'block'; } else { elm.style.display = 'none'; } elm.selectedIndex = 0; }); }; }); //オブジェクトを定義するvarは受け取る際にエラーが起きそう再宣言のできるletを選択 let objA = { // プロパティを定義 // キー: 値 year: "2021", month: "1,2,3,4,5,6,7,8,9,10,11,12", }; let objB = { // プロパティを定義 // キー: 値 year: "2022", month: "1,2,3,4,5,6,7,8,9,10,11,12", }; //オブジェクトをまとめる let allobj = Object.assign(objA, objB); //JSON.stringifyとは、JavaScriptのオブジェクトや値などのデータをJSONに変換するための関数 let result = JSON.stringify(objA,objB); //変数「result」に代入 console.log(result); </script>

質問日時: 2022/07/07 22:13 質問者: 初心者サイト作成

ベストアンサー

2

0
8

GoogleChart 階層ごとのブロックの長さを個別に設定したい

GoogleChart 階層ごとのブロックの長さが、最も長いものにすべて統一されてしまうためそれぞれの長さで個別に設定することは可能でしょうか？構造上、不可能な気もしますが、、、どうかお知恵をお貸しください。よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script> google.charts.load('current', {packages:["orgchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); // For each orgchart box, provide the name, manager, and tooltip to show. data.addRows([ [{'v':'test1', 'f':'test1'}, '', 'The President'], [{'v':'test2', 'f':'test2<div style="color:red; font-style:italic">一番長い<br>ブロックで<br>全ての列が<br>統一されてしまう</div>'}, 'test1', 'VP'], ['test3', 'test1', ''], ['test4', 'test1', 'Bob Sponge'], ['test5', 'test2', ''] ]); // Create the chart. var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); // Draw the chart, setting the allowHtml option to true for the tooltips. chart.draw(data, {'allowHtml':true}); } </script> </head> <body>  <div id="chart_div"></div></body> </html>

質問日時: 2022/07/06 14:27 質問者: DDddDDdd11221122

ベストアンサー

1

0
9

2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい

下記コードにdocument.getElementById('').value;を使い1つめのボックスを見えなくしたいのですが、どのように組めばいいでしょうか？ ※参考サイト https://bonoponz.hatenablog.com/entry/2020/05/12/%E3%80%90Web%E3%80%91%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%81%A7%E8%A1%A8%E7%A4%BA%E5%86%85%E5%AE%B9%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B <select name="OS"> <option value="">OSを選択</option> <option value="Windows">Windows</option> <option value="Android">Android</option> <option value="iOS">iOS</option> <select> <select name="version"> </select> <script> let versionArray = new Array(); versionArray[''] = new Array('バージョン情報'); versionArray['Windows'] = new Array('XP', 'Vista', '7', '8', '8.1', '10'); versionArray['Android'] = new Array('7 (Nougat)', '8 (Oreo)', '9 (Pie)', '10'); versionArray['iOS'] = new Array('10以下', '11', '12', '13'); document.getElementsByName('OS')[0].onchange = function () { let os = this.value; let elm = document.getElementsByName('version')[0]; elm.options.length = 0; for (let i = 0; i < versionArray[os].length; i++) { let op = document.createElement('option'); op.value = versionArray[os][i]; op.textContent = versionArray[os][i]; elm.appendChild(op); } }; window.onload = function () { document.getElementsByName('OS')[0].onchange(); }; </script>

質問日時: 2022/07/05 21:58 質問者: 初心者サイト作成

ベストアンサー

2

0
10

jsで、配列内の文章を改行する際どのようにすればいいですか。

次のjsの文章があります。 <script type="text/javascript"> function kotae() { ten=0 if((f.q1.value == "松山市"&&f.q2.value == "高松市")||(f.q1.value == "高松市"&&f.q2.value == "松山市")){f.q1.style.backgroundColor="aqua ";ten = ten + 50} else f.q1.style.backgroundColor="red" if(f.q3.value == "名古屋市"){f.q3.style.backgroundColor="aqua ";ten = ten + 25} else f.q3.style.backgroundColor="red" if(f.q4.value == "金沢市") {f.q4.style.backgroundColor="aqua ";ten = ten + 25} else f.q4.style.backgroundColor="red" f.tokuten.value=ten const keywords = ['あいうえお','かきくけこ', 'さしすせそ']; if (f.tokuten.value=50) { for (let i = 0; i < keywords.length; i++) { console.log(f.rank.value=keywords[0]); }} else if(f.tokuten.value >=20){f.rank.value = 'B'} else if(f.tokuten.value >=15){f.rank.value = 'C'} else if(f.tokuten.value <10){f.rank.value = 'D'} //ここまで } </script> これは、1問目と2問目をそれぞれ松山市と高松市と入力すれば50と出力されるようなプログラムになっています。さらに、そこに加えて、それとは別に配列が用意され、50の場合には、あいうえおと出力されるようなプログラムになっています。ところが、例えば仮にあいうとえおという風に開業することができません。もとから配列はそのような挙動は不可能なのでしょうか。配列でも文章内改行が可能であればそれを使いたいのですが…。

質問日時: 2022/07/05 20:40 質問者: 福本英一

解決済

3

0
11

GoogleChartの組織図について

GoogleChartの組織図で、３つ下の階層までラインを引き延ばして各層のブロックを飛ばしたいのですが可能でしょうか？以下サイトに掲載されているコードを丸コピしています。 https://www.petitmonte.com/javascript/chart_orgchart.html よろしくお願いいたします。

質問日時: 2022/07/05 16:11 質問者: DDddDDdd11221122

ベストアンサー

3

0
12

jsで、len～(__=C.value)]||vals[__+_]))]));の部分を条件分岐

字数制限上タイトルがおかしなことになっていますが、要は、len～(__=C.value)]||vals[__+_]))]));の部分を条件分岐させたいのです。 javascriptのイベントが絡んでいるので、少しややこしいのですが、それは可能ですか。以前、配列について、他の質問サイトで質問した際、配列自体に、配列を参照し、1つ目の配列から、～以上～未満の数を2つ目の配列でif関数のように参照して、結果を出すというシステムはなく、イベントと組み合わさることによってそれがなされているものだと聞きました。となると、ひょっとしてイベントも関わってくるのでしょうか。どっちにせよ、これができるjsのプログラマーは日本に100人もいないと思います。以下はそのjsの文です。 var vals = { 'sb01sb02':3.7, 'sb01sb03':7.8, 'sb01sb04':10.2, 'sb01sb05':12.1, 'sb02sb03':4.1, 'sb02sb04':6.5, 'sb02sb05':8.4, 'sb03sb04':2.4, 'sb03sb05':4.3, 'sb04sb05':1.9, 　 'a0b0': 1.2, 　 'b0a0': 1.2, 　　 'a0b1': 2.3, 　　　 'b1a0': 2.3, 　　　　 },　　　　　　　　　　　 len = [2,4,6,8,10,12,14,16], 　　　　　　　　 prc = [[['定期券','170(90)'],['回数券','1,700(900）'], 　　　　　　　　　　　　　['通勤_1か月','6,540(3,270)'],['3か月','18,640(9,320)'],['6か月','35,320(17,660)'], 　　　　　　　　　　['通学_1か月','3,030(1,520)'],['3か月','8,640(4,320)'],['6か月','16,370(8,190)'],], [['定期券','190(100)'],['回数券','1,900(1,000）'], 　　　　　　　　　　　　　['通勤_1か月','7,360(3,680)'],['3か月','20,980(10,490)'],['6か月','39,750(19,880)'], 　　　　　　　　　　['通学_1か月','3,400(1,700)'],['3か月','9,690(4,850)'],['6か月','18,360(9,180)'],], 　　　　　　　　　　 [['定期券','210(110)'],['回数券','2,100(1,100）'], 　　　　 ['通勤_1か月','8,180(4,090)'],['3か月','23,320(11,660）'],['6か月','44,180(22,090)'], 　　　　 ['通学_1か月','3,780(1,890)'],['3か月','10,780(5,390)'],['6か月','20,420(10,210)'],], 　　　　　　　　　　 [['定期券','230(120)'],['回数券','2,300(1,200）'], 　　　　 ['通勤_1か月','8,990(4,500)'],['3か月','25,630(12,820）'],['6か月','48,550(24,280)'], 　　　　 ['通学_1か月','4,160(2,080)'],['3か月','11,860(5,930)'],['6か月','22,470(11,240)'],], 　　　　　　　　　　 [['定期券','250(130)'],['回数券','2,500(1,300）'], 　　　　 ['通勤_1か月','9,810(4,910)'],['3か月','27,960(13,980）'],['6か月','52,980(26,490)'], 　　　　 ['通学_1か月','4,530(2,270)'],['3か月','12,920(6,480)'],['6か月','24,470(12,240)'],], 　　　　　　　　　　 [['定期券','270(140)'],['回数券','2,700(1,400）'], 　　　　 ['通勤_1か月','10,620(5,310)'],['3か月','30,270(15,140）'],['6か月','57,350(28,680)'], 　　　　 ['通学_1か月','4,910(2,460)'],['3か月','14,000(7,000)'],['6か月','26,520(13,280)'],], 　　　　　　　　　　 [['定期券','290(150)'],['回数券','2,900(1,500）'], 　　　　 ['通勤_1か月','10,620(5,310)'],['3か月','30,270(15,140）'],['6か月','57,350(28,680)'], 　　　　 ['通学_1か月','5,290(2,650)'],['3か月','15,080(7,540)'],['6か月','28,570(14,290)'],], 　　　　　　　　　　 [['定期券','210(110)'],['回数券','2,100(1,100）'], 　　　　 ['通勤_1か月','8,180(4,090)'],['3か月','23,320(11,660）'],['6か月','44,180(22,090)'], 　　　　 ['通学_1か月','3,780(1,890)'],['3か月','10,780(5,390)'],['6か月','20,420(10,210)']],], 　　　　　　　 T=(a,b=document.createElement('tbody'))=> 　　　　　　 a.reduce((b,a)=> 　　　　　 (a.reduce((c,d)=> 　　　　 (c.insertCell().append(d),c),b.insertRow()),b),b), 　　　　　 F=_=> 　 _&&T(_,D,R(D.childNodes)), 　 R=_=> [..._].forEach (_=> _.remove()); 　 A.addEventListener('change',_=> 　　 F(prc[len.findIndex($=> 　　　 $>Math.floor(vals[(_=B.value)+(__=C.value)]||vals[__+_]))]));

質問日時: 2022/07/04 20:44 質問者: 福本英一

解決済

4

0
13

1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。

このプログラムだと、2回目に押すときは、さらに下に運賃の表示が出てきます。ではなくて、2回目に押す際は、その表示を初期化することはできないのでしょうか。 <!DOCTYPE html> <meta charset="utf-8"> 　<title></title> 　<style> 　　</style> 　　　　　　　<body> 　　　　　　　　　　　<body> 　　　　　　　<p id=A> 　　　　　　　　 <select id=B> 　　　　　　　　　 <option value="">-- 　　　　　　　　　　　　<option value="sb01">中百舌鳥　　　　　　　　　　　　<option value="sb02">深井　　　　　　　　　　　　<option value="sb03">泉ケ丘　　　　　　　　　 <option value="a0">a0 　　　　　　　　　　 <option value="a1">a1 　　　　　　　　　　 <option value="b0">b0 　　　　　　　　　　 <option value="b1">b1 　　　　　　　　　　 </select> 　　　　　　　　　　　　　　　　　　　 <select id=C> 　　　　　　　　　 <option value="">-- 　　　　　　　　　　　　<option value="sb01">中百舌鳥　　　　　　　　　　　　<option value="sb02">深井　　　　　　　　　　　　<option value="sb03">泉ケ丘　　　　　　　　 <option value="a0">a0 　　　　　　　 <option value="a1">a1 　　　　　　 <option value="b0">b0 　　　　　 <option value="b1">b1 　　　　 </select> 　　　</p> 　　<p>一回限り有効</p> 　<table id=D></table> 　 <script> var vals = { 'sb01sb02':3.7, 'sb01sb03':7.8, 'sb02sb03':4.1, 　 'a0b0': 1.2, 　 'b0a0': 1.2, 　　 'a0b1': 2.3, 　　　 'b1a0': 2.3, 　　　　 }, 　　　　　　　　　　　 len = [2,4,6,8,10,12,14,16], 　　　　　　　　　　　　　　　 prc = [ 　　　　　　　　　 [ 　　　　　　　　　 [ 　　　　　　　　　　 '運賃A', 　　　　　　　　　　 '170(90)' 　　　　　　　　　　 ], 　　　　　　　　　　 [ 　　　　　　　　　　 '回数券', 　　　　　　　　　 '1,700（900）' 　　　　　　　　　 ], 　　　　　　　　 [ 　　　　　　　 '通勤_1か月', 　　　　　　 '6,540(3,270）' 　　　　　 ], 　　　　 [ 　　　 '3か月', 　　 '18,640（9,320）' 　 ], 　 [ '6か月', '35,320(17,660）' ], 　 [ 　 '通学_1か月', 　　 '3,030(1,520)' 　　　 ], 　　　　 [ 　　　　　 '3か月', 　　　　　　 '8,640(4,320)' 　　　　　　　 ], 　　　　　　　　 [ 　　　　　　　　　 '6か月', 　　　　　　　　　 '16,370（8,190）' 　　　　　　　　　　 ], 　　　　　　　　　　 ], 　　　　　　　　　　 [ 　　　　　　　　　　 [ 　　　　　　　　　　 '運賃B', 　　　　　　　　　 '180(90)' 　　　　　　　　　 ], 　　　　　　　　 [ 　　　　　　　 '回数券', 　　　　　　 '1,700（900）' 　　　　　 ], 　　　　 [ 　　　 '通勤_1か月', 　　 '6,540(3,270）' 　 ], 　 [ '3か月', '18,640（9,320）' ], 　 [ 　 '6か月', 　　 '35,320(17,660）' 　　　 ], 　　　　 [ 　　　　　 '通学_1か月', 　　　　　　 '3,030(1,520)' 　　　　　　　 ], 　　　　　　　　 [ 　　　　　　　　　 '3か月', 　　　　　　　　　 '8,640(4,320)' 　　　　　　　　　　 ], 　　　　　　　　　　 [ 　　　　　　　　　　 '6か月', 　　　　　　　　　　 '16,370（8,190）' 　　　　　　　　　　 ] 　　　　　　　　　 ], 　　　　　　　　　 ], 　　　　　　　　　　　　　　　 T=(a,b=document.createElement('tbody'))=> 　　　　　　 a.reduce((b,a)=> 　　　　　 (a.reduce((c,d)=> 　　　　 (c.insertCell().append(d),c),b.insertRow()),b),b), 　　　　　 F=_=> 　 _&&T(_,D), 　 R=_=> [..._].forEach (_=> _.remove()); 　 A.addEventListener('change',_=> 　　 F(prc[len.findIndex($=> 　　　 $>Math.floor(vals[(_=B.value)+(__=C.value)]||vals[__+_]))]));　　　　　　　</script>

質問日時: 2022/07/03 15:50 質問者: 福本英一

ベストアンサー

1

0
14

セレクトボックスを選んで点数を出した後、4段階評価するプログラム

以下のページの一番下にセレクトボックスを選択する方式の4択クイズがあります。 http://www2.kuma.u-tokai.ac.jp/~kfuji/hp/JavaScript/index.html これは、1問25点計算で、4問100点の問題です。この問題は、点数を出すことはできますが、S判定、A判定なり、評価を出すことができません。どのようにコードを書いて、どこの部分に挿入したらそれができるのでしょうか。

質問日時: 2022/07/03 07:23 質問者: 福本英一

ベストアンサー

1

0
15

jsでは、'で区切った部分を改行することはできない。〇か×か。

jsの質問です。例えば以下のようなhtmlがあるとして、 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <p id=A> <select id=B> <option value="">-- <option value="sb01">中百舌鳥 <option value="sb02">深井 <option value="sb03">泉ケ丘 <option value="sb04">栂・美木多 <option value="sb05">光明池 <option value="a0">a0 <option value="a1">a1 <option value="a2">a2 </select> <select id=C> <option value="">-- <option value="sb01">中百舌鳥 <option value="sb02">深井 <option value="sb03">泉ケ丘 <option value="sb04">栂・美木多 <option value="sb05">光明池 <option value="b0">b0 <option value="b1">b1 <option value="b2">b2 </select> </p> <p id=D></p> <script> const vals = { 'sb01sb02':3.7, 'sb01sb03':7.8, 'sb01sb04':10.2, 'sb01sb05':12.1, 'sb02sb03':4.1, 'sb02sb04':6.5, 'sb02sb05':8.4, 'sb03sb04':2.4, 'sb03sb05':4.3, 'sb04sb05':1.9, 'a0b0': 1.2, 'a0b1': 12, 'a0b2': 28.8, }, len = [1,2,4,6,8,10,12,14,16], prc = ['運賃170(90),回数券1,700（900）,通勤_1か月6,540(3,270）_3か月18,640（9,320）_6か月35,320(17,660）,通学_1か月3,030(1,520)_3か月8,640(4,320)_6か月_16,370（8,190）', ['運賃170(90),回数券1,700（900）,通勤_1か月6,540(3,270）_3か月18,640（9,320）_6か月35,320(17,660）,通学_1か月3,030(1,520)_3か月8,640(4,320)_6か月_16,370（8,190）'], '運賃190(100),回数券1,900（1,000）,通勤_1か月7,360(3,680）_3か月20,980（10,490）_6か月39,750(19,880）,通学_1か月3,470(1,700)_3か月9,690(4,850)_6か月_18,360（9,180）', '運賃210(110),回数券2,100（1,100）,通勤_1か月8,180(4,090）_3か月23,320（11,680）_6か月44,180(22,090）,通学_1か月3,780(1,890)_3か月10,780(5,390)_6か月_20,420（10,210）', '運賃230(120),回数券2,300（1,200）,通勤_1か月8,990(4,500）_3か月25,630（12,820）_6か月48,550(24,280）,通学_1か月4,160(2,080)_3か月11,860(5,930)_6か月_22,470（11,240）', '運賃250(130),回数券2,500（1,300）,通勤_1か月9,810(4,910）_3か月27,960（13,980）_6か月52,980(26,490）,通学_1か月4,530(2,270)_3か月12,920(6,460)_6か月_24,470（12,240）', '運賃270(140),回数券2,700（1,400）,通勤_1か月10,620(5,310）_3か月30,270（15,140）_6か月57,350(28,680）,通学_1か月4,910(2,460)_3か月14,000(7,000)_6か月_26,520（13,260）', '運賃290(150),回数券2,900（1,500）,通勤_1か月11,450(5,730）_3か月32,840（16,320）_6か月52,980(30,920）,通学_1か月5,290(2,650)_3か月15,080(7,540)_6か月_28,570（14,290）'], f=(_,l=Math.floor(_))=>D.textContent=l?prc[len.findIndex(_=>_>l)]+'円':''; A.addEventListener('change',_=>f(vals[(_=B.value)+(__=C.value)]||vals[__+_])); </script> この、prcのところの’で囲まれた、運賃と回数券を改行させるような関数であったり、文字コードであったりするものはない。〇か×か。

質問日時: 2022/06/26 19:58 質問者: 福本英一

解決済

1

0
16

jsでは、関数を実行した後に関数を実行する挙動はできない〇か×か。

jsでは、関数を実行した後に関数を実行する挙動はできない〇か×か。もしできるのだとすれば、その実例をお上げください。

質問日時: 2022/06/25 07:02 質問者: 福本英一

ベストアンサー

2

0
17

中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。

要するに、1回目の選択で中百舌鳥、2回目で深井を選択するのと、逆に1回目で深井、2回目で中百舌鳥と選択した場合とで同じ挙動するプログラムを作りたいです。セレクトボックス内は数字に直しました。以下はそのhtml文です。jsの部分はすべてお書きください。もしこれに誰も答えられなかったら技術者は罵詈雑言を吐かれてもしょうがないものとみなします。 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <p id=A> <select id=B> <option value="">-- <option value="sb01">中百舌鳥 <option value="sb02">深井 <option value="sb03">泉ケ丘 <option value="sb04">栂・美木多 <option value="sb05">光明池 <option value="a0">a0 <option value="a1">a1 <option value="a2">a2 </select> <select id=C> <option value="">-- <option value="sb01">中百舌鳥 <option value="sb02">深井 <option value="sb03">泉ケ丘 <option value="sb04">栂・美木多 <option value="sb05">光明池 <option value="b0">b0 <option value="b1">b1 <option value="b2">b2 </select> </p> <p id=D></p> <script> const vals = { 'sb01sb02':3.7, 'nakamozuizumigaoka':7.8, 'a0b0': 1.2, 'a0b1': 12, 'a0b2': 28.8, }, len = [ 3, 6, 15, 30, 50], prc = [140,160, 200, 250, 500], f=(_,l=Math.round(_))=>D.textContent=l?prc[len.findIndex(_=>_>l)]+'円':''; A.addEventListener('change',_=>f(vals[B.value+C.value])); </script>

質問日時: 2022/06/24 18:45 質問者: 福本英一

解決済

2

0
18

変数のスコープの問題？

JavaScriptの初心者です。笑われるかも知れません（多分そんな初歩的な事と笑われそうです）が次のようなリストで思った通りに動かず悩んでいます。途中、window.alert　を挟んでいるのはプログラムの状態を見るためです。 fnc03()の　window.alert("fnc03");　までは思った通りに動くのですが、そのあとの処理に入るとエラーを起こすようで、処理が止ってしまうようです。この原因をお教え願えませんでしょうか？よろしくお願いします。 /************************************************ var c = document.getElementById('canvas'); var cnt = c.getContext('2d'); function init(){ window.alert("Start"); fnc01(); fnc02(); fnc03(); } function fnc01(){ window.alert("fnc01"); } function fnc02(){ window.alert("fnc02"); } function fnc03(){ window.alert("fnc03"); cnt.strokeStyle = 'yellow'; //線の色 cnt.lineWidth = 5; //円を描く cnt.arc(50,50,20,0,2*Math.PI); cnt.stroke(); } *************************************************/

質問日時: 2022/06/23 09:32 質問者: jimunobethy

ベストアンサー

3

0
19

電車の運賃を出すプログラムを作っています。

a0とb0を選択したら、abcdefgを表示するプログラムができました。あとは、a0とb0を選択した場合に、1.2なり、1.5なりという（ここは適宜変える）変数が与えられるように仕組み付けし、それをif関数の判定を用いて、0>a>2（ここは会社によって違うため適宜変える）の時に、150円なり、170円なりすればいいと思うのですが、そのプログラムの構築の仕方が判りません。 html文はそのまま、js文（html文に直書き）は付け足しで行けると思います。どうすればいいでしょうか。能力なき者泣き寝入りせざるを得ませんか。 <select name="A"> <option value="">-- <option value="a0">a0 <option value="a1">a1 <option value="a2">a2 </select> <select name="B"> <option value="">-- <option value="b0">b0 <option value="b1">b1 <option value="b2">b2 </select> <p></p> <script> const mess = { 'a0b0': 'abcdefg', 'a0b1': 'hijklmn', }; document.addEventListener ('change', ()=> { let sels = document.querySelectorAll ('select[name="A"],select[name="B"]'); let key = [...sels].map (s=> s.value).join (''); document.querySelector('p').textContent = mess[key] || ''; }); </script>

質問日時: 2022/06/22 09:36 質問者: 福本英一

解決済

2

0
20

プルダウンから1個選んで、豆知識を出すプログラム。

論理上、jsを使えば、aを選んで、aの説明を表示させるプログラムを作成することはできるはずです。 https://muraumusic.com/javascript-lesson7/ それが↑の実装からわかります。これは、心理テストで、選択肢の中から1個を選び、その人の性格を当てるものです。この仕組みを使えばできるからです。のはずが、同じようにhtmlとcssのコードをコピーしてもできないのはどうしてですか。何が足りないのでしょう。自分は、例えば、りんごを選択したら赤い果物と答えが出てくるプログラムを作りたいです。

質問日時: 2022/06/21 17:27 質問者: 福本英一

解決済

2

0
21

jQueryでのレスポンシブが綺麗に動かない

media(); jQuery(window).on("resize", function(){ media(); }); function media() { // 横幅を取得 var width = jQuery(window).width(); if(width < 992) { jQuery('.pa').on('click', e=>{ jQuery(e.target).next('.pb').css('display', 'inline'); jQuery('.pb').click(function(){ jQuery('.pb').css('display','none') }) }); } } というコードで画面幅が992より小さくなった時にif文の中の動作をさせているのですが、ブラウザの幅を一回992より小さくすると再度992以上にしたときもそれが残って困っています。 if(width < 992) { jQuery('.pa').on('click', e=>{ jQuery(e.target).next('.pb').css('display', 'inline'); jQuery('.pb').click(function(){ jQuery('.pb').css('display','none') }) }); }else{ } のようにしてもダメでした。どこを改善すればいいかご教示お願いいたします。

質問日時: 2022/06/21 11:08 質問者: sakura393938

ベストアンサー

3

0
22

Json のキーと値の出力の違いについて

const user = [{ "id": 1, "name": "Yamada", "age": 22, "sex": "Male" }]; for(const [key, value] of Object.entries(user)) { console.log(key, value); console.log(`KEY is ${key} VALUE is ${value}`); } 上記コードなのですが、以下のようにコンソールに出力されます。 0 {id: 1, name: 'Yamada', age: 22, sex: 'Male'} KEY is 0 VALUE is [object Object] なぜ、異なる出力になるのかがわからずです。教えてください !

質問日時: 2022/06/14 20:22 質問者: i-d-a-i

ベストアンサー

2

1

←前の結果
1
2
3
次の結果→

【プログラミング・Web制作】に関するカテゴリ

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

【JavaScript】に関するコラム/記事

弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...
なぜ批判コメントをするの？その心理と向き合い方をカウンセラーにきいた！

今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...