質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

313閲覧

innerNTMLについて

beginner001

総合スコア29

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/01/31 03:17

javascript

1<html> 2 <head> 3 </head> 4 <body> 5 <div id=output> 6 <form name = "data"> 7 <p>身長(cm):<input type = "number" id="height"></p> 8 <p>体重(kg):<input type = "number" id="weight"></p> 9 <input type = "button" value="BMIを計算" onclick = "bmi()"></p> 10 </form> 11 </div> 12 13 14 <script> 15 function calc(){ 16 let h = Number(document.getElementById("height").value); 17 let w = Number(document.getElementById("weight").value); 18 let answer=(w / ((h / 100)*(h / 100))); 19 return answer; 20 } 21 22 function bmi(){ 23 output.innerHTML = calc(); 24 } 25 </script> 26 </body> 27 28</html> 29

以上の記述では身長、体重を入力してBMIを計算のボタンをクリックすると、結果は表示されますが、テキストボックスなどは消えてしまいます。
しかし上記の記述の一部を下記のように書き換えると、計算結果は表示されテキストボックスもボタンも表示されています。この <div id=output> </div>の記述がいくら考えても分かりません。
なぜなのでしょうか?よろしくお願いします。

<form name = "data"> <p>身長(cm):<input type = "number" id="height"></p> <p>体重(kg):<input type = "number" id="weight"></p> <input type = "button" value="BMIを計算" onclick = "bmi()"></p> </form> <div id=output> </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<div id=output></div> これだけ書いておくと、HTML上で空の領域が確保されます。 ブラウザ上では何も表示されません。

そして、
output.innerHTML = calc();
が実行されると、計算結果が埋め込まれて

<div id=output>23.1234</div> となるのでブラウザ画面に計算結果が表示されます。 <div id=output> <form></form> </div> このようにform全体を囲ってしまうと、formが上書きされてなくなってしまいますよ。

投稿2020/01/31 03:40

technocore

総合スコア7200

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

beginner001

2020/01/31 06:19

ありがとうございました。よく分かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問