JavaScirpt 関数宣言内での条件分岐

JavaScriptで関数宣言内での条件分岐ができなくて困っっています。

HTMLのインプットタグから年齢を入れて、
犬が人間だったら何歳かという計算をして、標示したいと思っています。

犬が人間だったらとう計算は、最初の1歳のときと、２歳のときだけが一年に対し10.5をかけて、
3歳以降は一年に対し4をかけ、それを合計すると犬の年がでます。

つまり2歳なら21歳（10.52）
3歳なら（10.52）+4=25歳
4歳なら（10.52）+（24）=29歳
になります。

2歳以降の計算は問題ないのですが、もし入力が0歳や1歳だったときがうまくいきません。
0の入力の場合は、0
1の入力の場合は、10.5
と標示したいと思っています。

ご助言いただけないでしょうか。

エラーはコンソールに
elseの使い方が間違っている。
convertHumanYearToDogYearが定義されていないとなっています。

よろしくおねがいします。

    const yourname = document.getElementById("yourname").value
    const yourage = document.getElementById("input_humanyear").value
    let dogAGE = document.getElementById("dog-age");
    
    let earlyYears = 2;
    earlyYears *= 10.5;
    
    let laterYears = yourage -2;
    laterYears *= 4;

    let myAgeInDogYears  = earlyYears + laterYears

    // if (yourage === 0)
    // myAgeInDogYears = 0; 
    // } else if (yourage === 1)
    // myAgeInDogYears = 10.5;
    // } else {
    // myAgeinDogYears  = earlyYears + laterYears
    // };
 
    anser =`My name is ${yourname}. I am ${myAgeInDogYears} years old in dog years.`;

    document.getElementById("dog-age").innerHTML = anser;
  }


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dog Year Calculator</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <div class="msg">
        
        <h1>Dog Year Calculator</h1>
    
        <ul>
            <li>The first two years of a dog’s life count as 10.5 dog years each.</li>
            <li>Each year following equates to 4 dog years.</li>
    
        </ul>
    
      <form id="form1" action="#">
          <label>Your current age
    
              <input type="number" id="input_humanyear" value="3">
    
          </label><br>
          <label>Your name
    
              <input type="text" id="yourname" value="John">
    
          </label>
    
        <input type="button" onclick="convertHumanYearToDogYear()" value="Check">
      </form>
    
      <div id="dog-age"></div>
    </div>

<script src="js/main.js"></script>

</body>
</html>

takasima20

2020/12/01 23:47

なんで === 使ってるんですか?

miyabi_pudding

2020/12/01 23:50

> もし入力が0歳や1歳だったときがうまくいきません。今は何と出ますか？また、ソースコードのマークダウンが正しくなっていません。 ```ここに言語を入力コード ``` の形式になるよう記載を直してください。

Nish

2020/12/02 06:54

ご指摘ありがとうございます。上記ソースコードのマークダウンを修正しました。現在エラーがない状態にしており、2歳以上の入力ではバグがでません。ただ0歳や一歳を入力すると 0歳=13 1歳=17　となり、これを修正したく条件分岐できればと思っております。つまり0歳だと0、一歳だと10.5歳となるようにできればと思っております。ご助言いただけないでしょうか。

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

回答4件

yourageは整数の前提で書きます。

if (yourage < 3){
 myAgeInDogYears = 10.5 * yourage;
} else{
 myAgeInDogYears = 21 + (4 * (yourage - 2))
}

これで如何でしょうか？

投稿2020/12/03 02:08

tomtomtomtom

総合スコア563

tomtomtomtom

2020/12/03 10:31

すいません。 yourage = Number( yourage ); ↑if (yourage < 3){ の前にこれを付け足して下さい^^

tomtomtomtom

2020/12/04 16:43

高評価ありがとうございました^^ なにかのお役に立てれば幸いです。また機会がありましたら宜しくお願い致します。

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

ベストアンサー

中括弧のネストが正しくありません。

javascript
1function convertHumanYearToDogYear() {
2
3/* 中略 */
4
5if (yourage === 0)
6myAgeInDogYears = 0; 
7} else if (yourage === 1)

else if直前の中括弧は、functionを閉じるものと解釈されてしまいます。

投稿2020/12/01 23:44

maisumakun

総合スコア145208

ありがとうございました。
もし同じような問題をもっているかたのためにすべてのソースコードとデプロイ先のリンクを貼ります。

https://dog-year-calc.netlify.app/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dog Year Calculator</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <div class="msg">
        
        <h1>Dog Year Calculator</h1>
    
        <ul>
            <li>The first two years of a dog’s life count as 10.5 dog years each.</li>
            <li>Each year following equates to 4 dog years.</li>
    
        </ul>
    
      <form id="form1" action="#">
          <label>Your current age
    
              <input type="number" id="input_humanyear">
    
          </label><br>
          <label>Your name
     
              <input type="text" id="yourname">
    
          </label>
     
        <input type="button" onclick="convertHumanYearToDogYear()" value="Check">
      </form>
    
      <div id="dog-age"></div>
    </div>

<script>

function convertHumanYearToDogYear() {
    const yourname = document.getElementById("yourname").value;
    let yourage = document.getElementById("input_humanyear").value;
    let dogAGE = document.getElementById("dog-age");
    yourage = Number(yourage);

    if (yourage < 3){
    myAgeInDogYears = 10.5 * yourage;
   } else {
    myAgeInDogYears = 21 + (4 * (yourage - 2)); 
   };
    anser =`My name is ${yourname}. I am ${myAgeInDogYears} years old in dog years.`;
    document.getElementById("dog-age").innerHTML = anser;
}
</script>

</body>
</html>

投稿2020/12/04 10:42

Nish

総合スコア14