質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

スコープ

スコープとは、プログラム内で変数名など、参照可能な有効範囲のことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

348閲覧

getパラメーターの値をもとに、受信側のjsでその値に合った画像を条件分岐で表示させたい

of_the_Europa

総合スコア66

GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

スコープ

スコープとは、プログラム内で変数名など、参照可能な有効範囲のことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/01/22 12:36

selectで渡されたgetパラメーターの値をもとに、受信側のjsでその値に合った画像を条件分岐で表示させたいのですが、うまくいきません。
Devtoolsでエラーはなく、setAttributeで処理をかけた変数などもコンソールでは何も表示されなかったため、何が原因なのかよく分かりませんでした。
またこれは別の質問になるかもしれませんが、変数はグローバルスコープの状態でなければコンソールで出力することはできないのでしょうか? 例えばクエリのデータをコンソールにかけるとき、関数の中では出力されませんが、グルーバルの場合は出力されます。画像の表示もそのようなローカルとグローバルの違いによって表示されないのかと疑っているのですが、その可能性はあるのでしょうか?
どなた様かお力をいただけたら幸いです。
パラメーターのデータの受け取りはうまくいっている気はするのですが、受信側だけでなく送信側のjsコードも一応下記に載せてあります。

soushin.js

(()=> { //optionのvalue値を取得する const getListbox = function(){ const result = []; let elems = document.getElementById('partHuman').options; for(let i =0; i < elems.length; i++){ if(elems[i].selected){ result.push(elems[i].value); } } return result; } //value値が再読み込みされた際にチェックする document.getElementById('partHuman').addEventListener('change', function(){ console.log(getListbox('partHuman')); }, false) //valueのデータがエンコーディングされて受信側に受け渡される window.onload = function(){ document.getElementById("sendButton").onclick = function(){ location.href = "index2.html?data=" + encodeURIComponent(getListbox('partHuman')); } } })();

jushin.js

(()=> { const messe = document.getElementById("message"); window.onload = function(){ let dataPara = location.href.split("?")[1]; let text = dataPara.split("=")[1]; //エンコード解除 messe.innerHTML = decodeURIComponent(text); } //Getパラメーターの値を取得する let params = (new URL(document.location)).searchParams; let data = params.get('data'); console.log('data:', data); messe.addEventListener('onload', function(e){ //画像を用意させる let img = new Image(); let imageA = img.setAttribute('src', '../img/Aさん.png'); let imageB = img.setAttribute('src', '../img/Bさん.png'); let imageC = img.setAttribute('src', '../img/Cさん.png'); let imageD = img.setAttribute('src', '../img/Dさん.png'); //問題の条件分岐  //クエリの「 ?data=Asan 」などと同じ意味合い if(data == 'Asan'){ return imageA }else if(data == 'Bsan'){ return imageB }else if(data == 'Csan'){ return imageC }else{ return imageD } }, false); })();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問