Onclick进度栏

Question

所以我试图获得一个进度条来增加点击量，但是每当我点击时，宽度就跳到30％。当我单击按钮时，应该增加变量号，而if语句将检查数字是否等于1,2,3或4，但是我认为它将立即用3替换变量号。

var number = 0;

function move() {
  var elem = document.getElementById("myBar"); 
  number++;  

  if (number = 1) {	
    elem.style.width = 10 + '%'; 
    elem.innerHTML = 10 + '%';
  }

  if (number = 2) {
    elem.style.width = 20 + '%';
    elem.innerHTML = 20 + '%';
  }

  if (number = 3) {
    elem.style.width = 30 + '%';
    elem.innerHTML = 30 + '%';
  }

  function check() {
    if (number = 4){
      console.log(number);
      document.getElementById('barbutton').className = 'hidden';
    }
  }
}

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

#myBar {
  width: 0%;
  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>
</div>
<br>
<button id="barbutton" onclick="move()">Click Me</button>

Answer 1

当您放置(number = 1)时，就好像您在定义变量一样，

您所要做的就是根据情况放置双精度等于i.e. (number == 1)，也不需要使用函数check()，就可以像其他函数一样。

var number = 0;

function move() {
  var elem = document.getElementById("myBar"); 
  number++;  

  if (number == 1) {	
    elem.style.width = 10 + '%'; 
    elem.innerHTML = 10 + '%';
  }

  if (number == 2) {
    elem.style.width = 20 + '%';
    elem.innerHTML = 20 + '%';
  }

  if (number == 3) {
    elem.style.width = 30 + '%';
    elem.innerHTML = 30 + '%';
  }

  if (number == 4){
    console.log(number);
    document.getElementById('barbutton').className = 'hidden';
  }
  
}

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

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
.hidden {
  display: none;
}

<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
	<div id="myBar">0%</div>
</div>
<br>
<button id="barbutton" onclick="move()">Click Me</button>

检查this page以获得有关运算符的更多信息。

更新

为了在(number == 4)添加此CSS规则时隐藏按钮：

.hidden {
  display: none;
}