JavaScript のプログラムがwebに表示されません。助けてください

js のプログラムがwebに表示されません

半径の円の面積を表示するコードを書いていますが、エラーも何もないのに表示されません。

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

エラーメッセージ　なし

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>円の面積を求める</title>
6</head>
7<body>
8    <p id="area"></p>
9    <script src="circle_area.js"></script>
10</body>
11</html>

let radius = 12
function updateParagraph() {
    let area = radius() * radius() * 3.14;
    document.getElementById('area').innerText = '半径' + radius + 'の面積は' + area + 'です'
}

要望

すみません。初心者なのでお手柔らかにお願いします。

補足情報

intel Mac 11.2.3（20D91）
VScode 1.56.1 (Universal)
chrome 88.0.4324.192（Official Build）（x86_64）

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

回答1件

ベストアンサー

まずJavaScriptですが、各文末には;を忘れずに書きましょう。
radiusは関数ではないのでradius()は誤りです。radiusだけでいいです。
関数updateParagraphを実行する仕組みがありません。
HTMLに<button type="button" onclick="updateParagraph();">計算する</button>を加えて押してみましょう。

文末のセミコロンに関する補記
JavaScriptの「文」はセミコロンで終わります。
しかし、セミコロンを書き忘れても、多くの場合問題なく動作します。
それはJavaScriptには「自動セミコロン挿入(Automatic Semicolon Insertion)」という機能があり、多くの場合に、それがうまく働いてくれるからです。
しかし、それがうまく働かない例外も存在するため、これに頼っているとデバッグが困難になる可能性があります。
そのため、文の末尾にはセミコロンを必ず記述することをコーディング規約として定められている場合もあります。
何より、セミコロンを省略できる場合とそうでない場合を確実に把握してコーディングするのは、かえって困難であり、間違いのもととなり得ます。
ですから私は文末にセミコロンを常に書くことを推奨します。
ただし、このことについては意見は割れているということも付記しておきます。

投稿2021/05/15 03:17

編集2021/05/20 05:07

itagagaki

総合スコア8402

khouna

2021/05/15 03:24

ありがとうございます。解決することができました。計算するのボタンを押すことで計算結果を表示することができました。

m.ts10806

2021/05/15 04:22

文末のセミコロンは基本的に書かなくても問題ないものでは。

itagagaki

2021/05/15 04:48

JavaScriptのセミコロンは意見の割れる話題のようです。でも書かないとダメなケースはあります。

m.ts10806

2021/05/15 05:01

そのあたりはMDNにも言及されていますね。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Lexical_grammar 意見が割れるというより明確に「必要なケース」「不要なケース」は定義づけられています。本回答では冒頭に「忘れずに」と主張が入っていたため「それは違うんじゃない？」という意味でコメントしました。

itagagaki

2021/05/15 05:04

ですから意見が割れる話題だと言っています。論争するつもりはありません。

itagagaki

2021/05/20 05:08

セミコロンの件、追記しておきました。

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