CODEWITHSUNDEEP
javascripthtmlcss
user 08
user 08

Reputation: 31

Increasing a progress bar by clicking a button

enter image description hereThe idea is that the progress bar should increase when you click the button, for example, if you click on the button play the happiness should increase.

const cleanBtn = document.querySelector(".clean");
const feadBtn = document.querySelector(".fead");
const playBtn = document.querySelector(".play");



cleanBtn.addEventListener("click", () => {
  let health = document.getElementById("myHappines");
  health.style.width = 0;
  if (health.style.width > 100 % ) {
    health.style.width = 0 % ;
    else {
      health.style.width += 10 % ;
    }
  }
})

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Pet</title>
    <!--font-awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
    <!--styles-->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    <div class="sections-container">
        <div class="section1">
            <div class="pet-info">
                <ul>
                    <div id="basic">
                        <ul>Name: Elis</ul>
                        <ul>Age: 2 months</ul>
                    </div>
                    <div class="health">Health
                        <div id="myProgressHealth">
                            <div id="myHealth"></div>
                        </div>
                       
                    </div>
                    <div class="hunger">Hunger
                        <div id="myProgressHunger">
                            <div id="myHunger"></div>
                        </div>
                    </div>
                    
                    <div class="happiness">Happiness
                        <div id="myProgressHappiness">
                            <div id="myHappiness"></div>
                        </div>
                    </div>
                </ul>
            </div>
            <button class="btn-settings">Settings</button>
        </div>
            <div class="section2"> 
                <div class="pet-interactions">
                    <ul>
                    <button class="clean">Clean</button>
                    <button class="fead">Fead</button>
                    <button class="play">Play</button>
                    </ul>
                </div>
                <div class="game-control">
                    <li id="name-input">Pet Name <input type="text"></input></li>
                    <li>Game reset button <button class="btn">Reset</button></li>
                </div>
                <div class="end-game-message">
                    <p>Goodbye</p>
                </div>
            </div>
            
    </div>
   
    <!--javascript-->
    <script src="app.js"></script>
</body>
</html>

Upvotes: 0

Views: 1338

Answers (3)

Abdel Rahman Yosry
Abdel Rahman Yosry

Reputation: 33

the first mistake you have made that you enter integer value in element.style.width = 10 thats wrong you should enter string value like this element.style width = "10%";
the same thing about your if(element.style.width === 100%) thats wrong because elment.style.width return string number not int so you compare string with number its always will return false you do that instead if(parseInt(health.style.width) > 100 ) parseInt is method that change string to integer if it possible. hope that usefull

let playBtn = document.getElementById("playBtn");
let newWidth = 0
playBtn.addEventListener("click", ()=>{
 let health = document.getElementById("myHappiness");
  if(parseInt(health.style.width) > 100 )
     {
         health.style.width = "0%";
         newWidth = 0;
     }
 else{
           newWidth += 10;
           health.style.width = newWidth + "%"
          
     }
  
})
<div class="sections-container">
        <div class="section1">
            <div class="pet-info">
                <ul>
                    <div id="basic">
                        <ul>Name: Elis</ul>
                        <ul>Age: 2 months</ul>
                    </div>
                    <div class="health">Health
                         <div id="myProgressHealth" >
                            <div id="myHealth"></div>
                        </div>
                       
                    </div>
                    <div class="hunger">Hunger
                        <div id="myProgressHunger">
                            <div id="myHunger"></div>
                        </div>
                    </div>
                    
                    <div class="happiness" >Happiness
                        <div id="myProgressHappiness">
                            <div id="myHappiness" style="height:10px;background:red;width:0;"></div>
                        </div>
                    </div>
                </ul>
            </div>
            <button class="btn-settings">Settings</button>
        </div>
            <div class="section2"> 
                <div class="pet-interactions">
                    <ul>
                    <button class="clean">Clean</button>
                    <button class="fead">Fead</button>
                    <button class="play" id = "playBtn">Play</button>
                    </ul>
                </div>
                <div class="game-control">
                    <li id="name-input">Pet Name <input type="text"></input></li>
                    <li>Game reset button <button class="btn">Reset</button></li>
                </div>
                <div class="end-game-message">
                    <p>Goodbye</p>

Upvotes: 0

tacoshy
tacoshy

Reputation: 13001

There are many issues and typos in your code. Clean programming will solve them all.

  1. You want a bar for which HTML has a specific tag for: <progress>. Use it instead of divs!
  2. Use a ternary conditional operator to check if the value is 100 or below and then reset the health bar or add 10% to it:

const cleanBtn = document.querySelector('.clean');

cleanBtn.addEventListener('click', () => {
  let health = document.getElementById('myHappiness');
  health.value = (health.value === health.max) ? 0 : health.value + 10;
})
<button class="clean">Clean</button>

<br>

<label for"myHappyness">Happiness:</label><progress id="myHappiness" value ="0" max="100"></progress>

The main issue with your code where the many typos. Among that was that you used < 100 % which will divide 100 by an undefined amount and look for the remainder. % is used as a calculation for a remainder (100 % 3 = 1) . To use 100% in the way you intended to, you have to use it as a string.

Upvotes: 3

Unknown
Unknown

Reputation: 93

I think this would be a better approach:

var happiness = 2;

document.getElementById("demo").textContent = happiness

function increaseHappiness() {
    happiness++
    document.getElementById("demo").textContent = happiness
}
<div>
    Happyness: <span id=demo></span>
</div>

<br>

<button onClick="increaseHappiness()">More Happy</button>

Upvotes: 1

Related Questions