javascriptにて、計算結果がNaNになってしまう。

javascriptの初学者です。
以下の割り勘勘定の計算結果が０になってしまうのはなぜでしょうか。

javascript
1
2const $price = document.getElementById("sumprice").value;
3const $num_menber = document.getElementById("num_menber").value;
4const $cal_button =  document.getElementById("cal");
5
6function alertPrice(){
7    let pricePer1 = $price  /  $num_menber;
8    alert(pricePer1)
9} 
10
11
12$cal_button.addEventListener("click", alertPrice);
13
14console.log($price)

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>割り勘計算機</title>
7</head>
8
9
10<body>
11<h1>割り勘勘定</h1>
12
13<div>料金</div>
14<input type="text" id="sumprice">
15<br>
16<div>人数</div>
17<input type="text" id="num_menber">
18<br><br>
19<button type="button" id=cal>計算！</button>
20
21<script src="cal.js"></script>
22
23</body>
24</html>

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

回答3件

ベストアンサー

$priceと$num_menberには、HTML表示時点のinputタグのvalueが入るので、空文字列です。
空文字列を空文字列で割っているので、NaNです。

ボタンを押したときに、inputタグのvalueを取得するようにしましょう。

投稿2021/01/29 01:33

otn

総合スコア85886

js
1const $price = document.getElementById("sumprice").value;
2const $num_menber = document.getElementById("num_menber").value;

この2行がalertPriceの外で定義されているため、画面読み込み時点の入力値(ともに空文字)が入ってしまっているためです。

js
1function alertPrice(){
2    const $price = document.getElementById("sumprice").value;
3    const $num_menber = document.getElementById("num_menber").value;
4    let pricePer1 = $price  /  $num_menber;
5    alert(pricePer1)
6}

これで意図した動作になると思います。

投稿2021/01/29 01:32

nekoniki

総合スコア2411

sirara

2021/01/29 01:41 編集

解決しました！　ありがとうございます。もしよろしければ、ついでに一つ教えていただきたいのですが、 pythonでは関数外で定義された変数はグローバル変数となり、どの構文の中でも使えるといった仕様がありました。 javascriptではグローバル変数といった概念はないのでしょうか？

nekoniki

2021/01/29 02:21

> javascriptではグローバル変数といった概念はないのでしょうか？あります。自分の書き方が分かりにくかったのですが、修正前がまさにグローバル変数(const なので定数ですが)の状態です。グローバル変数の仕様についてはご認識の通りですが、otnさんの回答にあるように「HTML表示時点の値が$priceと$num_menberに入ったまま更新されていない」ことが今回事象の原因です。

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

結果を出すより前に、 $price と $num_menber　の値を出しましょう

投稿2021/01/29 01:27