入れ子になったonclickはどうしたらいいですか？

Question

onclickをHTMLに書くとき、JS側で入れ子になっていたら発動しませんでした。

これはどのように解決するものなのでしょうか？

<div id="button" onclick="inner();">ボタン</div>

function outer(){

  function inner(){
    alert('押しましたね？');
  }

  alert('ようこそ！');

}
outer();

ページにアクセスしたら「ようこそ！」が表示され、ボタンを押すと「押しましたね？」が表示されるようにしたいのですが…
初歩的な質問ですみません。

###補足
ちなみに次のような対処でなくて、あくまで入れ子の状態のまま、HTMLのonclickを使いたい。という目的です。

$('#button').on('click', function() {
  alert('押しましたね？');
});

Comments

[m.ts10806]

わざわざそうしたいということは何らかの目的（または課題）があるのでしょうか？

[eaconian]

はい、ただひどく個人的な事情ですので割愛させて頂きます。

Answer 1

近い形だとこうでしょうか？

<script>
function outer(){
  alert('ようこそ！');
  this.inner=function(){
    alert('押しましたね？');
  }
}
var o=new outer();
</script>
<div id="button" onclick="o.inner();">ボタン</div>

Comments

[eaconian]

こちらも良いですね。ありがとうございます。

[eaconian]

yambejpさま、おはようございます。今回ご回答の皆さまに僭越ながらお願いがございます。

今回の質問ですが、後に https://teratail.com/questions/146752 の質問にも関連させられるつもりでおりました。

同様にクリックイベントの入れ子（今回とは違いjQueryの「.on('click', function() {」ですが）という話なのですが思うようにできず、何か良いお知恵を拝借させて頂けませんでしょうか。

Answer 2

あくまで入れ子の状態のまま、HTMLのonclickを使いたい。という目的です。

なぜそのようなことをしたいのでしょうか。

onclickで関数を使うには、それがグローバルとなっていなければなりません。内側でwindow.inner = inner;とすれば一応はできますが、理由次第ではこれが不適当かもしれません。

Comments

[eaconian]

ありがとうございます。理由は長いので割愛させてください。アドバイス感謝致します。

Answer 3

ようするに、何としてもグローバル変数にしたいのですね。
返り値で受け取ったり、

var inner = (function outer () {
  alert('ようこそ！');
  
  return function inner(){
    alert('押しましたね？');
  }
}());

グローバルオブジェクトのプロパティにします。

(function outer () {
  alert('ようこそ！');
  
  Function('return this')().inner = function inner(){
    alert('押しましたね？');
  };
}());

しかしながら、グローバル変数は衝突の危険性がある為、基本的に推奨されません。

Re; eaconian さん

Comments

[eaconian]

まったくない発想でした。ありがとうございます。

[eaconian]

think49さま、おはようございます。

今回の質問ですが、後に https://teratail.com/questions/146752 の質問にも関連させられるつもりでおりました。

同様にクリックイベントの入れ子（今回とは違いjQueryの「.on('click', function() {」ですが）という話なのですが思うようにできず、何か良いお知恵を拝借させて頂けませんでしょうか。

Answer 4

入れ子を直接呼び出すのは難しい（というかこの構造ではできなさそう）ので、両方親を呼び出して引数で切り替えですかね。

<div id="button" onclick="outer(false);">ボタン</div>

function outer(f){
   if(!f){
     return inner();   
   }
  function inner(){
    alert('押しましたね？');
  }
  alert('ようこそ！');
}
outer(true);

Comments

[eaconian]

なるほど、この工夫でも良いのですね。ありがとうございます。

[eaconian]

mts10806さま、おはようございます。お世話になっております。

今回の質問ですが、後に https://teratail.com/questions/146752 の質問にも関連させられるつもりでおりました。

同様にクリックイベントの入れ子（今回とは違いjQueryの「.on('click', function() {」ですが）という話なのですが思うようにできず、何か良いお知恵を拝借させて頂けませんでしょうか。

追加でお手数おかけして申し訳ございません…。

Answer 5

function outer(){
  alert('ようこそ！');
}
outer();
function inner(){
  alert('押しましたね？');
}
```もしくは
```js
alert('ようこそ！');
function inner(){
  alert('押しましたね？');
}

Comments

[eaconian]

ありがとうございます。質問に補足する前の状態でのご回答ですね。参考にさせて頂きます。