Elm img attribute too many arguments

Question

I am extremely new to Elm, and I am encountering a problem which frustrates me to no end. Here is my code:

view : Model -> Html Msg
view model =
    img [src "Img1.png", width 300, height 300] []
    div []
        [ input [ onInput ChangeUserInput ] []
        , button [ onClick SaveText ] [ text "Save" ]
        , button [ onClick Clear ] [ text "Clear" ]
        , h1 [] [text model.userInput]
        ]

And the error I receive is that

The `img` function expects 2 arguments, but it got 5 instead

I think its parsing the div tag arguments as img arguments, but I can't figure out how to fix it.

Answer 1

Your view function needs to return a single HTML element. At the moment it seems you are trying to return two elements: an img and a div. The div and its two arguments are being picked up as arguments to the img because there is nothing in your code that Elm can use to identify the end of the list of arguments to pass to the img function.

You will need to wrap them both in an element that contains them, for example, another div:

view : Model -> Html Msg
view model =
    div []
        [ img [ src "Img1.png", width 300, height 300 ] []
        , div []
            [ input [ onInput ChangeUserInput ] []
            , button [ onClick SaveText ] [ text "Save" ]
            , button [ onClick Clear ] [ text "Clear" ]
            , h1 [] [ text model.userInput ]
            ]
        ]