引数の値を条件判定させる方法について

下記の結果になるような記述をしたく思っていますが、意図する通りになりません。

###希望する動作
「果物A」ボタンを押した場合 ⇒ console.logで「赤りんご」を表示
「果物B」ボタンを押した場合 ⇒ console.logで「青りんご」を表示

###試したソース

html
1<button onclick="judgeFruit(apple, red);">果物A</button><br>
2<button onclick="judgeFruit(apple, green);">果物B</button>

JavaScript
1var apple, red, green;
2function judgeFruit(fruit, color){
3	if(fruit === apple && color === red){
4		console.log('赤りんご');
5	} else if (fruit === apple && color === green){
6		console.log('青りんご'); //赤りんごと表示されてしまう
7	}
8};

上記ソースでは両方とも結果が「赤りんご」になってしまいます。
「果物B」ボタンでは引数で「apple（りんご）」と「green（青）」を渡しているにもかかわらず
何故一番目の条件式と合致して「赤りんご」と表示してしまうのか、理解できずにいます。

ちなみにconsole.log(color)やconsole.log(fruit)と記述してみたところ「undefined」となってしまうため
ここら辺に原因があるような気がしてはいるものの、答えに辿りつかず悩んでいます。

また、「var apple, red, green;」も、定義しないとエラーが出てしまうため
加えましたが、なぜ定義が必要なのかもわからずといった感じです…

何か根本的に勘違いをしているように思うのですが、

●何故「console.log(color)」とした場合、結果が「undefined」となってしまうのか
●希望する結果を得るにはどのように記述をすべきか

上記、ご教授いただけないでしょうか？
試したソースは無視していただいて、もし「if」を使用するよりも良い記述の方法等が
ありましたらそちらも教えていただますととても助かります。
どうぞよろしくお願いいたします。

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

回答1件

ベストアンサー

何故「console.log(color)」とした場合、結果が「undefined」となってしまうのか

変数colorは初期化せずに宣言された変数なので、undefinedとなります。

希望する結果を得るにはどのように記述をすべきか

以下のように記述してはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<button onclick="judgeFruit('apple', 'red');">果物A</button>
9<br>
10<button onclick="judgeFruit('apple', 'green');">果物B</button>
11<script>
12    function judgeFruit(fruit, color) {
13        if (fruit === "apple" && color === "red") {
14            console.log('赤りんご');
15        } else if (fruit === "apple" && color === "green") {
16            console.log('青りんご'); //赤りんごと表示されてしまう
17        }
18    }
19</script>
20</body>
21</html>