How to print the content of a list with a OnClick event?

Question

I've created a function that adds strings to a list, when a button is pressed. Now the problem is that I can't Output the information that was pushed into the list. I started to write a Submit function but I don't really get which model I have to include there. I want the output to be in the last div so there where now is "model.currentPlayer". In the Msg part I don't really get which variable I have to use there, since the full List should just be inserted in the div where I want to have my Output.

import Browser
import Html exposing (Html, Attribute, button, text, h1, h2, h3, p, div, input, text)
import Html.Attributes exposing (style)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)




-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL
type alias Player =
  { player : String
  , strength : Int
  --, number : Int
  --, playernumber : Int
  --, placeholder : String
  --, counter : Int
  }


type alias Model =
  { content : String
  , teams : List Player
  , currentNumber : Int
  , currentPlayernumber: Int
  , currentPlayer : String
  , currentStrength : Int
  , placeholderPlayer : String
  , placeholderCounter : Int
  , placeholderStrength: Int
  }





init : Model
init =
  { content = ""
  , teams = []
  , currentNumber = 0
  , currentPlayernumber = 0
  , currentPlayer = ""
  , currentStrength = 0
  , placeholderPlayer = ""
  , placeholderCounter = 1
  , placeholderStrength = 0
   }



-- UPDATE


type Msg
  = Change String
  | ChangeNumber String
  | ChangePlayernumber String
  | ChangePlayer String
  | ChangeStrength String
  | Add  
  --| Submit String






update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent }

    ChangeNumber number ->
      { model | currentNumber = Maybe.withDefault 0 (String.toInt number) }

    ChangePlayernumber playernumber ->
      { model | currentPlayernumber = Maybe.withDefault 0 (String.toInt playernumber) }


    ChangePlayer player ->
      { model | currentPlayer = player }

    ChangeStrength strength ->
      { model | currentStrength = Maybe.withDefault 0 (String.toInt strength) }

    Add ->
      { model | teams = ({player = model.currentPlayer, strength = model.currentStrength} :: model.teams), currentPlayer = "", currentStrength = 0 } 

   {- Submit player -> 
      { model | teams = } -}





-- VIEW

view : Model -> Html Msg
view model =
  let
    playername = "🏅 Player" ++ String.fromInt (List.length model.teams + 1)
  in
  div []
    [ h1 [style "font-family" "impact"] [ text "Team Creator" ]
    , p [style "font-family" "sans-serif", style "font-size" "15px", style "color" "grey"] [ text "With the Team Creator you can create teams. Insert information about the name and the strength(1-5) of every player and finally how many teams you want to have created by the Team Creator" ]
    ,  h2 [style "font-family" "impact"] [ text "Number of Teams:" ]
    , input [ placeholder  "Number", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value (String.fromInt model.currentNumber), onInput ChangeNumber] []
    ,  h2 [style "font-family" "impact"] [ text "Players per Team:" ]
    , input [ placeholder  "Playernumber", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value (String.fromInt model.currentPlayernumber), onInput ChangePlayernumber] []
    ,  h2 [style "font-family" "impact"] [ text "Name and Strength:" ]
    , div[] [ input [placeholder  playername, style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.currentPlayer, onInput ChangePlayer] [] ]
    , input [ placeholder  "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#4286F5", value (String.fromInt model.currentStrength), onInput ChangeStrength] []
    , div [] [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "300px", style "border-radius" "25px", style "height" "40px", style "font-size" "20px", style "margin-right" "70px", onClick Add] [ text "+ADD Player" ] ]
    , div [] [ button [ style "background-color" "#4286F5", style "color" "white", style "margin-top" "10px", style "width" "300px", style "border-radius" "25px", style "height" "40px", style "font-size" "20px", style "margin-right" "70px"{-, value model.teams, onClick Submit-}] [ text "SUBMIT!" ] ]
    ,  h2 [style "font-family" "impact", style "margin-top" "20px"] [ text "Generated Teams:" ]
    , div []  (List.map (\{ player } -> div [] [ text player ]) model.teams)
    ]

Answer 1

You could define a view function that prints the names of each player in a list of divs like so:

playerListView : List Player -> Html Msg
playerListView players =
    let
        playerRow player =
            div [] [ text player.player ]
    in
    div [] (List.map playerRow players)

Using it in place of your last row in your example would look like this:

, playerListView model.teams

Or, if you want to keep it all in one line, the last line in your example could be:

, div [] (List.map (\{ player } -> div [] [ text player ]) model.teams)