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

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

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

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

Q&A

解決済

javascriput BMI計算正常に表示しない。

titivo
titivo

総合スコア2

JavaScript

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

1回答

0グッド

0クリップ

380閲覧

投稿2022/10/22 07:27

編集2022/10/22 08:22

前提

ここに質問の内容を詳しく書いてください。
(例)
javascriptで簡単なBMI計算機を作っています。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

javascriptでBMI計算機を作りかけてるのですが、
正しく動作しない。

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

①weightとheightは数字入力できるが、正しく計算表示されない。
② 「CLEAR」ボタンも効かない。
エラーメッセージ

該当のソースコード

【html】 <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF=8"> l <meta name="viewport" content="width=device-width, initial-scale=1,0"> <link rel="stylesheet" href="style.css"> <title>BMI Caluculator with Javascript</title> </head> <body onload="carregar()"> <main class="container"> <h1>BMI Caluculator</h1> <p>Calicule seu indice Massa Corprea</p> <div class="dados"> <label for="weight">Weight</label> <input type="number" name="weight" id="weight"> <label for="height">Height</label> <input type="number" name="height" id="height"> <button class="botao" onclick="calculate()">calculate</button> </div> <div class="res" id="res"></div> <button class="clear" style="display: block; margin: auto; width: 120px; height: 40px; color: #fff; background: transparent; border: 1px solid #fff; text-transform: uppercase; font-size: 16px;" onclick="clear()">clear</button> </main> <script src="imc.js"></script> </body> </html>
【style.css】 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0.700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); * { font-family: sans-serif; box-sizing: border-box; margin: 0; padding: 0; outline: none; } body { background-image: url(tokyo.png); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; width: 100%; height: 100vh; display: flex; color: #fff; } .container { align-items: center; margin: auto; padding: 30px; background: rgba(255,255,255,0.181); width: 700px; height: 400px; border: 2px solid rgba(255,255,255,0.185); box-shadow: 0 50px 30px rgba(0, 0, 0, 0.402); backdrop-filter: blur(13.5px); } h1 { font-weight: 500; font-size: 36px; text-align: center; } p { font-weight: 200; font-size: 20px; text-align: center; margin: 0 0 30px; } .resultado { font-size: 24px; color: #fff; text-align: center; margin: 0; padding: 5px 20px; } .res { margin: 27px; height: 100px; background-color: rgba(255, 255, 255, 0.233); } label { font-size: 24px; } input { color: #fff; width: 100px; height: 50px; font-size: 24px; text-align: center; border: 1px solid #fff; margin-right: 20px; background-color: rgba(255, 255, 255, 0.246); } .botao { float: right; margin-right: 30px; text-transform: uppercase; width: 150px; height: 50px; font-size: 16px; background: transparent; border: 1px solid #fff; color: #fff; .dados { text-align: center; } /* .clear { display: block; margin: auto; width: 120px; height: 40px; color: #fff; background: transparent; border: 1px solid #fff; text-transform: uppercase; font-size: 16px; } */
【imc.js】 function carregar() { inicio = document.querySelector("input#weight").focus(); } function calculate() { let weight = Number(document.querySelector("input#weight").value); let height = Number(document.querySelector("input#height").value); let imc = weight / height ** 2; let message = ""; let res = document.querySelector("div#res"); if (imc < 18.5) { message = "Abaixo do peso"; } else if (imc <= 24.9) { message = "Peso normal"; } else if (imc <= 29.9) { message = "sobrepeso"; } else if (imc <= 34.9) { message = "Obesidade grau 1"; } else if (imc <= 39.9) { message = "Obesidade grau 2"; } else { message = "Obesidade grau 3"; } res.innerHTML = '<p class="resultado">Seu IMC e <b>${imc.toFixed(2).replace(".",",")}</b>.<p class="resultado">Message: <b>${message}</b>'; } function clear() { document.querySelector("input#weight").value = ""; document.querySelector("input#height").value = ""; document.querySelector("div#res").innerHTML = ""; carregar(); }

試したこと

①タイプミス 確認

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

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

それなりのBMI計算機の形はできてるのですが、
①weight値とheight値は入力できますが
正常に計算結果表示できてない。

②それら入力値を消す「CLEAR」ボタンも効かない。

どこが誤ってるのかかなり時間を費やしましたがわかりません。
お詳しい方、ご指摘よろしくお願いいたします。

イメージ説明

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

maisumakun

2022/10/22 07:39

> 正常に計算結果表示できてない。 具体的に、どのような結果表示になるのですか?

回答1

0

ベストアンサー

クォテーションの間違い

シングルクォテーション''ではなく、バッククォテーション``ではないでしょうか?

diff

1- res.innerHTML = '<p class="resultado">Seu IMC e <b>${imc.toFixed(2).replace(".",",")}</b>.<p class="resultado">Message: <b>${message}</b>'; 2+ res.innerHTML = `<p class="resultado">Seu IMC e <b>${imc.toFixed(2).replace(".",",")}</b>.<p class="resultado">Message: <b>${message}</b>`;
  • シングルやダブルクォテーション' ' or " "はただの文字列です。
  • 文字列の中に変数などを混ぜて書きたかったら、バッククォート``によってテンプレートリテラルを利用しましょう。

clear()関数名の変更

関数名を変更したら動きました。原因はわからないのですが、おそらくJSにはclear()という名前のデフォルトの関数があるのではないでしょうか。
それとバッティングして動かなかったのかもしれません。

diff

1# HTML 2_ <button class="clear" onclick="clear()">clear</button> 3+ <button class="clear" onclick="clearr()">clear</button> 4 5# JavaScript 6- function clear() { 7+ function clearr() { 8 document.querySelector("#weight").value = ""; 9 document.querySelector("#height").value = ""; 10 document.querySelector("#res").innerHTML = ""; 11 carregar(); 12}

投稿2022/10/22 08:42

編集2022/10/22 08:59
Cocode

総合スコア2245

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

titivo

2022/10/22 15:58

素晴らしいです。 こちらの説明不足にもかかわらず瞬時明確にご指摘いただくことができました。 すべておっしゃる通りでございました。 勉強になりました。 ほんとうにありがとうございました。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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