関数中での関数の呼び出し

関数の中で関数を呼び出すことでつまづいています。「TypeError: gcd is not a function. (In 'gcd(numerator,denominator)', 'gcd' is undefined)」
というエラーが出ており、fraction()という関数中でgcd(m,n)を使用している箇所でエラーが出ます。
どなたか理由をご存知の方おられませんか？

javascript
1function fraction(){
2    const number = document.getElementById("number").value;
3    console.log(number);
4    const numberDigit = String(number).length;
5    var numerator = 0;
6    var denominator = 0;
7    for(let i=0; i<numberDigit; i++){
8        denominator += Math.pow(10,i)*9;
9    }
10    numerator = number;
11    const answer = numerator/denominator;
12    console.log(answer);
13    console.log(denominator);
14    var gcd = gcd(numerator,denominator);
15    var numerator_2 = numerator/gcd;
16    var denominator_2 = denominator/gcd;
17    document.getElementById("numerator").textContent = numerator_2;
18    document.getElementById("denominator").textContent = denominator_2;
19    document.getElementById("question").textContent = "0."+String(number)+String(number)+"...";
20}
21
22console.log(gcd(12,32));
23
24function gcd(m, n) {
25    // 剰余
26    var r;
27  
28    if(m < n) {  // m >= nにする
29      r = m;  //一時退避
30      m = n;
31      n = r;
32    }
33  
34    while ((r = m % n) != 0) {
35      m = n;
36      n = r;
37    }
38  
39    return n;
40  }

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <link rel="stylesheet" href="style.css">
6    </head>
7    <body>
8        <p>数値 <span id="span"></span></p>
9        <input type="number" id="number">
10        <input type="button" value="ボタン" onclick="fraction()">
11        <div id="main">
12            <div id="question"></div>
13            <div id="answer">
14                <div id="numerator" width="200px" height="200px"></div>
15                <div id="denominator" width="200px" height="200px"></div>
16            </div>
17        </div>
18    </body>
19    <script src="script.js"></script>
20</html>

実行結果

itagagaki

2022/01/05 11:50

「関数型プログラミング」のタグはトピックが異なりますので外してください。

justmeet0924

2022/01/05 11:52

ご指摘ありがとうございます。

Lhankor_Mhy

2022/01/08 03:38

ご解決のようですので、BAを選んで質問をクローズしてください。

justmeet0924

2022/01/08 03:45

yambeさんの解答がよくわからなくて…。

Lhankor_Mhy

2022/01/08 04:00

justmeさんがyambejpさんのご回答をどうしても理解したい、それまではBAを選べないということであるならば、コメントをするべきではないでしょうか。なぜならば、justmeさんがわからない状態にあるということは、それを表明しない限り第三者には伝わらないからです。そして、justmさんがわからない状態にあるということに気づいてもらえない限り、追加のアドバイスを得ることはできないため、わからないままになるだろうということです。また、ku__ra__geさんの立場からすると、「解決した」とコメントがあったのにBAが選ばれないという状態は、justmeさんに「この人はいたずらで質問をしているのではないか」「コミュニケーションが取れない相手なのではないか」なとど不信を抱く結果になります。実際、私も、justmeさんは質問をするだけして回答があっても放置する人なのだな、と感じていたところです。不信からは、よいコミュニケーションは生まれにくく、悪いコミュニケーションはお互いにとって良いことはありません。是非ご検討ください。

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

回答2件

ベストアンサー

どなたか理由をご存知の方おられませんか？

var gcd = gcd(numerator,denominator);は変数gcdを宣言してfunction gcd(m, n) {～で定義したgcd関数を覆い隠して見えなくしてしまうからです。
名前が被らない変数名を利用しましょう。

投稿2022/01/05 11:54

ku__ra__ge

総合スコア4524

justmeet0924

2022/01/06 05:24

ありがとうございます。解決いたしました。

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

スコープ内の定義の問題なので変数名を変えるのが妥当ですが上書きすることでも回避できます
ただしグローバル変数がぐちゃぐちゃになるので控えたほうが良いと思います

javascript
1const  hoge=()=>{
2  fuga=fuga();
3  console.log(fuga);//123
4  var piyo=piyo();//スコープ内でpiyoを定義すると外からpiyoは持ってこれない
5};
6let fuga=()=>123;
7let piyo=()=>456;
8hoge();