getElementById、addEventListenerを使用し、価格を計算するプログラム

前提・実現したいこと

JavaScriptで価格と個数を入力し、合計金額を計算できるプログラムを作っています。getElementById、addEventListenerを利用したいです。

発生している問題・エラーメッセージ

入力された値が取得されず、何も数値がない状態

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合計金額を計算</title>
</head>
<body>
 <form>
    <label>
        <input type="number" id='kakaku' name="kakaku" >価格
    </label>
    <br>
    <label>
        <input type="number" id='kosu' name="kosu">個数
    </label>
    <br>
    <input type="button" value="計算する" name="btn" id=btn >  
onclick="calc();" 
</form>
    <script>
        const kakaku = document.getElementById('kakaku').value;
        const kosu = document.getElementById('kosu').value;
        
        var goukei= document.getElementById("btn").addEventListener("click",function(){
            var g = kakaku*kosu;
            return console.log(g);
        });
    </script>
</body>
</html>

試したこと

input にvalue=10　など数値をあらかじめ入力しておくとその数値が計算され、新たに入力した数値を計算することができない。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

<script>
    var goukei= document.getElementById("btn").addEventListener("click",function(){
        const kakaku = document.getElementById('kakaku').value;
        const kosu = document.getElementById('kosu').value;

        var g = kakaku*kosu;
        return console.log(g);
    });
</script>

投稿2021/04/22 16:02

zushi0905

総合スコア683

chi4

2021/04/25 07:21

なるほど！解決しました。ありがとうございます！

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

function(){} スコープの中のkakaku 、kosu と、その上で定義しているkakaku 、kosu が別ものだから発生しています。
JavaScript特有の「変数の巻き上げ(hoisting)」が起こっていると思います。

知らないと怖い「変数の巻き上げ」とは？

投稿2021/04/23 04:12

UnripeTomato

総合スコア25

YT0014

2021/04/24 02:44

いえ、変数としては同一で、実行タイミングの問題かと。 kakaku,kosuは、ロード時に評価され、値のみを保持し、画面上の入力を反映しません。クリック時に関数が実行されますが、ロード時の値をそのまま使うので、衆力はロード時の値のままとなっています。 zushi0905さんの回答のように、クリック時に、評価して、その時点での値を取得する必要があります。