我正在制作一個釣魚游戲，我希望在魚數達到 5 之前隱藏一個按鈕。但是，即使滿足條件，按鈕（設定魚陷阱）似乎也沒有隱藏......
let fishNum = document.getElementById("fishNum");
let traps = document.getElementById("cm2Btn2");
function addFish() {
let fishNum = document.getElementById("fishNum");
count.innerHTML ;
}
if (fishNum > 2) {
traps.classList.add('fadeOut');
}<div class="cLeftRight">
<span id="fishNum">0</span>
</div>
<button id="cm2Btn" onclick="document.getElementById('fishNum').innerHTML ">Catch a Herring</button>
<button id="cm2Btn2">Set Fish Traps</button>uj5u.com熱心網友回復：
您的示例僅在初始加載時檢查 fishNum 的值，而 fishNum 不是數字而是來自 dom 的元素。您的 addFish 函式從未使用過，只有來自 html 的行內 js。您的 addFish 函式會增加一個名為 count 的變數，該變數從未定義。該類沒有 css，fadeOut因此即使添加了該類，該專案也不會淡出。
請參閱我的演示，這是對您嘗試執行的操作的粗略修復。我會改變一些事情，而不是增加fishNum的HTML，我會在js中有一個你增加的變數，并更新螢屏以反映你的js中發生的事情。
在回答這個問題的核心，我相信你正在尋找 css 屬性transition和 html 屬性disabled。我們可以在添加fadeIn類時使用 js 啟用按鈕，并使其從 0 不透明度逐漸過渡到 1。
let fishNum = document.getElementById("fishNum");
let traps = document.getElementById("cm2Btn2");
function addFish() {
fishNum.innerHTML ;
if (fishNum.innerHTML > 4) {
traps.classList.add("fadeIn");
traps.disabled = false;
}
}
document.getElementById("cm2Btn")
.addEventListener("click", addFish);#cm2Btn2 {
transition: opacity 1s;
opacity: 0;
}
#cm2Btn2.fadeIn {
opacity: 1;
}<div class="cLeftRight">
<span id="fishNum">0</span>
</div>
<button id="cm2Btn">Catch a Herring</button>
<button disabled="true" id="cm2Btn2">Set Fish Traps</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381100.html
標籤：javascript html
上一篇：如何根據熱點懸停設定不同的背景