JAVA　SCRIPT 　円の面積

円の半径を入力して、直径の長さと円周の長さと円の面積をJAVA SCRIPTで表示させたいです。

<HTML> <HEAD> <TITLE>円の面積</TITLE> <SCRIPT Language="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM name="MYFORM"> 数値（円の半径）を入力してから、計算ボタンをクリックしなさい。<BR> 入力欄：<INPUT type="text" name="KAZU"><BR> 直径の長さは、<INPUT type="text" name="KAZU1"><BR> 円周の長さ、<INPUT type="text" name="KAZU2"><BR> 円の面積、<INPUT type="text" name="KAZU3"><BR> <INPUT type="button" value="計算" onClick="MYKANSU()"> </FORM> </BODY> </HTML>

しかし、これだと表示されません。

m.ts10806

2020/07/27 04:35

コードはマークダウンのcode機能を利用してご提示ください。https://teratail.com/help#about-markdown あとこの書き方なにを参照しましたか？とてもレトロな雰囲気ですが…

退会済みユーザー

2020/07/27 04:44

学校の提出課題の資料を参照しました。このフォームでの提出を、指定されています。

m.ts10806

2020/07/27 05:42

課題の答えをもらって退散ですか。やり方が非常に汚ないし非推奨。ぜひ単位を落としてくださいね。

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

回答2件

ベストアンサー

なんか書き方が20年くらい古くないですか？

投稿2020/07/27 03:29

yambejp

総合スコア116724

yambejp

2020/07/27 03:30

退会済みユーザー

2020/07/27 04:37

理解できました。ありがとうございます。

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

円の半径を入力して、直径の長さと円周の長さと円の面積をJAVA SCRIPTで表示させたい

円に関連する各種演算は、抽象化したほうが良いかもしれません。

javascript
1class MyCircle {
2  constructor ( r ) {
3    this.radius = r;
4  }
5  get diameter() {
6    return this.radius * 2;
7  }
8  get circumference() {
9    return Math.PI * this.radius;
10  }
11  get area() {
12    return Math.PI *this.radius * this.radius;
13  }
14}
15
16// 以下テスト。半径を指定してオブジェクト生成。
17var circle = new MyCircle( 3 );
18
19// 以下、出力したい項目は読み取り専用のプロパティで。
20console.log( circle.diameter );
21console.log( circle.circumference );
22console.log( circle.area );

抽象化し、DOMのメソッドを活用すると、HTMLを変更しやすくなります。
入力は、半径用のテキストフィールドとボタンの２つに絞った例
（on~属性ではなく、addEventListener()にしています）

html
1<p>数値（円の半径）を入力してから、計算ボタンをクリックしなさい。</p>
2<hr>
3入力欄：<input id="input-radius" type="text" name="KAZU">
4<input type="button" value="計算">
5<div id="result"></div>
6<script>
7/* omitted: class MyCircle */
8
9document.querySelector("input[type=button]")
10.addEventListener("click", ( evt )=>{
11  let val = document.querySelector("#input-radius").textContent;
12  if( val ) {
13    let circle = new MyCircle( val|0 ); // 抽象化した演算用オブジェクト
14
15    document.querySelector("#result").innerHTML = [
16      `直径の長さは、${circle.diameter}`,
17      `円周の長さは、${circle.circumference}`,
18      `円の面積は、${circle.area}`
19    ].join("<br>");
20    
21  }
22})
23</script>