Thanks Peter! You are right: I simply forgot to add model as argument to my
radio function.
For whom it may interest, this is my revised version that works as required
- with little minor improvments:
- I replaced the clear checkbox by a button and changed the Model and Msg
type and the update function accordingly.
- I renamed the radio function to checkbox which it actually represents.
import Html exposing (..)
import Html.App exposing (beginnerProgram)
import Html.Attributes exposing (..)
import Html.Events exposing (onCheck,onClick)
main =
beginnerProgram { model = model, view = view, update = update }
-- MODEL
type alias Model =
{ red : Bool
, underline : Bool
, bold : Bool
}
model : Model
model =
Model False False False
-- UPDATE
type Msg
= Red Bool
| Underline Bool
| Bold Bool
| Clear
update : Msg -> Model -> Model
update msg model =
case msg of
Red bool ->
{ model | red = bool }
Underline bool ->
{ model | underline = bool }
Bold bool ->
{ model | bold = bool }
Clear ->
Model False False False
-- VIEW
view : Model -> Html Msg
view model =
div []
[ span [toStyle model] [text "Hello, how are you?!"]
, div [] [text (toString model)]
, checkbox model "bold"
, checkbox model "underline"
, checkbox model "red"
, label []
[ br [] []
, button [ onClick Clear ] [ text "clear" ]
]
]
checkbox : Model -> String -> Html Msg
checkbox model str =
let (event,model') =
case str of
"red" -> (Red,model.red)
"underline" -> (Underline,model.underline)
"bold" -> (Bold,model.bold)
_ -> (Red,model.red)
in
label []
[ br [] []
, input [ type' "checkbox", checked model', onCheck event ] []
, text str
]
toStyle : Model -> Attribute msg
toStyle model =
style
[ ("color", if model.red then "red" else "black")
, ("text-decoration", if model.underline then "underline" else "none")
, ("font-weight", if model.bold then "bold" else "normal")
]
Am Mittwoch, 22. Juni 2016 21:26:24 UTC+2 schrieb Peter Damoc:
>
> You should have gotten a compiler error in your radio code but you somehow
> ended up with the wrong thing. :)
>
> The model in the radio is not the current model of your running up but it
> is the initial model which is also called "model".
>
> So, make sure your radio buttons receive the current value of the the
> model. ;)
>
>
>
>
>
>
> On Wed, Jun 22, 2016 at 10:02 PM, Immanuel Normann <[email protected]
> <javascript:>> wrote:
>
>> Hi,
>>
>> as a former enthusiastic Haskell programmer I got excited about Elm and
>> eventually started today to learn Elm by examples (
>> http://elm-lang.org/examples).
>>
>> My first exercise was about checkboxes:
>> http://elm-lang.org/examples/checkboxes
>>
>> There at the very bottom an exercise is proposed:
>>
>>> -- Exercise: move the repetative code in `view` into a separate function
>>> -- and use it three times.
>>>
>>
>> I introduced a function named "radio" for this purpose and it works (code
>> below).
>>
>> Then I was thinking about extending the exercise a bit: I want a fourth
>> radio button named "clear" that sets the model of the three other buttons
>> to False if clear is True. So I extended the types *Model* and *Msg*
>> appropriately. And this works as well. However, I failed in the
>> implementation of the last natural requirement: when I check the clear
>> button all the other buttons should be unchecked.
>>
>> How can I achieve this?
>>
>> This is my compiling but incomplete attempt:
>>
>> import Html exposing (..)
>> import Html.App exposing (beginnerProgram)
>> import Html.Attributes exposing (..)
>> import Html.Events exposing (onCheck)
>>
>>
>> main =
>> beginnerProgram { model = model, view = view, update = update }
>>
>>
>>
>> -- MODEL
>>
>>
>> type alias Model =
>> { red : Bool
>> , underline : Bool
>> , bold : Bool
>> , clear : Bool
>> }
>>
>>
>> model : Model
>> model =
>> Model False False False True
>>
>>
>>
>> -- UPDATE
>>
>>
>> type Msg
>> = Red Bool
>> | Underline Bool
>> | Bold Bool
>> | Clear Bool
>>
>>
>> update : Msg -> Model -> Model
>> update msg model =
>> case msg of
>> Red bool ->
>> { model | red = bool }
>>
>> Underline bool ->
>> { model | underline = bool }
>>
>> Bold bool ->
>> { model | bold = bool }
>> Clear bool ->
>> Model False False False bool
>>
>>
>> -- VIEW
>>
>>
>> view : Model -> Html Msg
>> view model =
>> div []
>> [ span [toStyle model] [text "Hello, how are you?!"]
>> , div [] [text (toString model)]
>> , radio "bold"
>> , radio "underline"
>> , radio "red"
>> , radio "clear"
>> ]
>>
>>
>> radio : String -> Html Msg
>> radio str =
>> let (event,model') =
>> case str of
>> "red" -> (Red,model.red)
>> "underline" -> (Underline,model.underline)
>> "bold" -> (Bold,model.bold)
>> _ -> (Clear,model.clear)
>> in
>> label []
>> [ br [] []
>> , input [ type' "checkbox", checked model', onCheck event ] []
>> , text str
>> ]
>>
>> toStyle : Model -> Attribute msg
>> toStyle model =
>> style
>> [ ("color", if model.red then "red" else "black")
>> , ("text-decoration", if model.underline then "underline" else "none")
>> , ("font-weight", if model.bold then "bold" else "normal")
>> ]
>>
>>
>> -- Exercise: move the repetative code in `view` into a separate function
>> -- and use it three times.
>>
>> Somehow in my radio function the checked attribute must be updated on any
>> Msg. I stuck here. Probably a boring exercise for an experienced elm
>> programmer, but not so for beginners.
>> So any help is appriciated!
>>
>> Cheers,
>> Immanuel
>>
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Elm Discuss" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected] <javascript:>.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
>
> --
> There is NO FATE, we are the creators.
> blog: http://damoc.ro/
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
