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

前提

ここに質問の内容を詳しく書いてください。
（例）
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」ボタンも効かない。

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

maisumakun

2022/10/22 07:39

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

m.ts10806

2022/10/22 07:44

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

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

回答1件

ベストアンサー

クォテーションの間違い

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

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}