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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

3回答

168閲覧

JavaScriptの即時関数について

tetsu777

総合スコア39

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2019/11/12 05:38

選択したページ数と項目数を表示したいのですが、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>

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

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

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

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

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

guest

回答3

0

ベストアンサー

こうでは?(下記場所だけではないが省略)

js

1// "<li onclick='itemlist(pageitem[m][0])'>" 2// ↓ 3 "<li onclick='itemlist(pageitem[" + m + "][0])'>"

投稿2019/11/12 06:42

kei344

総合スコア69366

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

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

tetsu777

2019/11/12 07:08

早速のご回答ありがとうございます。 無事解決致しました。
guest

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

AkitoshiManabe

総合スコア5432

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

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

0

こんにちは。取り急ぎ、以下の部分を修正してみるといかがでしょうか?

修正前

var n =(function(a,b){ var defo =[a,b]; return defo; }(1,3)); //初期値

修正後

追記

申し訳ありません。修正前の書き方に特に問題はありませんので、上記の回答は取り消します。また何か気がついた点あれば回答します。

投稿2019/11/12 06:03

編集2019/11/12 06:36
jun68ykt

総合スコア9058

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問