时间戳

首页 > 解决方案 > JavaScript 按钮值和进度条

javascript - JavaScript 按钮值和进度条

问题描述

简而言之，我想要做的是几个按钮和一个进度条，它对每个按钮的反应不同。我尝试获取按钮的值，然后进行 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>

标签： javascripthtmlcss

解决方案

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

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>

然后你可以获得价值并做任何你想做的事。

推荐阅读