質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

268閲覧

javascript: addEventListener keyupでaddClassができない

nanase21

総合スコア144

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/11/03 05:16

編集2019/11/03 05:37

実現したい事

inputが空でなければ「入力済み」とinputの下に表示させたい。

#困っている事
空でなければinputの下に「入力済み」と表示されるようになったが、addClassやstyle.colorが反映されなくて困っています。
addEventListenerでは、classやstyleを変更する事ができないのでしょうか?

js

1 (function () { 2 const Ok = '入力済み' 3 let hoge = document.getElementById("inputTextPv"); 4 'use strict'; 5 6 let inputText = document.getElementById("inputText"); 7 8 inputText.addEventListener('keyup', function() { 9 hoge.textContent = StatusOk; 10 hoge.addClass('text-bold'); 11 hoge.style.color = 'red'; 12 }, false); 13 14 15 })();

#試した事
フォントが変わるclassを追加する事はできたが、フォントカラーが変わらない。

js

1 (function () { 2 const StatusOk = '入力ステータス: God' 3 const StatusBad = '入力ステータス: Bad' 4 let hoge = document.getElementById("inputTextPv"); 5 'use strict'; 6 7 var inputText = document.getElementById("inputText"); 8 9 inputText.addEventListener('keyup', function() { 10 var s = inputText.value; 11 if(!!s){ 12 changecolor(); 13 }else{ 14 hoge.textContent = StatusBad; 15 } 16 }, false); 17 })(); 18 19 function changecolor() { 20 document.getElementById("inputTextPv").classList.add('red-txt'); 21 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

js

1 function changecolor() { 2 document.getElementById("inputTextPv").classList.add('red-txt'); 3 document.getElementById("inputTextPv").classList.remove('text-muted'); 4 }

text-mutedを削除していないのが原因でした。

投稿2019/11/03 05:45

nanase21

総合スコア144

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問