JavaScript(4ページ目)

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

回答数

気になる

HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。一通り作っ

HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。一通り作ってみたのですが、上手く動かず… 間違い、改善点を指摘して頂きたいです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>パスワードの強化判定</title> <script> function Pasword(myForm) { let password; let strength = 0; //強さ text= document.querySelector('gate').value; if (password.length < 6) { return '短すぎます！' } // 文字数が7より大きければ+1 if (password.length > 7) { strength += 1; } // 英字の大文字と小文字を含んでいれば+1 if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { strength += 1; } // 英字と数字を含んでいれば+1 if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) { strength += 1; } // 記号を含んでいれば+1 if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) { strength += 1; } // 記号を2つ含んでいれば+1 if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) { strength += 1; } // 点数を元に強さ判定 if (strength < 2) { return '弱いです！'; } else if (strength == 2) { return 'まあまあ強いです！'; } else { return '強いです！'; } } </script> </head> <body> <form name="pswForm"> パスワードを入力する。<br> <input type="text" name="gate" value=""><br> <input type="button" value="判定" onclick="Pasword(pswForm)"> </form> </body> </html>

質問日時: 2022/10/19 01:41 質問者: wgdj

解決済

2

0
HTMLでJavaScriptを使用してプログラムを作ります。入力されたパスワードを取得して、パス

HTMLでJavaScriptを使用してプログラムを作ります。入力されたパスワードを取得して、パスワードの強化判定をするプログラムを作成したいです。 script内に書くif文はわかるのですが、入力されたパスワードを取得する方法がわかりません。なにを使えば良いですか？最終的に、テキストボックスにパスワードを入力→判定ボタンを押す→「強いです」などの文字を出したいです。

質問日時: 2022/10/18 01:05 質問者: wgdj

解決済

2

0
ブックマークレットについて

ブックマークレットで以下のようなコードを使っています。 javascript:window.open('https://www.○○○='+ getSelection(). toString()); 選択した文字列を加えて指定したURLに飛ぶブックマークレットです。ここから質問なんですが、このコードに現在日時から1ヶ月前をUNIX時間で加えて、指定したURLに飛ぶブックマークレットを作りたいのですが、どのようなメソッド、構文にすればいいかわかりません。例として、以下のようなURLになるようにしたい　※UNIX時間は現在日時 https://www.○○○1665282832選択した文字列参考になるWebページもあれば、それも教えていただけると助かります。よろしくお願いします。

質問日時: 2022/10/09 11:48 質問者: マリーノアール

ベストアンサー

2

0
正規表現について質問です。条件に合う場合はtrueを返したい

すいません質問があります。正規表現について質問です。条件に合う場合はtrueを返したいです。以下のURLがあります。 https://abc.com/detail/12345 以下の関数があります var checkProductPage = function() { var reg = /(abc.com\/details\/)(0-9]*$))/; var check = reg.test(window.location.href); return check } checkProductPage() この場合、上記関数を実行するとtrueを返します。さらに以下のURLがあります。 1. https://abc.com/detail/12345 ->true 2. https://abc.com/detail/12345xyz -> false 3. https://abc.com/detail/xyz12345 -> false 4. https://abc.com/detail/x12y345z -> false 5. https://abc.com/detail/12345?utm=12345 -> true 6. https://abc.com/detail/12345&utm=12345 -> false 上記に書いたとおりなのですが、1と5だけはtrueを返すようにして、それ以外のパターンはFalseを返すようにしたいです。先に書いた関数だと1はTrueですがそれ以外はすべてFalseです。以下のように書いてみたんですがそれでもダメでした。 var checkProductPage = function() { var reg = /(abc.com\/details\/)(0-9]*$)(\?.+)?$/; var check = reg.test(window.location.href); return check } checkProductPage() 1, 5 だけをTrueを返す関数を教えてほしいです。よろしくおねがいします。

質問日時: 2022/10/06 23:02 質問者: kemukemu2014

ベストアンサー

3

0
ブラウザの横幅に応じてとある画像（e.jpg）を画面いっぱいに表示できるようにしたいです。（写真の横

ブラウザの横幅に応じてとある画像（e.jpg）を画面いっぱいに表示できるようにしたいです。（写真の横幅がブラウザの横幅が変わるごとに変化する）必ずsetIntervalメソッド等を用いてブラウザの横幅を変えた際にリアルタイムに画像が変更されるようにしたいです。画像の幅をまず取得して、ブラウザの幅も取得し、ブラウザの幅が変化するごとに写真の幅も自動的にブラウザの横幅に合わせるようにしたいのですが分かりません。詳しい方回答をお願いします。

質問日時: 2022/10/06 21:17 質問者: ウィスク

解決済

1

0
JavaScriptでゲームプログラミングをしています。次のように画像に動きをつけたいのですが、ど

JavaScriptでゲームプログラミングをしています。次のように画像に動きをつけたいのですが、どのようにすれば良いでしょうか。まず、適当な大きさの円の画像とそれよりも小さい玉の画像を用意します。球を円の中にマウスで持ってきて、円の縁を内側から押し上げると、その動きに合わせてその部分が広がる？変形する？。球を遠ざけると円の形が戻る。非常にわかりづらいですが、画像を用意しました。わかる方教えていただけると嬉しいです。

質問日時: 2022/09/29 20:06 質問者: さくら9971

ベストアンサー

1

0
ローディングアニメーションのロゴがページを読み込んだ後でも消えません

ローディングアニメーションを入れたいと思い、調べて、以下のサイトに辿り着いて、サイトの一番下から２番目にある、「**跳ねるうさぎちゃん**」とういタイトルのローディングアニメーションのC◆DEOENで動く、HTML,css,jsの全てコピーして、起動してみたのですが、サイトが読み込めれると、グレー色の背景はちゃんと消えるのですが、その他のロゴ（ウサギや卵、横線）のロゴ等が **消えずに動き続けてしまいます。** このロゴもちゃんと消えるようにしたいです。多分javascriptの部分だと思うのですが、どう書いたらよいでしょうか？回答よろしくお願いいたします。 [一生見てられる...カワイすぎるローディングをCSSコピペで実装！【アニメーション】 - デシノン https://deshinon.com/2019/03/03/kawaii-loading-kopipe/ 跳ねるうさぎちゃん

質問日時: 2022/09/20 21:50 質問者: jwmdatjtga

ベストアンサー

1

0
WordPressのコンタクトフォーム７にて送信者の位置情報を送らせたい

WordPressのコンタクトフォーム７にて送信者の位置情報を送らせたいのですが、以下のコードを独自タグ作成し、コンタクトフォーム７にて利用出来るようにすることは出来ませんでしょうか？ <body> <button type="button" id="get-gps">位置情報取得</button> <p id="lat">緯度: </p> <p id="lon">経度: </p> <p id="address"></p> </body> <script> /** 変換表を入れる場所 */ var GSI = {}; const latEle = document.querySelector('#lat'); const lonEle = document.querySelector('#lon'); const addressEle = document.querySelector('#address'); const gpsButton = document.querySelector('#get-gps'); /** * 緯度経度を画面表示 */ const setGeoLoc = (coords) => { latEle.textContent = `緯度: ${coords.latitude}`; lonEle.textContent = `経度: ${coords.longitude}`; } /** * 緯度経度から住所を取得して表示 */ const getAddress = async (coords) => { // 逆ジオコーディング API const url = new URL('https://mreversegeocoder.gsi.go.jp/reverse-geocoder/LonLatToAddress'); url.searchParams.set('lat', coords.latitude); url.searchParams.set('lon', coords.longitude); const res = await fetch(url.toString()); const json = await res.json(); const data = json.results; // 変換表から都道府県などを取得 const muniData = GSI.MUNI_ARRAY[json.results.muniCd]; // 都道府県コード,都道府県名,市区町村コード,市区町村名に分割 const [prefCode, pref, muniCode, city] = muniData.split(','); // 画面に反映 address.textContent = `${pref} ${city} ${data.lv01Nm}`; }; /** * 位置情報 API の実行(イベントリスナ) */ gpsButton.addEventListener('click', () => { navigator.geolocation.getCurrentPosition( geoLoc => { setGeoLoc(geoLoc.coords); getAddress(geoLoc.coords); }, err => console.error({err}), ); }); </script> <script src="https://maps.gsi.go.jp/js/muni.js"></script> 

質問日時: 2022/09/14 23:28 質問者: qjcyp

解決済

2

0
GASでチェックボックスを一括offしたい

スプレッドシートで添付のようなチェックリストを作りました。チェックを複数(ランダム)に入れた後、それらのチェック全てを外すGASがわからないので教えてください。・GASでなくても可能ですが、あくまでGASにこだわりたい。・チェックは自分で入れるので、外すGASだけで良いです。・添付左上の水色リセットボタンを押すとチェックが外れるようにしたいです。・チェックボックスの間に所々空白があります。以下は他を参考にして自分で作ってみたGASですが、[▷実行]ができないので多分間違っていると思います。訂正、加筆して頂いても良いですし、新しく書いて頂いても構いません。 /** @OnlyCurrentDoc */ function uncheck(button) { let spreadsheet = SpreadsheetApp.getActiveSpreadsheet(); let sheet = spreadsheet.getSheetByName('musiclist'); sheet.activate(); let range = sheet.getRange('C3:C29'); range.uncheck(); 中段最後の'musiclist'はシートの名前です。

質問日時: 2022/09/13 19:54 質問者: rocken

ベストアンサー

1

0
Javascript で、0000 から 9999 までの表を作りたい。

HTML の <table> 系に出力するものとして、 0000 から 9999 を作りたいが、 1. 縦軸に各桁の同じ合計値を並べたい。例 0010 0019 0028 2. 桁に表示されている数値を最小値でまとめたい例 0001 があるなら、次の値は不用。0010 0100 1000 Javascript だとどのようなプログラムになりますか ? ぜひ、教えてください !

質問日時: 2022/09/11 14:47 質問者: i-d-a-i

ベストアンサー

6

0
vertical sliderをautoplayしたい

以下を参考に作ったVertical Sliderを読み込み時にautoでスライドできるようにしようとしています。 https://www.learningrobo.com/2022/03/vertical-split-image-slider-using-html.html 現在、参考ページと同様に、クリックすると左右のスライドがそれぞれ上下にスライドします。これをボタンクリックを残したまま、読み込み時に自動でスライドできるようにしたいと思っています。scriptに2か所追加をいたしましたが、ボタンを押してもスライドせず、読み込み時も自動でスライドしません。何か解消方法などアドバイス頂けますと幸いです。どうぞよろしくお願いいたします。〇HTML <div class="slider-container"> <div class="left-slide"> <div style="background-color: #2c9f45"> <h4>TEST</h4> </div> <div style="background-color: #c5080b"> <h4>TEST</h4> </div> <div style="background-color: #0386ad"> <h4>TEST</h4> </div> <div style="background-color: #001100"> <h4>TEST</h4> </div> </div> <div class="right-slide"> <div class="bg-image1"></div> <div class="bg-image2"></div> <div class="bg-image3"></div> <div class="bg-image4"></div> </div> </div> 〇JS /*↓↓↓↓追加部分↓↓↓↓↓*/ window.onload = function() { /*↑↑↑↑追加部分↑↑↑↑*/ const sliderContainer = document.querySelector(".slider-container"); const slideRight = document.querySelector(".right-slide"); const slideLeft = document.querySelector(".left-slide"); const upButton = document.querySelector(".up-button"); const downButton = document.querySelector(".down-button"); const slidesLength = slideRight.querySelectorAll("div").length; let activeSlideIndex = 0; slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`; /*↓↓↓↓追加部分↓↓↓↓↓*/ for( ; ; activeSlideIndex++;){ $(slideRight).slideDown("normal"); $(slideLeft).slideUp("normal"); 　　　　} }; /*↑↑↑↑追加部分↑↑↑↑*/ const changeSlide = (direction) => { const sliderHeight = sliderContainer.clientHeight; if (direction === "up") { activeSlideIndex++; if (activeSlideIndex > slidesLength - 1) activeSlideIndex = 0; } else if (direction === "down") { activeSlideIndex--; if (activeSlideIndex < 0) activeSlideIndex = slidesLength - 1; } slideRight.style.transform = `translateY(-${ activeSlideIndex * sliderHeight }px)`; slideLeft.style.transform = `translateY(${ activeSlideIndex * sliderHeight }px)`; }; upButton.addEventListener("click", () => changeSlide("up")); downButton.addEventListener("click", () => changeSlide("down")); 〇CSS .slider-container { position: relative; overflow: hidden; width: 100%; min-height: 100vh; } .left-slide { height: 100%; width: 35%; position: absolute; top: 0; left: 0; transition: transform 0.5s ease-in-out; } .left-slide>div { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 3em; } .left-slide h4 { font-size: 22px; line-height: 32px; color: #fff; font-weight: 100; text-transform: uppercase; } .right-slide { height: 100%; position: absolute; top: 0; right: 0; width: 65%; transition: transform 0.5s ease-in-out; } .right-slide>div { background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; width: 100%; }

質問日時: 2022/08/25 14:47 質問者: apricot1101

ベストアンサー

2

0
JavaScriptでキオスクモードを実現するには？

タッチスクリーンパネル付きのデバイス（タブレット等）で、タッチ操作を禁止したい場合、例えば次のようなコードを初期化時に書けば良さそうですが、一部の要素に限って許可したい場合は、どのように書くと良いでしょうか？ window.addEventListener('touchmove', function(ev) { 　ev.preventDefault(); }... ※他の方法でも構いません。 ※いわゆる「キオスクモード」化を少し調べた処、色々と彼方此方に対策しないといけないようで、上手い手が無いか質問させてもらいました。 ※当面、Android端末が対象です。

質問日時: 2022/08/19 21:25 質問者: davidfox

ベストアンサー

1

1
javaScriptで画面に値を入れるには

会社で Google Chrome で使っているクラウドシステムがあるのですが、画面に入力する日付のデフォルト値がいつも月初になっていて、そこにいつも上期（４月１日）を入力しています。その後に情報を取得する検索ボタンを押しています。（１日１回）めんどくさいので、拡張機能を自作しgetElementById で日付フィールドのオブジェクトを取得日付フィールドの Value に値をセットするとめでたく日付がセットされたのですがその後検索ボタンを押してもデフォルト日付の情報を表示します。さらにチェックボックスのオブジェクトを取得し、 checked = true; を設定することで、画面上はチェックされたましたが、やはり検索で出てくるデータは、チェックされない時のデータです。ここでjavaScriptでセットした値をなぞるように、キーボードからあえて同じ値を入力し、チェックボックスも一度クリックしてチェックを外して、改めてチェックすると、希望のデータを表示します。このような場合、どうすれば全てjavaScriptでセットした内容を画面の値にすることができるでしょうか。取得したオブジェクトにクリックメソッドを発行してもダメなようでしたし、あえて、キーボードで入力したかのようなメソッドを発行すると言う手も、考えてみましたが、うまく行くようには思えません。何か手はあるでしょうか。アドバイスをいただきたいと思います。どうぞ、よろしくお願いします。

質問日時: 2022/08/14 12:27 質問者: VT250F

ベストアンサー

1

0
jsonテキストデータの並び替えができるサービスを教えてください

下記のようなjsonのテキストデータがあった場合、それを貼り付けたらキーの昇順でソートしてくれるサービスがあれば教えてください。サービスがなくても簡単に実現できる方法でもかまいません。どうぞ宜しくお願いいたします！m(_ _)m ------------------jsonデータ---------------------- { "bbb": { "c": "c", "b": "b", "a": "a" }, "aaa":{ "b": "b", "c": "c", "a": "a" } } } ------------------------------------------------- ↓のように並び変わってほしい ------------------------------------------------- { "aaa": { "a": "a", "b": "b", "c": "c" }, "bbb":{ "a": "a", "b": "b", "c": "c" } } } -------------------------------------------------

質問日時: 2022/08/05 20:16 質問者: Hawk1985

ベストアンサー

2

1
functionはhtmlやjsに2度使えませんか

functionはhtmlやjsに2度使えませんか。要は、同じhtml分や、js内に2度使う、あるいは、複数jsを作って、その全部にfunctionキーを設定できるかと言うことです。具体的には、 function sample() { //ここに処理を書いていく } function sample2() { //ここに処理を書いていく } といった使い方はできないかということですがどうでしょうか。

質問日時: 2022/08/03 19:55 質問者: 福本英一

ベストアンサー

2

0
jQueryでのドラッグアンドドロップについて

2つの画像をドロップして決まった枠にドロップするように以下コードを作成しました。更に以下のように動作するようにしたいです ①ドロップされた時に画像はそのままで表面に〇等の画像を表示させるようにしたい ②２つとも決まった枠にドロップされた後に正解等のポップアップを表示させたい上記要件を満たすようにするにはどのようにすればいいのでしょうか。＜コード＞＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>test</title> <!jQueryの定義> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> </head> <body> <div class="draggable1"><img src="画像"></div> <div class="draggable2"><img src="画像"></div> <div class="droppable1"></div> <div class="droppable2"></div> <div class="correct"><img src="〇をつけたい"></div> </body> <style> .draggable1 { width: 60px; height: 60px; top: 200px; right: 550px; z-index: 100; position: absolute; text-align: center; } .droppable1 { background-color: white; width: 60px; height: 60px; padding: 0.5em; margin: 10px; border: solid 5px black; position: absolute; top: 200px; left: 550px; z-index: 1; } .draggable2 { width: 60px; height: 60px; top: 400px; right: 550px; z-index: 100; position: absolute; text-align: center; } .droppable2 { background-color: white; width: 60px; height: 60px; padding: 0.5em; margin: 10px; border: solid 5px black; position: absolute; top: 400px; left: 550px; z-index: 1; } </style> <script> $(function () { $(".draggable1").draggable({ snap: "droppable1", snapMode: "inner", revert: "invalid", opacity: 0.7, cursor: "move" }); $(".droppable1").droppable({ accept: '.draggable1', drop: function (e, ui) { $(this) .find("p"); var $srcObj = $(ui.draggable[0]); $srcObj.offset($(this).offset()); return false; } }); }); $(function () { $(".draggable2").draggable({ snap: "droppable2", snapMode: "inner", revert: "invalid", opacity: 0.7, cursor: "move" }); $(".droppable2").droppable({ accept: '.draggable2', drop: function (e, ui) { $(this) .find("p"); var $srcObj = $(ui.draggable[0]); $srcObj.offset($(this).offset()); return false; } }); }); </script> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

質問日時: 2022/07/30 09:10 質問者: いちげんさん

ベストアンサー

1

1
【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい

<script> $(function() { $("#button1").click(function() { $(".twiter-box").addClass('twiter-box-after'); }); }); </script> 上記のscriptで、botton1のidが付いたボタンをクリックすると、.twiter-boxの要素に.twiter-box-afterが付与されることは確認しています。例：<div class="twitter-box"> → <div class="twitter-box twiter-box-after"> これをボタンクリック時に、複数のclassに対してそれぞれclassを付与したいのですが、どのように変更すればいいでしょうか。具体的には <div class="twitter"><div class="twitter-box"></div></div> ↓ <div class="twitter twitter2"><div class="twitter-box twitter-box-after"></div></div> のような形です。色々試しましたが上手く動作せず困っています。

質問日時: 2022/07/29 20:52 質問者: nukokok

ベストアンサー

1

0
jsで、switch文で書かれた分をif文にできませんか。

jsで、switch文で書かれた分をif文にできませんか。以下はその文章です。できるなら、全文をお書きください。 <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>

質問日時: 2022/07/28 15:10 質問者: 福本英一

解決済

1

0
jsでifの返り値にgetelementbyidは使えませんよね。

jsでifの返り値にgetelementbyidは使えませんよね。あきらめるしかないですよね。

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

ベストアンサー

1

0
switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。

switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 switch文のswitch(n)の部分を複数の値にできますでしょうか。もし無理ならばif文に変えてほしいです。以下は変えてほしい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 17:18 質問者: 福本英一

解決済

1

0
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
JavaScriptで「〇以上▲まで」の書き方

フォーマットは同じで、コンテンツ数がページによって変動するページを作成しています。コンテンツの量によってページの高さを自動で変動し、多ければ「もっと見るボタン」で対応したいと思っています。条件式は 2個以下は高さ00px 3個以上10個までは高さ000px 11個以上は高さ0000px。としたいのですが、どうもうまく動きません。書き方として、 if(2>= hoge){ 高さを指定する構文 }else if(3<= hoge && hoge<= 10){ 高さを指定する構文 }else if (11 <=hoge){ 高さを指定する構文 } で間違っていないでしょうか？ 2個目のifで「 lenJs<= 10」とすると3個目のifと同じになってますか？初歩的な質問で申し訳ありませんが、どなたかご教授いただければ幸いです。

質問日時: 2022/07/20 14:44 質問者: kotamagokotama

ベストアンサー

1

0
JavaScriptのif文について

JavaScriptを勉強しており、現在は人が作ったものをコピペで使用し、ほんの少し自分でいじるといったことしか今はできませんそしてそこで質問なのですが if文のいわゆる偽と呼ばれるelseの部分を複数導入したいのですが仕様上１つしか入れられないのではと思いますようするに偽のパターンを２つ導入したいのですが何かやり方があるのでしょうか？大変お手数ですがご教授よろしくお願い致します

質問日時: 2022/07/19 10:35 質問者: 匿さま

解決済

3

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

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
プログラムがうまく動きませんレビューお願いします

<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
以前の質問だと、どの条件でも配列が表示されてしまいます。

<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
セレクトボックスで配列を呼び出したい。

以下は、セレクトボックス1と2でそれぞれ松山市と高松市を選んだら、配列を呼び出すことができるプログラムです。 <script type="text/javascript"> function change() { if (document.getElementById("selbox")) { selboxValue = document.getElementById("selbox").value; if (selboxValue == "1") { //文字1を表示 document.getElementById("txt1").style.display = ""; //文字2を非表示 document.getElementById("txt2").style.display = "none"; } else if (selboxValue == "2") { //文字2を表示 document.getElementById("txt2").style.display = ""; //文字1を非表示 document.getElementById("txt1").style.display = "none"; } } } 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">ランク  しかし、僕はもうちょっと踏み込んだところまで行きたいのです。ブラウザに表示させたいのです。 document.writeで書くと別のページに遷移してしまうし、一方でalertだと文章が読みづらいです。ブラウザに配列を表示するものは以下のプログラムですが、 <script> var todo = ['メール確認', '日報送信', 'スケジュール確認', '資料作成']; for (var i = 0; i < todo.length; i++) { 　var todoList = document.createElement('li'); 　todoList.textContent = todo[i]; 　document.getElementById('list').appendChild(todoList); } </script> ただ、これだとセレクトボックスで松山市と高松市を選んだ場合の表示ができません。どうしたらいいのでしょうか。どうしたらいいのでしょうか。

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

解決済

1

0
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
jQueryでのドラッグアンドドロップについて

決まった文字を入れるとBOXに入り違う文字が入ると元の位置に戻る、というようなページを作成したいです。例えばドラッグ可能な選択肢が”上”、”下”、”中”、”右”、”左”とあり。５つのBOXを用意しそれぞれ決まった文字しかドロップできないようにする。例えばBOX1は”上”しかドロップできない、BOX2は”下”しかドロップできない、等 jQueryとUIを使用すれば可能かと思い、色々調べていたところ以下のサイトを見つけました。 https://plnkr.co/edit/Huo1VGFFC8xH7A9XkQWQ?p=preview&preview 上記ページは数字を決まった箇所に入れ、すべて正解するとウィンドウが表示されるのですが日本語にしようとすると上手く動きませんでした。 ①日本語でも動作するようにしたい ②ドロップ先のBOXの位置をそれぞれバラバラに動かせるようにしたい上記の要件を満たすにはどのように修正すればいいでしょうか。作成したコードは以下となります。 <!doctype html> <html lang="en"> <head> <title>Drag-and-Drop Number Cards Game</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <script type="text/javascript"> var correctCards = 0; $( init ); function init() { // Hide the success message $('#successMessage').hide(); $('#successMessage').css( { left: '580px', top: '250px', width: 0, height: 0 } ); // Reset the game correctCards = 0; $('#cardPile').html( '' ); $('#cardSlots').html( '' ); // Create the pile of shuffled cards var numbers = [ '上', '下', '中', '右', '左' ]; numbers.sort( function() { return Math.random() - .5 } ); for ( var i=0; i<5; i++ ) { $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( { containment: '#content', stack: '#cardPile div', cursor: 'move', revert: true } ); } // Create the card slots var words = [ '上', '下', '中', '右', '左' ]; for ( var i=1; i<=5; i++ ) { $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( { accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop } ); } } function handleCardDrop( event, ui ) { var slotNumber = $(this).data( 'number' ); var cardNumber = ui.draggable.data( 'number' ); // If the card was dropped to the correct slot, // change the card colour, position it directly // on top of the slot, and prevent it being dragged // again if ( slotNumber == cardNumber ) { ui.draggable.addClass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); correctCards++; } var all_ingredients = []; $('#cardSlots > div').each(function(i){ if($(this).hasClass('ui-droppable-disabled')){ var ingredient = $(this).text(); all_ingredients.push(ingredient); } }); console.log(all_ingredients); // If all the cards have been placed correctly then display a message // and reset the cards for another go if ( correctCards == 5 ) { $('#successMessage').show(); $('#successMessage').animate( { left: '380px', top: '200px', width: '400px', height: '100px', opacity: 1 } ); } } </script> </head> <body> <div id="content"> <div id="cardPile"> </div> <div id="cardSlots"> </div> <div id="successMessage"> <h2>正解！</h2> <button onclick="init()">もう１回</button> </div> </div> </body> </html>

質問日時: 2022/07/07 21:04 質問者: いちげんさん

ベストアンサー

1

1
JavascriptからSQLへ繋ぎ方が分からない

年月を設定した2段階プルダウンを作成しているのですが、JAVAを深く触ったことがない為アドバイス頂きたいです。設計について JAVA→JSONで$(配列)に変える→archive.php→SQL→JSON→JAVAという流れで良いでしょうか？ ※参考サイト https://blog.ver001.com/javascript-select-onchange-display-none/ ※該当ファイル(strorage.phpはcronです。) https://wandbox.org/permlink/fhJ2DJMkP50tbNRn <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> <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'; } } }); </script>

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

解決済

3

0
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
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
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
GoogleChartの組織図について

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

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

ベストアンサー

3

0
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
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
javascriptでif文と配列を組み合わせて運賃プログラムを完成させたいです。

以下のようなjavascrptの文があります。 function kotae() { ten=0 if((f.q1.value == "中百舌鳥"&&f.q2.value == "深井")||(f.q1.value == "深井"&&f.q2.value == "中百舌鳥")) {f.q1.style.backgroundColor="aqua ";ten = ten + 3.7} else if((f.q1.value == "中百舌鳥"&&f.q2.value == "深井")||(f.q1.value == "深井"&&f.q2.value == "中百舌鳥")) {f.q1.style.backgroundColor="aqua ";ten = ten + 7.8} else f.q1.style.backgroundColor="red" f.tokuten.value=ten if(f.tokuten.value >0){f.rank.value = '170(90)'} else if(f.tokuten.value >2){f.rank.value = '190(100)'} else if(f.tokuten.value >4){f.rank.value = '210(110)'} else if(f.tokuten.value >6){f.rank.value = '230(120)'} else if(f.tokuten.value >8){f.rank.value = '250(130)'} else if(f.tokuten.value >8){f.rank.value = '270(140)'} } f.tokuten.value>0や2という数字は、それぞれ0km以上の運賃、2㎞以上の運賃という意味です。それぞれ、170円、190円の定期運賃となります。但し、この方法ですと、定期運賃だけしか表記することができません。 if文と配列を組み合わせて、{定期運賃、回数運賃…という風な表記をしたいのですが、どのようにしたらよいのでしょうか。ifの中に連想配列を組みたいです。

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

解決済

1

0
セレクトボックスを選んで点数を出した後、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
質問すいません。 javascriptの質問で、人物4名、名前と年齢をオブジェクトと指定し人物1人

質問すいません。 javascriptの質問で、人物4名、名前と年齢をオブジェクトと指定し人物1人1人に対して 20歳以上なのか、20歳未満の場合後何年で20歳になるかの判定、処理をする。 ○さんの年齢は○歳です。20歳まで○年です。 (あるいは)20歳を超えています。 ○さんの年齢は○歳です。20歳まで○年です。 (あるいは)20歳を超えています。 ○さんの年齢は○歳です。20歳まで○年です。 (あるいは)20歳を超えています。 ○さんの年齢は○歳です。20歳まで○年です。 (あるいは)20歳を超えています。 for文、while文どちらかを使用することによって ○さんの年齢は○歳です。20歳まで○年です。 (あるいは)20歳を超えています。という文章を出力する処理。 20歳以上なのかどうか判定する処理。 20歳未満の場合、あと何年で20歳になるか計算する処理。という4名の人物に対する処理を一つにまとめるにはどうしたら良いでしょうか？関数等使っていろいろやってみたのですが、なかなかうまく出来ずアドバイス頂けたら助かります。

質問日時: 2022/06/26 22:08 質問者: みずなす。

解決済

2

0
助けてください‼︎ javascriptで質問があります。配列を定義して、 29342、45342

助けてください‼︎ javascriptで質問があります。配列を定義して、 29342、45342、23419283、148458552 4つの数字が格納された配列を定義し繰り返しと条件分岐を用いて、ひとつひとつの数字に対して、偶数か奇数か 7で割った余はいくつになるかを判定、処理を行い繰り返しなどで 4つの数字をそれぞれ行い、処理を一つにまとめるにはどのようにすれば良いでしょうか。最終的に、 29342は［奇数/偶数］です。7で割ったあまりは［数値］です。 45342は［奇数/偶数］です。7で割ったあまりは［数値］です。 23419283は［奇数/偶数］です。7で割ったあまりは［数値］です。 148458552は［奇数/偶数］です。7で割ったあまりは［数値］です。という出力がなされる形にしたいです。ご助力、アドバイス頂けたら助かります。

質問日時: 2022/06/26 22:06 質問者: みずなす。

解決済

3

0
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
jsでは、関数を実行した後に関数を実行する挙動はできない〇か×か。

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

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

ベストアンサー

2

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

要するに、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
変数のスコープの問題？

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
電車の運賃を出すプログラムを作っています。

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
プルダウンから1個選んで、豆知識を出すプログラム。

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

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

解決済

2

0
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
jQueryで同じクラス名のものを別物として扱いたい

<tr> <td style="width: 100px;"> <img class="pa" src="https://1.jpg"/> <img class="pb" src="1a.jpg"/> </td> <td style="width: 100px;"> <img class="pa" src="2.jpg"/> <img class="pb" src="2a.jpg"/> </td> <td style="width: 100px;"> <img class="pa" src="3.jpg"/> <img class="pb" src="3a.jpg"/> </td> </tr> のようなhtmlと jQuery('.pa').click(function(){ jQuery('.pb').css('display','inline') }) のようなjQueryと .pb {display:none;} のようなCSSを使って.paがクリックされたときに.pbの画像を表示させたいと考えているのですが 1.jpgをクリックすると1a.jpg,2a.jpg,3a.jpgがすべて表示されます。現在作っているものの事情により、そこのクラス名を変えたりidを利用したりが出来ない状況なのですが、どのpaがクリックされたか判別し、その直後のpbのCSSのみを変更するような方法はありますか？ご教示お願いいたします。

質問日時: 2022/06/17 14:14 質問者: sakura393938

ベストアンサー

1

0

←前の結果
1
2
3
4
5
6
7
8
9
10
11
...
20
次の結果→

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

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

質問する（無料）

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

弁護士が解説！あなたの声を行政に届ける「パブリックコメント」制度のすべて

社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

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

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

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