Purescript 中的 getElementById

Question

我对 Purescript 很陌生，所以这可能是一个天真的问题。

我想编写一个 Purescript 函数，该函数从浏览器上的 HTML 输入元素读取输入并将一些输出写入另一个 HTML 输入元素。

使用普通的 Javascript，它就像document.getElementById('output').value = myFun(document.getElementById('input'));. 我如何只用 Purescript 做到这一点？

Answer 1

编辑：

我注意到我的答案不符合要求 - 我只是设置了一个元素值。如果我找到更多时间，我可能还会添加从元素值块中读取的内容，但您应该能够从已经提供的提示中猜测如何执行此操作:-)

通常，在使用 PureScript 时，您希望使用一些高级框架来操作 DOM，例如：halal、react-basic、concur、spork、elmish、flare、hedwig、flame（当然我错过了其他一些 - 抱歉） .

但是，如果您真的想手动修改 DOM，请不要感到惊讶，因为它不像在命令式 JavaScript 中那样令人愉快。这是故意的 - PureScript 有能力将效果与纯函数分开，我们必须Effect在这里的每一步都使用。另一方面，这给了我们一种独特的能力来推理代码，并确定哪里可能发生副作用以及我们程序的哪些部分是纯的。

所以让我们使用低级purescript-web-html。这个库是低级的，但围绕 DOM API 提供了严格的类型，所以就像我说的，它需要大量的手动值传递：

module Main where

import Prelude

import Data.Maybe (Maybe(..))
import Effect (Effect)
import Web.DOM.Document (toNonElementParentNode)
import Web.DOM.Element (setAttribute)
import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toDocument)
import Web.HTML.Window (document)

main :: Effect Unit
main = do
  w ? window
  d ? document w
  maybeElement ? getElementById "test-input" $ toNonElementParentNode $ toDocument  d
  case maybeElement of
    Nothing ? pure unit
    Just elem ? do
      setAttribute "value" "new-value" elem

这可以使用点自由样式写得更短一些，以避免中间变量：

main :: Effect Unit
main = window >>= document >>= toDocument >>> toNonElementParentNode >>> getElementById "test-input" >>= case _ of
  Nothing ? pure unit
  Just elem ? setAttribute "value" "new-value" elem

直接 DOM 操作可能不是开始构建更大项目或使用这种非常棒的语言开始冒险的最佳方式。另一方面，它有时会很有用;-)