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 <immanuel...@gmail.com
> <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 elm-discuss...@googlegroups.com <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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
