onメソッドを使用した、returnの使い方

当方JS初心者です。
onメソッドを使用した、returnの使い方についてご質問なのですが、
ボタンをクリックしたら、btnClick関数が走って、その戻り値(btnName)を関数外でも使用するようなプログラムを組みたいのですが、
こちらの方法がわかりません。
ソースコードは以下の通りです。
ご教示いただけないでしょうか？

jQuery
1<!DOCTYPE html>
2<html lang="js">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
8  <title>Document</title>
9</head>
10<body>
11
12  <button id="btn">クリック</button>
13  <script>
14
15    function btnClick(btn) {
16      var btnName = $(btn).text();
17      return btnName
18    }
19    var btnReturn = $("#btn").on("click",btnClick("#btn"));
20    console.log(btnClick(btnReturn))
21
22  </script>
23</body>
24</html>

maisumakun

2021/09/15 03:40

> その戻り値(btnName)を関数外でも使用するようなプログラムその値を使う部分はどこですか？

MTON

2021/09/15 03:46

説明がわかりずらく申し訳ございません。 btnClick関数の外からbtnNameの値をconsoleで表示できればいいです。

maisumakun

2021/09/15 03:52

なぜ「外から」やらなければならないのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

clickしたら表示したいのですから、onのコールバック内でconsoleしないと表示されません。
外でやるということはonとは別処理なのでクリックしたら表示されることにはなりません

javascript
1<script>
2$(function(){
3  $("#btn").on("click",function(){
4    console.log(btnClick("#btn"));
5  });
6});
7function btnClick(btn) {
8  var btnName = $(btn).text();
9  return btnName;
10}
11</script>
12<button id="btn" type="button">クリック</button>

投稿2021/09/15 03:43

yambejp

総合スコア116724

こういうことですか？

html
1  <script type="module">
2
3    function btnClick(btn) {
4      var btnName = $(btn).text();
5      return btnName
6    }
7    var btnReturn = await new Promise(resolve => $("#btn").on("click", () => resolve(btnClick("#btn"))));
8    console.log(btnReturn)
9
10  </script>