通過單擊按鈕增加進度條-有解無憂

通過單擊按鈕增加進度條 play這個想法是當你點擊按鈕時進度條應該增加，例如，如果你點擊按鈕happiness應該增加。

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>

uj5u.com熱心網友回復：

您的代碼中有很多問題和拼寫錯誤。干凈的編程將解決所有問題。

您想要一個 HTML 具有特定標記的欄：<progress>。用它代替divs!
使用 aternary conditional operator檢查值是否為 100 或以下，然后重置生命值條或將其添加 10%：

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>

您的代碼的主要問題是許多錯別字。其中包括您使用< 100 %的它將 100 除以未定義的數量并查找余數。%用作余數 ( 100 % 3= 1) 的計算。要100%以您想要的方式使用，您必須將其用作字串。

uj5u.com熱心網友回復：

我認為這將是一個更好的方法：

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>

uj5u.com熱心網友回復：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/517003.html

標籤：javascripthtmlcss

上一篇：HTML上的高寬空白

下一篇：如何將我的內容放置在側邊欄旁邊？