Increasing a progress bar by clicking a button-CodePudding

The 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 >
        <div >
            <div >
                <ul>
                    <div id="basic">
                        <ul>Name: Elis</ul>
                        <ul>Age: 2 months</ul>
                    </div>
                    <div >Health
                        <div id="myProgressHealth">
                            <div id="myHealth"></div>
                        </div>
                       
                    </div>
                    <div >Hunger
                        <div id="myProgressHunger">
                            <div id="myHunger"></div>
                        </div>
                    </div>
                    
                    <div >Happiness
                        <div id="myProgressHappiness">
                            <div id="myHappiness"></div>
                        </div>
                    </div>
                </ul>
            </div>
            <button >Settings</button>
        </div>
            <div > 
                <div >
                    <ul>
                    <button >Clean</button>
                    <button >Fead</button>
                    <button >Play</button>
                    </ul>
                </div>
                <div >
                    <li id="name-input">Pet Name <input type="text"></input></li>
                    <li>Game reset button <button >Reset</button></li>
                </div>
                <div >
                    <p>Goodbye</p>
                </div>
            </div>
            
    </div>
   
    <!--javascript-->
    <script src="app.js"></script>
</body>
</html>

CodePudding user response：

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

You want a bar for which HTML has a specific tag for: <progress>. Use it instead of divs!
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 >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.

CodePudding user response：

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>

CodePudding user response：

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 >
        <div >
            <div >
                <ul>
                    <div id="basic">
                        <ul>Name: Elis</ul>
                        <ul>Age: 2 months</ul>
                    </div>
                    <div >Health
                         <div id="myProgressHealth" >
                            <div id="myHealth"></div>
                        </div>
                       
                    </div>
                    <div >Hunger
                        <div id="myProgressHunger">
                            <div id="myHunger"></div>
                        </div>
                    </div>
                    
                    <div  >Happiness
                        <div id="myProgressHappiness">
                            <div id="myHappiness" style="height:10px;background:red;width:0;"></div>
                        </div>
                    </div>
                </ul>
            </div>
            <button >Settings</button>
        </div>
            <div > 
                <div >
                    <ul>
                    <button >Clean</button>
                    <button >Fead</button>
                    <button  id = "playBtn">Play</button>
                    </ul>
                </div>
                <div >
                    <li id="name-input">Pet Name <input type="text"></input></li>
                    <li>Game reset button <button >Reset</button></li>
                </div>
                <div >
                    <p>Goodbye</p>