Q&A
・input時にすべての指定クラスの要素に設定したいのか
・自分がそのクラスだったとき自分にだけ適用したいのか
によります
実現したいこと
- JavaScriptでテキストボックスが入力された時に文字の色・太さ、背景色が変わるようにしたいです。
発生している問題・エラーメッセージ
document.getElementsByClassName()でクラス指定したテキストボックスのCSSを変えたいのですが、うまくいきません。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>値を入力すると文字の色・太さと背景色が変わる</title> </head> <body> <p>入力してください</p> <ul> <li><input class="box" type="text" name="name" oninput="inputChange()"></li> <li><input class="box" type="text" name="name" oninput="inputChange()"></li> <li><input class="box" type="text" name="name" oninput="inputChange()"></li> </ul> <script> function inputChange(){ document.getElementsByClassName("box").style.backgroundColor = '#F0E0E0'; document.getElementsByClassName("box").style.color = 'red'; document.getElementsByClassName("box").style.fontWeight = 'bold'; } </script> </body> </html>
試したこと
document.getElementById() で単体のテキストボックスのCSSを変えることはできました。
よろしくお願いします。
お返事が遅れて申し訳ありません。
「自分がそのクラスだったとき自分にだけ適用したいのか」
ですね。
input時にそのテキストボックスが変わるようにしたいです。
回答2件
0
javascript
1<script> 2document.addEventListener('input',({target})=>{ 3 if(target.matches('.box')){ 4 [...document.getElementsByClassName("box")].forEach(x=>{ 5 Object.assign(x.style,{backgroundColor:'#F0E0E0','color':'red',fontWeight:'bold'}); 6 }); 7 } 8}); 9</script> 10<p>入力してください</p> 11<ul> 12<li><input class="box" type="text" name="name" placeholder="box"></li> 13<li><input class="box" type="text" name="name" placeholder="box"></li> 14<li><input class="box" type="text" name="name" placeholder="box"></li> 15<li><input class="nobox" type="text" name="name" placeholder="nobox"></li> 16</ul>
投稿2023/10/27 08:39
総合スコア118452
0
ベストアンサー
getElementsByClassName() はリストを返すので、リスト内のそれぞれの要素について処理する必要があります。
js
1for (let box of document.getElementsByClassName("box")) { 2 box.style.backgroundColor = '#F0E0E0'; 3 box.style.color = 'red'; 4 box.style.fontWeight = 'bold'; 5}
入力されたフィールドだけ変更したいなら、this を渡すとか event.target を使うなどしましょう。
html
1<input class="box" type="text" name="name" oninput="inputChange(this)">
js
1function inputChange(input) { 2 input.style.backgroundColor = '#F0E0E0'; 3 input.style.color = 'red'; 4 input.style.fontWeight = 'bold'; 5}
投稿2023/10/27 07:59
編集2023/10/27 08:08
総合スコア22019
あなたの回答
tips
プレビュー
