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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2490閲覧

関数内の関数の呼び出し

looseleaf

総合スコア7

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/11/04 02:00

以下のように記述し、後からDOMContentLoadedを書き足したのですが、
previous()とnext()が呼び出せなくなってしまいました。
関数内の関数を呼び出すにはどのようにすればいいのでしょうか?

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>test</title> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" href="style.css"> 7 <script type="text/javascript" src="script.js"></script> 8 </head> 9 <body> 10 <button type="button" onClick="previous()">←</button> 11 <button type="button" onClick="next()">→</button> 12 <div id="main"></div> 13 </body> 14</html>

javascript

1document.addEventListener("DOMContentLoaded", function () { 2var count = 0; 3 4 function previous() { 5 count--; 6 } 7 function next() { 8 count++; 9 } 10});

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

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

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

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

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

guest

回答3

0

ベストアンサー

関数内の関数はその関数スコープ内からしか参照できません。
HTML に変更を加えない前提ならば、previous, next をグローバルコード上に置いてください。
グローバル関数にするのを敬遠するならば、HTML に onclick を埋め込まず、DOMContentLoaded 内にて addEventListenerclick を定義して下さい。

投稿2015/11/04 02:05

think49

総合スコア18156

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

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

0

原因は、クロージャーという仕組みで、簡単にいえば「関数内で定義された識別子(変数名、関数名)は、関数内でのみ使用可能」というものです。
変数countも同じように関数の外からは見えないはずです。

逆に、関数の外で定義された識別子は、関数の中でも使用可能です。
これを利用し…。

javascript

1// 外で変数を定義 2var counter = {}; 3 4document.addEventListener("DOMContentLoaded", function () { 5var count = 0; 6 7 function previous() { 8 count--; 9 } 10 function next() { 11 count++; 12 } 13 14 // 外から見えるところに置く 15 counter.previous = previous; 16 counter.next = next; 17}); 18 19// 使用できる (DOMContentLoaded イベント発生後に限る) 20counter.previous(); 21counter.next();

面倒であればwindow.previousへの代入でも実現できます。
windowオブジェクトは自分で定義しなくてもグローバル空間に存在します。
その場合、使用する側はwindow.は省略可能です。

投稿2015/11/04 02:14

編集2015/11/04 02:15
tozjp

総合スコア790

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

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

0

関数内で宣言された変数や関数の<名前>は、その関数内だけで有効です。
外部から内部の関数を呼ぶためには、何らかの外部の名前を経由する必要があります。

投稿2015/11/04 02:10

otn

総合スコア84421

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問