updating model with parameter in elm 0.18

Question

New to elm. Using elm 0.18.

This is a very simple SPA with 12 buttons (each with a musical note value). You click the button, and it displays the note you clicked.

I'd like to do this by assigning a function Put to a button via onClick, then passing it a string parameter note that gets used to update the model.

Here is my code:

import Html exposing (div, beginnerProgram, text, button)
import Html.Events exposing (onClick)
import List exposing (..)

main =
  beginnerProgram { model = model, update = update, view = view }

-- model
model =
  { key = "C" }

keys =
  ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]

-- update
type Action = Put

update msg model =
  case msg note of
    Put ->
      { model | key = note }

-- view
makeButton note =
  button [ onClick Put note ] [text note]

view model =
  div [] [
    div [] [text (toString model.key)],
    div [] (map makeButton keys)
  ]

I get this error:

-- NAMING ERROR -------------------------------------------------- musiccalc.elm

Cannot find variable `note`

19|   case msg note of

Mark Karavan Mark Karavan · Accepted Answer · 2017-09-02T23:49:19

Got it, you type the action, then evaluate first before going into onClick.

import Html exposing (div, beginnerProgram, text, button)
import Html.Events exposing (onClick)
import List exposing (..)

main =
  beginnerProgram { model = model, update = update, view = view }

-- model
model =
  { key = "C" }

keys =
  ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]

-- update
type Action =
  Put String

update msg model =
  case msg of
    Put note ->
      { model | key = note }

-- view
makeButton note =
  button [ onClick (Put note) ] [text note]

view model =
  div [] [
    div [] [text (toString model.key)],
    div [] (map makeButton keys)
  ]

updating model with parameter in elm 0.18

1 Answers