teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

inputタグが空欄の状態でクリックしたときに不具合が出てしまったので、追記で質問させていただきました。

2020/01/07 06:29

投稿

nyoro
nyoro

スコア16

title CHANGED
File without changes
body CHANGED
@@ -63,4 +63,20 @@
63
63
  ###強引だと感じる点
64
64
  ・if文の中で、一度クラスを付与したあとに、それぞれremoveClassで不要なクラスを外している書き方が明らかに冗長なので直したいです。click関数を実行したら、その関数内でremoveClassを実行すれば上手くいくと思ったのですが、全てのクラスが消えてしまうのでDOM操作自体ができなくなってしまいます。
65
65
 
66
- ・全ての条件に合致しない場合当然色の変化はないのですが、inputに3→1のように順に入力すると、赤のクラスが付与されたままなので3の倍数ではないのに赤色になってしまうという現象が起きます。それを回避する為、わざわざCSSに黒色のクラスを書いて指定するようにしているのですが、この書き方もあまり良いように思えないので、何か別の方法はないでしょうか。
66
+ ・全ての条件に合致しない場合当然色の変化はないのですが、inputに3→1のように順に入力すると、赤のクラスが付与されたままなので3の倍数ではないのに赤色になってしまうという現象が起きます。それを回避する為、わざわざCSSに黒色のクラスを書いて指定するようにしているのですが、この書き方もあまり良いように思えないので、何か別の方法はないでしょうか。
67
+
68
+ ###追記
69
+ 皆さん回答ありがとうございます!
70
+ すみません!一点だけ不具合を見つけたのですが、input欄に何も入力されていない状態でボタンをクリックすると、中身が空のまま表示されて、色が紫になってしまいます。
71
+ inputが空欄の場合、「◆結果◆」の文字列と色は何も変化させたくないので、下記のように記述を変更しました。
72
+ ```js
73
+ if (num.length) {
74
+ result.text("◆" + num + "◆");
75
+ }
76
+
77
+ ```
78
+ とりあえず文字列の変更は止められたのですが、色が紫に変わってしまうのが直せませんでした。
79
+ 下記のように3かつ7で割ったときに0になる場合のみクラスを付与するように書いているのですが、何故紫色になってしまうのでしょうか。
80
+ ```js
81
+ num % 3 === 0 && num % 7 === 0
82
+ ```