JavaScript 进度条不起作用

Question

这段代码只对我不起作用，当我从 html 中删除脚本标签到外部文件时不起作用，我需要帮助来完成所有记录工作并将其移动到外部文件...... ...................................

window.onload = function() {
  var elem = document.getElementById("myBar");
  var valuee = document.getElementById("bar").value;
  var width = 0;
  var id = setInterval(frame, 10);

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

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">0%</div>
  <input type="hidden" id="bar" name="bar" value="60" />
</div>

<div id="myProgress">
  <div id="myBar">0%</div>
  <input type="hidden" id="bar" name="bar" value="60" />
</div>

<br>
<button onclick="move()">Click Me</button>

Answer 1

window.onload = function() {
  var elem = document.getElementById("myBar");
  var valuee = document.getElementById("bar").value;
  var width = 0;
  var id = setInterval(frame, 10);

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

  var elem_1 = document.getElementById("myBar_1");
  var valuee_1 = document.getElementById("bar_1").value;
  var width_1 = 0;
  var id_1 = setInterval(frame_1, 10);

  function frame_1() {
    if (width_1 >= 100) {
      clearInterval(id_1);
    } else {
      width_1++;
      elem_1.style.width = width_1 + '%';
      elem_1.innerHTML = width_1 * 1 + '%';
    }
  }
}

#myProgress,
#myProgress_1 {
  width: 100%;
  background-color: #ddd;
}

#myBar,
#myBar_1 {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">0%</div>
  <input type="hidden" id="bar" name="bar" value="60" />
</div>

<div id="myProgress_1">
  <div id="myBar_1">0%</div>
  <input type="hidden" id="bar_1" name="bar" value="60" />
</div>

<br>
<button>Click Me</button>