Q&A
本当ですね、ありがとうございます！
さっと読んで早とちりしてしまいました。
前提・実現したいこと
JavaScript初心者です。
JavaScriptで表示される文字の色を黒（初期値）から赤に変えたいのですが、
”Cannot set property 'color' of undefined”
というエラーが出てできません。
調べたところundefinedは初期化されていないという意味だとわかりました。
しかし、colorの初期値は見る限り黒となっています。
初期値が既にあるのに、なぜundefinedとなってしまうのでしょうか。
またこの場合、このエラーをどう回避すればよいでしょうか。
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot set property 'color' of undefined
at changeColor (JavaScript.js:5)
at JavaScript.js:8
changeColor @ JavaScript.js:5
(anonymous) @ JavaScript.js:8
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>samplePage</title> </head> <body> <p class="hi">こんにちは。お元気ですか？</p> <script src="JavaScript.js"> </script> </body> </html>
JavaScript.js
1var changeColor = function(className, color) { 2 var elem = document.getElementsByClassName(className); 3 4 //文字色変える 5 elem.style.color = color; 6} 7 8changeColor("hi", "red");
回答2件
0
ベストアンサー
こんにちは。
ひとつのHTMLドキュメント内に同じclassの要素は、ひとつとは限らず、複数存在することができます。
ですので、getElementsByClassName は、指定したクラスに該当する複数の要素の集まり（HTMLCollection) を返します。
これを踏まえると、ご質問に挙げられているコードを修正する方法のひとつとしては、
以下のようにしてみるとよいかと思います。
javascript
1var changeColor = function(className, color) { 2 var elems = document.getElementsByClassName(className); 3 4 //文字色変える 5 elems[0].style.color = color; 6} 7 8changeColor("hi", "red");
上記では、getElementsByClassName の結果を入れる変数名を、elems と複数形にし、
文字色を変える対象の要素を、 elems[0] と、配列の要素を取得するのと同じ書き方で取得しています。
以下は上記と同じコードを jsFiddle に上げたものです。
https://jsfiddle.net/jun68ykt/xwb5f803/1/
以上参考になれば幸いです。
投稿2018/09/17 14:40
編集2018/09/18 11:32
総合スコア9058
0
正しい回答は既についているようなので、
エラー文の解釈違いだけ指摘させていただきます。
Cannot set property 'color' of undefined
上記のエラーは、"'color' of undefined" とあるので、color が未定義（undefined)なのではなく、「未定義の color」 が設定できない (Cannot set property) と言っています。
つまり、elem.style.color = color; の部分の、 elem.style が undefined だったということですね。
（上の方の方の回答にある通り、 elem は HTMLCollection オブジェクトなので、 style プロパティは未定義 (===undefined) となります）
投稿2018/09/18 05:34
総合スコア1086
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/17 14:56 編集
2018/09/17 15:01
2018/09/18 11:08