How to delete and output a new string in a text field? - functional-programming

Question

I want to clear the text field and want to create a new placeholder when pressing a button. Additionally I want an Increment in the placeholder that counts every new text field that is created (player 1, player 2, player 3, etc.) I tried to use the Increment button from the elm docs. But I get an error:
Something is off with the 5th branch of this `case` expression:
78| model "Player" + 1
^^^^^^^^^^^^^^^^^^
The 5th branch is:
number
But the type annotation on `update` says it should be:
Model
I tried to create a new string player that adds every time the "+add" button is pressed +1. So with an onClick event + the name(Clear), how it is also done in the docs.
Here is my Elm Code:
--imports
...
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Player =
{ player : String
, strength : Int
, number : Int
}
type alias Model =
{ content : String
, teams : List Player
, currentNumber : Int
, currentPlayer : String
, currentStrength : Int
}
init : Model
init =
{ content = ""
, teams = []
, currentNumber = 0
, currentPlayer = ""
, currentStrength = 0
}
-- UPDATE
type Msg
= Change String
| Clear
update : Msg -> Model -> Model
update msg model =
case msg of
Change newContent ->
{ model | content = newContent }
Clear ->
model "Player" + 1
-- VIEW
view : Model -> Html Msg
view model =
div []
[ h1 [style "font-family" "impact"] [ text "Team Creator" ]
, h2 [style "font-family" "impact"] [ text "Name and Strength:" ]
, div[] [ input [ placeholder "🏅 Player 1", style "width" "300px"] [] ]
, input [ placeholder "💪🏼 Strength", style "width" "300px"] []
, div [] [ button [ style "background-color" "#66cc81", style "color" "white", onClick Clear] [ text "+ADD" ] ]
, h2 [style "font-family" "impact"] [ text "Teams:" ]
, div [] [ text (model.currentPlayer)]
]

Answer 1

As the error message states, you are returning a type String from a function that returns Model by its type signature. The problem is this line
Clear ->
model "Player" + 1
It is a bit unclear what this is supposed to do, but in the case expression above, the code creates a new model where it makes the update content = newContent. If you want to update some other field in the model, you need a similar pattern. For example (not 100% sure about the syntax, but you'll hopefully get the idea)
Clear ->
{ model | currentNumber = currentNumber + 1 }