JavaScript 按钮值和进度条

Question

简而言之，我想要做的是几个按钮和一个进度条，它对每个按钮的 react 都不同。我尝试获取按钮的值，然后进行 if 语句，但变量返回 NaN。我想不通..

function progressBarAbs() {
  var html_bar = document.getElementById("bar");
  var width = 1;
  var interval = setInterval(progressIntents, 10);

  function progressIntents() {

    var button = $("button").click(function() {
      var clicked_button = $(this).val();
    });

   var but = parseInt(button, 10);
   

   console.log(but);
         

    if (width >= 70) {
      clearInterval(interval);
    } else {
      width++;
      html_bar.style.width = width + '%';
      html_bar.innerHTML = width * 1 + '%';
    }



 }
}

<button id="java" value="1" onclick="progressBarAbs()">java</button>
    <button id="css" value="2" onclick="progressBarAbs()">css</button>
  <div id="progress-bar"><div id="bar">0%</div> </div>

Answer 1

基本上你所要做的就是发送事件然后获取值，例如:

function progressBarAbs(e){
  console.log(e.target.value);
}

<button id="java" value="1" onclick="progressBarAbs(event)">java</button>
    <button id="css" value="2" onclick="progressBarAbs(event)">css</button>
  <div id="progress-bar"><div id="bar">0%</div> </div>

然后您可以获得该值并做任何您想做的事情。