- ベストアンサー
JavaScriptでstyleやclassListとtextContentを繋げて一文にする方法
- JavaScriptで[style]や[classList]と[textContent]を繋げて一文にする方法を教えてください。
- 条件演算子を使って要素に属性を追加する方法や、テキストを設定する方法について説明してください。
- ブラウザでJavaScriptを実行する際に、複数の属性を一つの文にまとめて記述する方法について教えてください。
- blueletter12345
- お礼率27% (26/94)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
textContentもclassListもElement(h1)のプロパティのため、 h1.classList.add('pass').textContent = ... のような書き方はエラーになります。 すべて1行で書くにはカンマ演算子を用いて次のようにします。 score >= 80 ? (h1.textContent = 'Congrats', h1.classList.add('pass')) : (h1.textContent = 'You have failed', h1.classList.add('fail')) 蛇足ですが、この方法だと1行で書くことはできるものの、可読性が落ちるうえに記述が冗長（h1.textContentとh1.classListが2回ずつ出現する）なので一般に好まれないと思います。 行数は増えてしまいますが const cond = score >= 80; h1.textContent = cond ? 'Congrats' : 'You have failed'; h1.classList.add(cond ? 'pass' : 'fail'); のような書き方がわかりやすいかと思います。 参考 - textContent: https://developer.mozilla.org/ja/docs/Web/API/Node/textContent - classList: https://developer.mozilla.org/ja/docs/Web/API/Element/classList - カンマ演算子: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comma_Operator
お礼
ありがとうございました。冗長にならずシンプルに記述するように努めます。