0

我想用 ReScript 实现一个交互式滑块，所以我想把这个 JavaScript 翻译成 ReScript（礼貌：https ://www.w3schools.com/howto/howto_js_rangeslider.asp ）：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

其中目标 HTML ( slider.html) 是：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
.slidecontainer {
    width: 100%;

}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;

}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #04AA6D;
    cursor: pointer;

}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #04AA6D;
    cursor: pointer;

}
        </style>
    </head>
    <body>
        <div class="slidecontainer">
            <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
            <p>Value: <span id="demo"></span></p>
        </div>

        <script src="./bundled.bs.js"></script>
    </body>
</html>

其中bundled.bs.js是将编译后的.bs.js代码与Browerify.

到目前为止，我使用rescript-webapi编写了以下代码：

open Webapi.Dom
open Belt.Option

@val external document: Document.t = "document"

let slider = getExn(Document.getElementById("myRange", document))
let output = getExn(Document.getElementById("demo", document))

Element.setInnerText(output, getExn(Element.getAttribute("value", slider)))

Element.addEventListener("value", _ => 
    Element.setInnerHTML(output, getExn(Element.getAttribute("value", slider))), slider)

但是，这并没有按预期工作；我可以看到滑块并滑动它，但输入标签的值没有更新：

滑块在那里，但它不会更新值。

我的 ReScript 翻译缺少什么？

+更新：

@glennsl 为我提供了以下代码：

open Webapi.Dom
open Belt

let slider = document->Document.getElementById("myRange")->Option.getExn
let output = document->Document.getElementById("demo")->Option.getExn

output->Element.setInnerText(slider->Element.getAttribute("value")->Option.getExn)

slider->Element.addEventListener("input", _ => {
  let value = slider->Element.getAttribute("value")->Option.getExn
  output->Element.setInnerHTML(value)
})

我可以看到Value: 具有正确初始值的50. 初始屏幕的值：50。 但是，即使我重新定位了滑块，该值也不会更新：值未使用重新定位的滑块更新。

如上所述，我将这段代码（称为slider.res）编译slider.bs.js成browserify slider.bs.js -o bundled.bs.js.

4

2 回答 2

1

没有事件称为value。您要翻译的 JavaScript 代码使用input( oninput)。

您还混合了“数据优先”和“数据最后”。rescript-webapi使用“数据优先”，而bs-webapi分叉rescript-webapi的 使用“数据最后”。您可能基于bs-webapi.

无论如何，这应该适用于rescript-webapi：

open Webapi.Dom
open Belt

let slider = document->Document.getElementById("myRange")->Option.getExn
let output = document->Document.getElementById("demo")->Option.getExn

output->Element.setInnerText(slider->Element.getAttribute("value")->Option.getExn)

slider->Element.addEventListener("input", _ => {
  let value = slider->Element.getAttribute("value")->Option.getExn
  output->Element.setInnerHTML(value)
})
于 2021-12-26T09:37:51.837 回答
1

呃，主要问题有两个：

  1. 正如@glennsl 指出的那样，事件名称是错误的。应该是"input"，不是"value"。

  2. 我误以为this.value指的是 的value属性this，即slider。实际上，这被认为slider是一个 HTML 输入元素，并指的是它的输入值。

由于我们不能直接将 an转换Dom.Element.t为Dom.HtmlInputElement.t，因此我们先将其转换为Dom.Node.t，然后再转换为Dom.HtmlInputElement.t。因此，基于@glennsl 的代码，代码是：

open Webapi.Dom
open Belt

let slider = document->Document.getElementById("myRange")->Option.getExn
let output = document->Document.getElementById("demo")->Option.getExn

output->Element.setInnerText(slider->Element.getAttribute("value")->Option.getExn)

slider->Element.addEventListener("input", _ => {
  let value = slider->Element.asNode->HtmlInputElement.ofNode->Option.getExn->HtmlInputElement.value
  output->Element.setInnerHTML(value)
})
于 2021-12-27T02:09:07.247 回答