如何使用 OnClick 事件打印列表的内容？

Question

我创建了一个函数，可以在按下按钮时将字符串添加到列表中。现在的问题是我无法输出推入列表的信息。我开始编写一个提交函数，但我真的不知道我必须在其中包含哪个模型。我希望输出在最后一个 div 中，所以现在是 "model.currentPlayer"。在 Msg 部分，我真的不知道我必须在那里使用哪个变量，因为完整的列表应该只插入到我想要输出的 div 中。

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

您可以定义一个视图函数来打印 div 列表中每个玩家的名字，如下所示：

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

用它代替示例中的最后一行将如下所示：

, playerListView model.teams

或者，如果您想将所有内容都放在一行中，示例中的最后一行可以是：

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

如何使用 OnClick 事件打印列表的内容？

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

functional-programming

list

elm