0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Javascriptエラー問題集

Last updated at Posted at 2020-12-06

##事前準備

ターミナル上で下記コマンドを実行してcloneする。

git clone https://github.com/Shu-Hos/ajax_app_error.git
cd chat-app_error
bundle install
yarn install
rails db:create
rails db:migrate

###問題1
新規投稿をしてもイベントが発火しません。
まずはこちらを解決しましょう!

###問題2
新規投稿をしようとすると添付画像のエラーが表示されます。
次はこちらの問題を解決してください。

スクリーンショット 2020-12-06 19.42.49.png

ヒント
エラーの英文のしっかりと確認しましょう。 formText.value = "";に対して`Cannot set property value of null`と出ています。こちら翻訳するとnullのプロパティ値を設定できないという意味になります。こちらをヒントにプロパティ周りを確認してみると良さそうです。

###問題3
問題2のエラーが解決した後に再度新規投稿しても非同期ではUndefinedが出てしまい、一度リロードしないと投稿内容が反映されません。
こちらを修正して非同期で投稿ができるようにしましょう

スクリーンショット 2020-12-06 19.50.04.png

ヒント
こちらエラーが出ずにUndefinedが出るということは、ajaxでレスポンスを受け取った後、新しい要素を作り出して表示するまでのプロセスのどこかに問題が潜んでいる可能性が高いです。

###問題4
残りはcheck機能のエラー問題です。
投稿をクリックしても色が変化せずに添付画像のエラーが出てしまいます。
こちら原因が2箇所あります。

スクリーンショット 2020-12-06 21.40.50.png

ヒント
こちら404(Not found)エラーが発生していることから、Ajax送信時に問題が起きている可能性が高いです。 ajaxの送信内容やコントローラー周りを疑ってみましょう。 コントローラーでbinding.pryを使用してみるのも良いかも知れません。

###問題5

スクリーンショット 2020-12-06 22.02.43.png

エラーはでなくなりましたが投稿を何回クリックしても色が白に戻りません。
こちらがクリックする度に色がグレーと白が交互に変わるように修正してください。

ヒント
コンソールにエラーが出ていない+グレーには色が変わるという部分から レスポンスを受けとった後に問題が潜んでいる可能性が高そうです。 色はどのように変化させているのかロジックを深く考えてみましょう。

お疲れさまです!!
何かご不明点とかあれば、今後ぜひ教えてください!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?