CODEWITHSUNDEEP
javascripthtmlcss
Prisca Chidimma
Prisca Chidimma

Reputation: 31

I'm having issues with Javascript Progress Bar

I'm trying to get Javascript change html text when the progress bar gets to 100% and to not run at all (progress bar) if the value of a html element = 0 but it seems there's an error somewhere because its not working.

Here's my code:

var i = 0;

function move() {
  if (i == 0) {
    i = 1;
    
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    var get = document.getElementById("btn").innerHTML('5');
    
    function frame() {
      if (width >= 100) {
        get();
        i = 0;
        frame();

      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width  + "%";
        document.getElementById("btn").innerHTML('1000');

      }
    }
  }
}

function trade() {
  var add = document.getElementById("btc");
  
  if (add == 0) {
    alert("blance is 0")
  } else {
    move();
  }
}
<html>
<head></head>
  <body>
    <div class="row">
      <div class="col-7">
        <h3> Total:</h3>
      </div>
      
      <div>
        <h5 id="btc"><strong>0 </strong></h5>
      </div>
    </div>

    <div class="row">
      <h3>Balance:</h3>
    </div>
    
    <div>
      <h5 id="btn">0</span></strong></h5>
    </div>
    <div id="myBar" style="width: 1%; background-color: red; line-height: 30px; color: black;">0%</div>

    <br>
    
    <button type="button" class="btn btn-danger" onclick="move(); trade();" > Click to Start trade</button>

  </body>
</html>

I know my code is kind of messed up. Please, Can anyone help me out?

Upvotes: 0

Views: 89

Answers (1)

vmank
vmank

Reputation: 784

I somewhat changed your code but I believe this is what you want. You can spike the values in random to change the rate of the winnings. I also changed the Total field and named it to Profit, I wasn't sure what was the purpose of this field.

I will try to point out some mistakes that I've noticed.

  1. You can define a function inside another function but the way you define and execute them is different. Check here for more info and examples.
  2. When you read values from HTML you need to convert them into numbers in order to do any mathematical operations with them I used the function parseInt(text) to do that.
  3. innerHTML is a property not a function, so if you want to change that property you need to assign it a value by using an = sign, like this document.getElementById("btc").innerHTML = 0. Thankfully you don't need to convert a number into a string to store it in this property.

That's it, I hope this to be more helpful than confusing.

function move() {
  var i = 0;

  if (i == 0) {
    
    var loadingBar = document.getElementById("myBar");
    var width = 1;
    
    var initialProfit = document.getElementById("btc").innerHTML = 0;
    var initialBalance = document.getElementById("btn").innerHTML = 1000;
    
    setInterval( function() {
      var profit = parseInt( document.getElementById( 'btc' ).innerHTML );
      var balance = parseInt( document.getElementById( 'btn' ).innerHTML );
      var random = Math.floor(Math.random() * (50 - (-35))) + (-35);
      
      if (width >= 100) {
      
        i = 0;
        return;
        
      } else {
        width++;
        loadingBar.style.width = width + "%";
        loadingBar.innerHTML = width  + "%";
        document.getElementById( 'btn' ).innerHTML = balance + random;
        
        document.getElementById( 'btc' ).innerHTML = profit + random;
      }
    }, 200 );

  }
}
<html>
<head></head>
  <body>
    <div class="row">
      <div class="col-7">
        <h3> Profit:</h3>
      </div>
      
      <div>
        <h5 id="btc">0</h5>
      </div>
    </div>

    <div class="row">
      <h3>Balance:</h3>
    </div>
    
    <div>
      <h5 id="btn">0</span></strong></h5>
    </div>
    <div id="myBar" style="width: 1%; background-color: red; line-height: 30px; color: black;">0%</div>

    <br>
    
    <button type="button" class="btn btn-danger" onclick="move();" > Click to Start trade</button>

  </body>
</html>

Upvotes: 1

Related Questions