質問編集履歴
3
質問内容を見やすくするため
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
①クリックした画像のみにクリックのたびに枠線__border:3px solid #d3d3d3;__を適用したい。
|
|
2
|
-
→クリックした画像にのみ特定のCSSが適用される方法が知りたい。
|
|
3
|
-
|
|
4
|
-
②クリックした犬種（枠線で囲われている犬種）の大きさ（小型or中型or大型）を取得し表示したい。
|
|
5
|
-
→__onclick__で画像を押した際の処理（__small()__,__medium()__,__large()__）を設定しましたが上手く作動しないので、原因または他の書き方を知りたい。
|
|
6
|
-
|
|
7
|
-
③②で取得した大きさとテキストボックスで入力された犬年齢を使った大型犬の計算/小型・中型犬の計算が上手く動作するようにしたい。
|
|
8
|
-
→「//人間の年齢に換算」の部分でif文を使って犬の大きさごとに分け計算し、__answerAge__に代入することで結果を表示するように記述してみたが上手く動作しなかったので原因または他の書き方を知りたい。
|
|
9
|
-
|
|
10
1
|
```HTML
|
|
11
2
|
<!DOCTYPE html>
|
|
12
3
|
<html>
|
2
分からないことの明確化。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
①クリックした画像のみにクリックのたびに枠線__border:3px solid #d3d3d3;__を適用したい。
|
|
2
|
+
→クリックした画像にのみ特定のCSSが適用される方法が知りたい。
|
|
3
|
+
|
|
2
|
-
②クリックした犬種（枠線で囲われている犬種）の大きさ（小型or中型or大型）を取得し表示。
|
|
4
|
+
②クリックした犬種（枠線で囲われている犬種）の大きさ（小型or中型or大型）を取得し表示したい。
|
|
5
|
+
→__onclick__で画像を押した際の処理（__small()__,__medium()__,__large()__）を設定しましたが上手く作動しないので、原因または他の書き方を知りたい。
|
|
6
|
+
|
|
3
7
|
③②で取得した大きさとテキストボックスで入力された犬年齢を使った大型犬の計算/小型・中型犬の計算が上手く動作するようにしたい。
|
|
8
|
+
→「//人間の年齢に換算」の部分でif文を使って犬の大きさごとに分け計算し、__answerAge__に代入することで結果を表示するように記述してみたが上手く動作しなかったので原因または他の書き方を知りたい。
|
|
4
9
|
|
|
5
|
-
|
|
6
10
|
```HTML
|
|
7
11
|
<!DOCTYPE html>
|
|
8
12
|
<html>
|
1
計算式の明記、コメントアウトの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -27,27 +27,27 @@
|
|
|
27
27
|
var size
|
|
28
28
|
function small() {
|
|
29
29
|
document.getElementById("answerSize").innerHTML="小型犬です。";
|
|
30
|
-
size="small";
|
|
30
|
+
size="small"; //変数sizeにsmallを入れ、換算時の条件分岐に使用
|
|
31
31
|
}
|
|
32
32
|
function medium() {
|
|
33
33
|
document.getElementById("answerSize").innerHTML="中型犬です。";
|
|
34
|
-
size="medium";
|
|
34
|
+
size="medium"; //変数sizeにmediumを入れ、換算時の条件分岐に使用
|
|
35
35
|
}
|
|
36
36
|
function large() {
|
|
37
37
|
document.getElementById("answerSize").innerHTML="大型犬です。";
|
|
38
|
-
size="large";
|
|
38
|
+
size="large"; //変数sizeにlargeを入れ、換算時の条件分岐に使用
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
//人間の年齢に換算
|
|
42
42
|
var humanAge
|
|
43
43
|
var dogAge=document.getElementById("dogAge");
|
|
44
44
|
function humanAge() {
|
|
45
|
-
if(size=="large") {
|
|
45
|
+
if(size=="large") { //大型犬の場合の換算
|
|
46
|
-
humanAge=12+(dogAge-1)*7;
|
|
46
|
+
humanAge=12+(dogAge-1)*7; //人間の年齢に置き換える計算式
|
|
47
47
|
answerAge="人間の年齢では"+humanAge+"歳です。"
|
|
48
48
|
document.getElementById("answerAge").innerHTML=answerAge;
|
|
49
|
-
} else if(size=="small"||size=="mediun") {
|
|
49
|
+
} else if(size=="small"||size=="mediun") { //小型・中型犬の場合の換算
|
|
50
|
-
humanAge=24+(dogAge-2)*4
|
|
50
|
+
humanAge=24+(dogAge-2)*4 //人間の年齢に置き換える計算式
|
|
51
51
|
answerAge="人間の年齢では"+humanAge+"歳です。"
|
|
52
52
|
document.getElementById("answerAge").innerHTML=answerAge;
|
|
53
53
|
} else {
|
|
@@ -125,4 +125,8 @@
|
|
|
125
125
|
</body>
|
|
126
126
|
```
|
|
127
127
|
|
|
128
|
-
試行錯誤しましたが、うまくいきませんでした…。まず年齢換算の計算結果が間違っており、二度目以降に犬年齢を入力すると 、__humanAge is not a function__というエラーが出てしまいます。原因や正しく動作するコードがお分かりになる方は回答よろしくお願い致します。（初心者なので詳しい解説
|
|
128
|
+
試行錯誤しましたが、うまくいきませんでした…。まず年齢換算の計算結果が間違っており、二度目以降に犬年齢を入力すると 、__humanAge is not a function__というエラーが出てしまいます。原因や正しく動作するコードがお分かりになる方は回答よろしくお願い致します。（初心者なので詳しい解説をしていただけると非常に嬉しいです。）
|
|
129
|
+
|
|
130
|
+
【追記】
|
|
131
|
+
大型犬の場合：人間だった場合の年齢＝12+(犬の年齢-1)×7
|
|
132
|
+
小・中型犬の場合：人間だった場合の年齢＝24+(犬の年齢-2)×4
|