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]> 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]. > 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.
