如何在用户输入完表单后更改div的背景(如进度条)？

<form id="myForm">
  <input type="text" id="inputField" placeholder="输入内容">
  <button type="submit">提交</button>
</form>

<div id="progressBar"></div>

#progressBar {
  width: 0;
  height: 20px;
  background-color: blue;
  transition: width 0.5s ease;
}

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为

  var input = document.getElementById("inputField").value;
  var progressBar = document.getElementById("progressBar");

  // 根据用户输入的值来更改div的背景样式
  if (input === "完成") {
    progressBar.style.width = "100%";
    progressBar.style.backgroundColor = "green";
  } else {
    progressBar.style.width = "50%";
    progressBar.style.backgroundColor = "yellow";
  }
});