犬種をクリック（クリックされた画像を枠で囲う）し、その大きさ（小型or中型or大型）に応じて設定した計算式と入力された犬年齢によって人間に換算した年齢を表示する。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>犬の年齢換算</title>
6  <style>
7      .pic_frame {
8       display: inline-block;
9       text-align: center;
10       font-size: 11px;
11     }
12
13     img {
14        width: 13vw;
15        height: auto;
16        border:3px solid #d3d3d3;
17     }
18  </style>
19  <script>
20  //サイズの確認
21  var size
22  function small() {
23         document.getElementById("answerSize").innerHTML="小型犬です。";
24         size="small";　//変数sizeにsmallを入れ、換算時の条件分岐に使用
25  }
26  function medium() {
27　　　　　document.getElementById("answerSize").innerHTML="中型犬です。";
28         size="medium";　//変数sizeにmediumを入れ、換算時の条件分岐に使用
29  }
30  function large() {
31　　　　　document.getElementById("answerSize").innerHTML="大型犬です。";
32         size="large";　//変数sizeにlargeを入れ、換算時の条件分岐に使用
33  }
34 
35  //人間の年齢に換算
36  var humanAge
37  var dogAge=document.getElementById("dogAge");
38  function humanAge() {
39        if(size=="large") {　//大型犬の場合の換算
40              humanAge=12+(dogAge-1)*7;　//人間の年齢に置き換える計算式
41              answerAge="人間の年齢では"+humanAge+"歳です。"
42              document.getElementById("answerAge").innerHTML=answerAge;
43        } else if(size=="small"||size=="mediun") { //小型・中型犬の場合の換算
44              humanAge=24+(dogAge-2)*4　//人間の年齢に置き換える計算式
45              answerAge="人間の年齢では"+humanAge+"歳です。"
46              document.getElementById("answerAge").innerHTML=answerAge;
47        } else {
48              document.getElementById("answerAge").innerHTML="犬種をクリックしてください。";
49        }
50
51  }
52  </script>
53</head>
54<body>
55  <h1>犬の年齢を人間に換算</h1>
56  <p>調べたい犬種の画像をクリックしてください。</p>
57  <div class="pic_frame">
58     <img src="DOG_corgi.png" onclick="small()">
59     <p>コーギー</p>
60　</div>
61　<div class="pic_frame">
62     <img src="DOG_golden_retriever.png" onclick="large()">
63     <p>ゴールデン・レトリバー</p>
64  </div>
65  <div class="pic_frame">
66     <img src="DOG_shetland_sheepdog.png" onclick="medium()">
67     <p>シェットランド・シープドッグ</p>
68  </div>
69  <div class="pic_frame">
70     <img src="DOG_shibainu.png" onclick="small()">
71     <p>柴犬</p>
72  </div>
73  <div class="pic_frame">
74     <img src="DOG_german_shepherd.png" onclick="large()">
75     <p>ジャーマン・シェパード</p>
76  </div>
77  <div class="pic_frame">
78     <img src="DOG_dachshund.png" onclick="small()">
79     <p>ダックスフンド</p>
80  </div>
81  <div class="pic_frame">
82     <img src="DOG_chihuahua.png" onclick="small()">
83     <p>チワワ</p>
84  </div>
85  <div class="pic_frame">
86     <img src="DOG_spitz.png" onclick="medium()">
87     <p>スピッツ</p>
88  </div>
89  <div class="pic_frame">
90     <img src="DOG_papillon.png" onclick="small()">
91     <p>パピヨン</p>
92  </div>
93  <div class="pic_frame">
94     <img src="DOG_beagle.png" onclick="small()">
95     <p>ビーグル</p>
96  </div>
97  <div class="pic_frame">
98     <img src="DOG_bulldog.png" onclick="large()">
99     <p>ブルドッグ</p>
100  </div>
101  <div class="pic_frame">
102     <img src="DOG_toypoodle.png" onclick="small()">
103     <p>トイプードル</p>
104  </div>
105  <div class="pic_frame">
106     <img src="DOG_pomeranian.png" onclick="small()">
107     <p>ポメラニアン</p>
108  </div>
109  <div id="answerSize">ここに犬のサイズが表示されます。</div>
110  <br><br>
111  <p>
112  <form name="myform">
113     犬の年齢（半角）：<input id="dogAge" type="text">歳
114     <input type="button" value="人間の年齢に換算" onclick="humanAge()">
115  </form>
116  </p>
117　<div id="answerAge">ここに人間換算した年齢が表示されます。</div>
118　<br><br>
119</body>

試行錯誤しましたが、うまくいきませんでした…。まず年齢換算の計算結果が間違っており、二度目以降に犬年齢を入力すると、__humanAge is not a function__というエラーが出てしまいます。原因や正しく動作するコードがお分かりになる方は回答よろしくお願い致します。（初心者なので詳しい解説をしていただけると非常に嬉しいです。）

【追記】
大型犬の場合：人間だった場合の年齢＝12+(犬の年齢-1)×7
小・中型犬の場合：人間だった場合の年齢＝24+(犬の年齢-2)×4

tanat

2021/01/10 12:20

現状だと、どこがわからないかも分からない状態のように見受けられます。結果として非推奨の質問である丸投げの状態になっています。まずは、’JavaScript デバッグ方法’で検索してみて、何が不明であるかを明らかにされる事をおすすめします。

Jon_do

2021/01/10 12:25 編集

犬の年齢を人間の年齢に置き換える計算小型、中型、大型の場合、変動する値追記するのをおすすめします。

momomomon

2021/01/10 14:03

ご指摘の事項を追記しました。また丸投げのつもりはなく、初心者で知識や構成力が未熟なため現状これが限界であることをご理解していただけたらと思います…。現在進行形で私自身でも試行錯誤を繰り返していますが、どの部分が原因かだけでもお分かりになる方は回答よろしくお願い致します。

退会済みユーザー

2021/01/10 17:10

試行錯誤した過程を記載すると、丸投げ指摘を回避できますよ。厳しいことを言いますが、なんでもかんでも「初心者なので」は通用しません。

momomomon

2021/01/10 17:25

べストアンサーの方のご意見もいただきなんとか正常にコードを実行することができました。tanatさんとJon_doさん、ご指摘ありがとうございました。これからの質問ではおっしゃっていた点も気を付けていこうと思います！

退会済みユーザー

2021/01/10 17:44

おお、こんな時間までご苦労様です。寝不足で体調を崩さないようにご注意くださいね。

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

回答1件

ベストアンサー

こんばんは。

まず年齢換算の計算結果が間違っており、二度目以降に犬年齢を入力すると、humanAge is not a functionというエラーが出てしまいます。原因や正しく動作するコードがお分かりになる方は回答よろしくお願い致します。（初心者なので詳しい解説やコードを教えていただけると非常に嬉しいです。）

以上が質問だと読みました。
以下が原因の詳しい解説です。

変数名と関数名がかぶっている
getElementById() の戻り値はDOMであって、フォームの値ではない
dogAge を取得するタイミングは「人間の年齢に換算」をクリック時であるべきで、ページロード時であってはいけない。

以下が正しく動作するコードです。

html
1     <input type="button" value="人間の年齢に換算" onclick="humanAgeFunction()">

js
1//  var dogAge=document.getElementById("dogAge");
2//  function humanAge() {
3  function humanAgeFunction() {
4    var dogAge=document.getElementById("dogAge").value;