Javascript 进度条宽度不动态更改

我试图实现一个进度条，有点像这样 通过将宽度大小传递给参数。但是宽度大小没有增加。我的代码有什么问题

组件。ts

---

由于W3代码的执行方式，仅在按下按钮后应用宽度。您应该注意，如果您的宽度设置为50左右，当您按下按钮时，条形图将立即从50%开始加载。
如果希望进度条在单击之前从不同的数字开始，则这三行需要位于“移动”功能之外：

您可以将其放在另一个函数中，并根据其中的输入将宽度设置为变量

move(width) {
    var elem = document.getElementById("progress");
    var id = setInterval(frame, 10);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        elem.style.width = width + '%';
      }
    }

    onMessage() {
      this.ws.onmessage = (message) => {
      console.log("Got websocket message " + message.data);
        // Decode the JSON
      var data = JSON.parse(message.data);

        // Handle errors
      if (data.error) {
       alert(data.error);
       return;
       }
       let percentage = data.percent;
       $('#myBar1').text(percentage + "%");
       console.log("percentage is:: " + percentage);
       this.move(percentage);
       if (data.action == "complete") {
       console.log("uploaded successfully...")
       }
      };
     }

var width = 50;
var elem = document.getElementById("myBar");   
elem.style.width = width + '%';