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); })();
あなたの回答
tips
プレビュー