Javascript setInterval和clearInterval不工作

我试图做一个动态进度条，从1%宽度开始，到100%宽度； 下面是函数

const dynamicBar = (id)=>{
            let bar = document.getElementById(id);
            let width = 1;

            let id= setInterval(frame,10);
            function frame(){
                if(width>=100){
                    clearInterval(id);
                }
                else{
                    bar.style.width = width + "%";
                    width++;
                }
            }

        };

以及html部分：

<div class="w3-light-grey">
    <div class="w3-red" style="width:20%;height:20px;" id="bar1">       
    </div>  
</div>

<button onClick="dynamicBar('bar1')" class="w3-button">Click Me</button>

但该功能不起作用。如果我使用var而不是let，它是有效的，但是我想知道如何使用let关键字来实现这一点

let不允许您两次定义某个内容，因此需要使用不同的名称。您的参数和第5行都有id，这是let所不允许的

比如说,

let var1 = true;
let var1 = false;

将抛出一个错误，因为它定义了两次var1。但是，您可以更改该值

let var1 = true;
var1 = false;

上面的代码块可以正常工作。let的使用是为了避免在大型程序中意外重写变量

常量dynamicBar=idName=>{ 让bar=document.getElementByIDName； 设宽度=1； 设id=setIntervalframe，10； 功能框架{ 如果宽度>=100{ 清晰有效； }否则{ bar.style.width=宽度+%； 宽度++； } } }; 单击“我”let不允许您两次定义某个内容，因此您需要使用不同的名称。您的参数和第5行都有id，这是let所不允许的

比如说,

let var1 = true;
let var1 = false;

将抛出一个错误，因为它定义了两次var1。但是，您可以更改该值

let var1 = true;
var1 = false;

上面的代码块可以正常工作。let的使用是为了避免在大型程序中意外重写变量

常量dynamicBar=idName=>{ 让bar=document.getElementByIDName； 设宽度=1； 设id=setIntervalframe，10； 功能框架{ 如果宽度>=100{ 清晰有效； }否则{ bar.style.width=宽度+%； 宽度++； } } };

---

当您使用var时，单击Me，您的第一个Id将被第二个Id赋值覆盖，因此它不会抛出错误。但是当您使用let时，它倾向于保持代码的完整性，并说不

例如

var foo = "something" 
var foo = "another thing"

console.log(foo) //another thing

但是

还有一件事，就是对常量值使用const

而不是这个

设id=setIntervalframe，10

使用

确保你清除了名声中的间隔

clearInterval(interval)

---

当您使用var时，您的代码将开始工作

，您的第一个Id被第二个Id赋值覆盖，因此它不会抛出错误。但是当您使用let时，它倾向于保持代码的完整性，并说不

例如

var foo = "something" 
var foo = "another thing"

console.log(foo) //another thing

但是

还有一件事，就是对常量值使用const

而不是这个

设id=setIntervalframe，10

使用

确保你清除了名声中的间隔

clearInterval(interval)

---

您的代码将开始工作

多次使用id作为变量名-您将其传递到函数中，但声明一个本地变量-可能是什么原因导致它无法工作，调用第二个变量intervalId或其他不同的名称-这就是问题所在。感谢多次使用id作为变量名—您将其传递到函数中，但声明了一个本地变量—可能是什么原因导致它无法工作，请调用第二个变量intervalId或其他不同的名称—这就是问题所在。谢谢