Phx-click binding not working

Phoenix Forum Questions / Help
#1

I’m taking a liveview class from pragmatic studio and they have the following code:

  def render(assigns) do
    ~L"""
    <h1>Front Porch Light</h1>
    <div id="light">
      <div class="meter">
        <span style="width: <%= @brightness %>">
            <%= @brightness %>%
        </span>
      </div>

      <button phx-click="off">
          <img src="images/light-off.svg" >
      </button>

      <button phx-click="on">
          <img src="images/light-on.svg" >
      </button>

    </div>

    """
  end

  def handle_event("on", _, socket) do
    socket = assign(socket, :brightness, 100)
    {:noreply, socket}
  end

  def handle_event("off", _, socket) do
    socket = assign(socket, :brightness, 0)
    {:noreply, socket}
  end

the problem is the handle_events are not being called.

can anybody see what I’m doing wrong,

thanks

#2

Maybe because of the double closing tags in the span element <%= @brightness %>%> ?

#3

no, that wasn’t it, that was working even before I added the buttons. I changed browser windows and recompiled the program again and this time it sort of works, the width should change from 0 to X but the width is not changing now… but at least the handlers are being called now… thank for looking for me… :slight_smile:

#4

after looking at you reply, I took a second and third look, and found the problem, the width code need a % symbol just before the last " and that fixed the whole problem…

1 Like