我想要一个更新的值来更改滑块手柄的位置并更新“评分”答案

【问题标题】：I want a updated value to change the slider handle placement and update "rating score"我想要一个更新的值来更改滑块手柄的位置并更新“评分”
【发布时间】：2017-10-03 14:27:00
【问题描述】：

注意：我是 Web 开发的新手

我的目标概述：我有一个每周都在变化的数据。该值将确定滑块手柄在滑块中的位置并更新当前“分数”。例如，如果本周的值为 0.25，则滑块上的句柄应为 0.25，评分应为“.25” 所有这一切都应该在用户到达此页面后发生。

我现在拥有的：我仍在研究如何获得价值，让我们说这周的价值是“.5” 我正在研究并看到“onload”将是我更改评分的最佳选择，但它不会更新分数。至于滑块句柄，我尝试先更新评分，然后将该值插入滑块的 value=""，但没有任何反应。

HTML：

<p id="rating" onload="myFunction()">Rating: <span id="ahtaRating">0</span></p>
<input type="range" min=".00" max="1" value="ahtaRating.value=value"   class="slider" id="myRange" step=".01">

javascript：

function myFunction() {
var x = .5
return document.getElementById("ahtaRating").innerHTML = x
}

【问题讨论】：

标签： javascript html slider onload onload-event

【解决方案1】：

这个片段应该可以帮助你。我还添加了一个重置按钮和一个 onchange 事件，这样当您使用幻灯片时，它也会更改 html 跨度值。

        function myFun(val) {
          document.getElementById("ahtaRating").innerHTML = val;
        }
        
        function initRange(val) {
          document.getElementById("myRange").value = val;
          document.getElementById("ahtaRating").innerHTML = val;
        }

<body onload="initRange(1);">
  <p id="rating" >
    Rating: <span id="ahtaRating"> 0.5 </span>
  </p>
  <input id="myRange" type="range" step=".01" min=".00" max="1"  onchange="myFun(this.value);" class="slider"  >
  <button onclick="initRange(0.5);">reset</button>
</body>

【讨论】：