Q&A
選択したページ数と項目数を表示したいのですが、RefarenceErrorになります。
●質問内容
selectitem関数内のonclick='itemlist'を実行した場合、mが存在せず、RefarenceErrorになります。
mはpagelist関数内の即時関数に紐付いているため(?)、selectitem関数内のonclick='itemlist'を実行した時には効力が無くなっているのでしょうか？
また何処を修正すれば、下記●やりたい事のように表示されるのでしょうか？
(※語彙力が無くて申し訳ございません。)
●やりたい事
1.1、2、3、4ページの一覧から任意の値を選択し、選択した値をテスト結果としてdiv id="testpage"に表示させる。
なお、その際、div id="testitem"には1項目を表示させる。
2.1、2、3、4項目の一覧から任意の値を選択し、選択した値をテスト結果としてdiv id="testitem"に表示させる。
なお、その際、div id="testpage"には上記1で選択したページを表示させる。
3.なお、初期値はdiv id="testpage"には1ページ、div id="testitem"には3項目が表示される様にする。
(例: 初期値としてdiv id="testpage"に1ページを表示、div id="testitem"に3項目を表示。
1ページを選択した場合div id="testpage"に1ページを表示、div id="testitem"に1項目を表示。
2項目を選択した場合、div id="testpage"に1ページを表示、div id="testitem"に2項目を表示。
2ページを選択した場合div id="testpage"に2ページを表示、div id="testitem"に1項目を表示。
)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> </head> <body> テスト結果『 <div id="testpage">ページ</div> <div id="testitem">項目</div> 』が選択されました。 <div id="pagearea"></div> <div id="itemarea"></div> <script> const pageitem =[ [[1,1],[1,2],[1,3],[1,4]], //1ページ [[2,1],[2,2],[2,3],[2,4]], //2ページ [[3,1],[3,2],[3,3],[3,4]], //3ページ [[4,1],[4,2],[4,3],[4,4]], //4ページ ]; //ページリストを作成する関数 pagelist(); function pagelist(){ const result= document.getElementById("pagearea"); result.classList.add("11","22","33","44"); result.innerHTML = "<ul>" //+ +"<li onclick='displaypage(pageitem[0][0])'>" +'1ページ' +"</li>" +"<li onclick='displaypage(pageitem[1][0])'>" +'2ページ'+"</li>" +"<li onclick='displaypage(pageitem[2][0])'>" +'3ページ'+"</li>" +"<li onclick='displaypage(pageitem[3][0])'>" +'4ページ'+"</li>" +"</ul>"; var n =(function(a,b){ var defo =[a,b]; return defo; }(1,3)); //初期値 displaypage(n); } //選択したページを表示する関数 function displaypage(p){ const result = document.getElementById("testpage"); result.textContent = p[0] + 'ページ'; selectitem(p); } //項目リストを作成する関数 function selectitem(m){ const items= document.getElementById("itemarea"); items.innerHTML = "<ul>" +"<li onclick='itemlist(pageitem[m][0])'>" +1+'項目' +"</li>" +"<li onclick='itemlist(pageitem[m][1])'>" +2+'項目' +"</li>" +"<li onclick='itemlist(pageitem[m][2])'>" +3 +'項目'+"</li>" +"<li onclick='itemlist(pageitem[m][3])'>" +4 +'項目'+"</li>" +"</ul>"; var w =(function(a,b){ var defo =[a,b]; return defo; }(m[0],m[1])); //初期値 itemlist(w); } //選択した項目を表示する関数 function itemlist(v){ const result = document.getElementById("testitem"); result.textContent = v[1]+'項目'; } </script> </body> </html>
回答3件
0
ベストアンサー
こうでは？（下記場所だけではないが省略）
js
1// "<li onclick='itemlist(pageitem[m][0])'>" 2// ↓ 3 "<li onclick='itemlist(pageitem[" + m + "][0])'>"
投稿2019/11/12 06:42
総合スコア69596
0
selectitem(m) 関数内で 記述されている li[onclick] の記述ではないでしょうか？
javascript
1/* 2"<li onclick='itemlist(pageitem[m][0])'>" + 1 + '項目' + "</li>" 3 -------------------------------=------- ----- ------ 文字列 4 pageitem配列内のインデックスで数値にするべき? 5 */ 6 7function selectitem(m){ 8 let pg = m[0]-1; 9 10 const items= document.getElementById("itemarea"); 11 items.innerHTML = "<ul>" + 12 "<li onclick='itemlist(pageitem["+pg+"][0])'>" + 1 + '項目' + "</li>" + 13 "<li onclick='itemlist(pageitem["+pg+"][1])'>" + 2 + '項目' + "</li>" + 14 "<li onclick='itemlist(pageitem["+pg+"][2])'>" + 3 + '項目' + "</li>" + 15 "<li onclick='itemlist(pageitem["+pg+"][3])'>" + 4 + '項目' + "</li>" + 16 "</ul>"; 17 18 var w =(function(a,b){ 19 var defo =[a,b]; 20 return defo; 21 }(m[0],m[1])); //初期値 22 23 itemlist(w); 24} 25
投稿2019/11/12 06:50
総合スコア5434
0
こんにちは。取り急ぎ、以下の部分を修正してみるといかがでしょうか？
修正前
var n =(function(a,b){ var defo =[a,b]; return defo; }(1,3)); //初期値
修正後
追記
申し訳ありません。修正前の書き方に特に問題はありませんので、上記の回答は取り消します。また何か気がついた点あれば回答します。
投稿2019/11/12 06:03
編集2019/11/12 06:36
総合スコア9058
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/12 07:08