使用javascript更新文本中的html百分比

我有下面的HTML元素：

<div class="progressbar-text" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: rgb(91, 91, 91); font-family: Lato, Helvetica, sans-serif; font-size: 2rem;">84%</div>

---

这不会更改页面呈现中的任何内容。我做错什么了吗？顺便说一句，当我检查元素并手动更改84%时，它工作正常。

您的javascript位置是什么 我希望此代码可以帮助您：

84%
让数据=document.getElementsByCassName（“progressbar文本”）[0]；
data.innerText=“70%”；

这可能会帮助您：

const update = document.getElementsByClassName("progressbar-text");
update.setAttribute("style", "left: 50%; top: 50%;")

试试这个

<input type="range" id="radio" value="1" min="0" max="100"/>
<p id="para"></p>

//script
<script>
  let range = document.getElementById("range");
  Let para = document.getElementById("para").
     para.innerHTML = range.value;

     range.oninput = function() {
         para.innerHTML = range.value;
     }

 </script>

//剧本
让range=document.getElementById（“range”）；
让para=document.getElementById（“para”）。
para.innerHTML=range.value；
range.oninput=函数（）{
para.innerHTML=range.value；
}

如果文档未准备好，有时您将无法查询元素。您在控制台中是否有任何错误？对我有用：为什么使用

vue.js

标记，因为您使用的是vanilla js。在我测试代码时，您的代码运行良好

<input type="range" id="radio" value="1" min="0" max="100"/>
<p id="para"></p>

//script
<script>
  let range = document.getElementById("range");
  Let para = document.getElementById("para").
     para.innerHTML = range.value;

     range.oninput = function() {
         para.innerHTML = range.value;
     }

 </script>