将JavaScript转换为ReScript时遇到的问题
我想使用ReScript实现一个交互式滑块，所以我想将这个JavaScript转换成ReScript (提供：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捆绑在一起的结果。
到目前为止，我有以下使用重覆-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。
但是，即使我重新定位了滑块，也不会更新该值：
如上所述，我将这段代码(称为slider.res)编译为slider.bs.js，并将其与browserify slider.bs.js -o bundled.bs.js捆绑在一起。
回答 2
Stack Overflow用户
发布于 2021-12-27 02:09:07
呃，主要的问题有两个：
- 正如@glennsl所指出的，事件名是错误的。应该是
"input"，而不是"value"。 - 我把
this.value误认为是指this的value属性，即slider。实际上，这是将slider视为一个HTML元素，并引用其输入值。
由于不能将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)
})Stack Overflow用户
发布于 2021-12-26 09:37:51
没有一个叫做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)
})https://stackoverflow.com/questions/70484611
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号