[Beginner Question] Click on a button do nothing

Phoenix Forum Questions / Help
1

Hi,

I’m doing the Hangman Game of the Dave’s Elixir online course and I have a problem with a button.
When I click on, nothing happens. As I am beginner in Elixir/Phoenix I have no idea what I’ m doing wrong…

I have installed Phoenix version 1.5.3 on Ubuntu and I have tried with Chromium (Version 83) or Firefox (76.0.1)

I have created my app using the following command:

-> % mix phx.new gallows --no-ecto --no-webpack

The completes files are available on my git repo.

The file router.ex contains:

scope "/hangman", GallowsWeb do
    pipe_through :browser

    get "/", HangmanController, :new_game

    post "/",  HangmanController, :create_game

    put "/", HangmanController, :make_move
  end

The command mix phx.routes shows for Hangman:

hangman_path  GET   /hangman        GallowsWeb.HangmanController :new_game
hangman_path  POST  /hangman      GallowsWeb.HangmanController :create_game
hangman_path  PUT   /hangman        GallowsWeb.HangmanController :make_move

the Content of the file template/hangman/new_game.html.eex is:

<h1>Welcome to Hangman!</h1>

<%= button("New Game", to: Routes.hangman_path(@conn, :new_game), method: :get) %>

Screenshot of the inspection into Chromium Browser:

hangman
hangman1443×253 38.8 KB

Thank you in advance for your help! :slight_smile:

2

Hi,

I just a user and no expert on Phoenix as well but I would start by the rather obvious next step. What does the log say and what does the Network tab say?

3

Hi,

I checked out your code and it looks like when the “new game” button is clicked, it reloads the same page you are on. That’s probably why it appears as if nothing happens.

Here is the flow of things

  1. Click the new game button
  2. Elixir looks for the route corresponding to Routes.hangman_path(@conn, :new_game), which is GET /hangman
  3. The GET /hangman route calls the new_game function in the GallowsWeb.HangmanController module
  4. That function renders new_game.html, which is exactly what is on your screen right now.

If you check your network tab as @otuv suggested you will probably see some activity after pressing the button

4

It looks like the button/2 function generates some HTML code that doesn‘t work natively in browsers but needs to be handled by custom JS code that ships with Phoenix. Have you made sure that this code (phoenix.js or so) is actually loaded into the page?

Edit: See https://hexdocs.pm/phoenix_html/Phoenix.HTML.Link.html#link/2-javascript-dependency

1 Like
5

Thank’s a lot for your answer!

I created the project again but with webpack enabled:

-> % mix phx.new gallows --no-ecto

Now I can see the response in the shell:

[info] GET /hangman [debug] Processing with GallowsWeb.HangmanController.new_game/2 Parameters: %{"_csrf_token" => "", "_method" => "get"} Pipelines: [:browser]

However nothing still displayed:

hangman_screenshot_network
hangman_screenshot_network1821×301 50.9 KB

I have updated my repository so that you can read the code easily: https://github.com/pchp/elixir/tree/master/course/hangman_game/gallows

1 Like
6

I see there are no files in the priv directory when running the project in dev and I can see the following line in iex (when you start the project with iex -S mix phx.server):

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /js/app.js (GallowsWeb.Router)

As @zimt28 suggests there does appear to be a problem with JS.

I’m still new to elixir and phoenix, but at a guess I would say initially your issue was the route where the button is calling the same path as @joey_the_snake suggests, but now you may also have an issue with your webpack config (just a suggestion) as your JS and CSS files appear to not be bundled correctly.

1 Like