問い
"animal"というクラスを持つ全てのDOM要素のリストを返す関数getAnimals()を実装する。
という問題なのですが、
以下の様に記述したところ、

HTML
1<!DOCTYPE html>
2<html>
3  <body>
4    <div id="favorites">
5      <p class="fruit">Apple</p>
6      <p class="fruit">Orange</p>
7      <p class="fruit">Banana</p>
8      <p class="animal">Dog</p>
9      <p class="animal">Cat</p>
10      <p class="fruit">Kiwi</p>
11      <p class="animal">Horse</p>
12    </div>
13
14    <script>
15      function getFruits() {
16　　　　var elements  =  document.getElementsByClassName("fruit");
17        return fruit;
18      }
19    </script>
20  </body>
21</html>

node test.js

正しく実行できること
ReferenceError: fruit is not defined
at getFruits (file:///root/src/index.html:4:9)
at test (/root/src/test.js:10:25)
at /root/src/jsdom-test-utils:117:9
19% Completed

.エラーである様に,「fruit」が定義できていないことや、getElementsByClassNameが機能させることができていないことはわかるのですが、
正しく実行することができません。

正しいコードと解説をいただけないでしょうか。

よろしくお願いいたします。

m.ts10806

2021/11/15 11:23

Node.js前提なら質問タグに追加してください。あと、htmlとそのメソッド呼び出す記述も提示してください。

m.ts10806

2021/11/15 13:28

>正しく実行することができません。エラーを解消した場合はどうなのでしょう。ひとまずメソッド内を下記だけにするとか return document.getElementsByClassName("fruit");

m.ts10806

2021/11/15 13:28

※それにvarの前が全角スペースなのでそもそもfruit is not definedよりも前にエラーになるはずでは

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

回答2件

"animal"というクラスを持つ全てのDOM要素のリストを返す関数getAnimals()

定義した関数名がgetFruits()
getElementsByClassName("fruit")→fruitというクラスを拾っている
return fruit→elementsで受けてるのに未定義のfruitを返そうとしている
そもそもgetFruits()を呼び出していない

sample

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelectorAll('[data-choice]').forEach(x=>{
4    x.addEventListener('click',()=>{
5      const list=document.querySelectorAll(`.${x.dataset['choice']}`);
6      console.log(list);
7    });
8  });
9});
10</script>
11<div id="favorites">
12<p class="fruit">Apple</p>
13<p class="fruit">Orange</p>
14<p class="fruit">Banana</p>
15<p class="animal">Dog</p>
16<p class="animal">Cat</p>
17<p class="fruit">Kiwi</p>
18<p class="animal">Horse</p>
19<p class="animal fruit">test</p>
20</div>
21<input type="button" value="get animal" data-choice="animal">
22<input type="button" value="get fruit"  data-choice="fruit">