CODEWITHSUNDEEP
javascripthtmlcss
Kamil K
Kamil K

Reputation: 32

JavaScript Button Value and Progress bar

In short, what I am trying to do is few buttons and just a single progress bar which reacts on every button differently. I tried getting the value of a button then making an if statement but the variable returns me NaN. I can't figure it out..

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>

Upvotes: 0

Views: 77

Answers (1)

Talg123
Talg123

Reputation: 1506

well basicly all u have to do is send the event and then get the value for instance:

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>

then you can get the value and do what ever you want.

Upvotes: 1

Related Questions