如何禁用按鈕/選項卡，直到滿足條件

Question

我正在制作游戲，並且希望禁用按鈕直到滿足條件。 還有我的標簽。

我努力了

document.getElementById("Button").disabled = true;

但我無法禁用該按鈕。 我正在使用方括號編輯器，並且我認為javascript arnt中的“文檔”內容和“窗口”內容可以正常工作。

這是我的html代碼：

<span id="cookies">0</span>
                <br />
                <button onclick="cookieClick(1)">Click Me!</button>
                <br />
                Cost: 10 mp <button 
onclick="cookieClick(50)">BigClick</button>
                <br />
                Cost: <span id="cursorCost">10</span> <button 
onclick="buyCursor()">Buy Cursor</button>
                <br />
                Cost: <span id="catCost">50</span> <button 
onclick="buyCat()">Buy Cat</button>
                <br />
                Cost: <span id="dogCost">100</span> <button 
onclick="buyDog()">Buy Dog</button>
                <br />
                Cost: <span id="humanCost">200</span> <button 
onclick="buyHuman()">Buy Human</button>
                <br />
                Cost: <span id="rebirthCost">1000</span> <button 
onclick="buyRebirth()">Rebirth</button>
                <br />

這是我的javascript代碼：（如果我可以通過我的函數獲得幫助以對其進行欣賞）

var cookies = 0;

function cookieClick(number) {
    cookies = cookies + number;
    document.getElementById("cookies").innerHTML = cookies;
}

function Bigclick(number) {
    if (rebirths < 1)
        cookies = cookies + number;
    document.getElementById("cookies").innerHTML = cookies;
}

var cursors = 0;

function buyCursor() {
    var cursorCost = Math.floor(10 * Math.pow(1.1, cursors)); //works out 
the cost of this cursor
    if (cookies <= 10)
        document.getElementById("cursorCost").disabled = true;
    if (cookies >= cursorCost) { //checks that the player can afford the 
cursor
        cursors = cursors + 1; //increases number of cursors
        cookies = cookies - cursorCost; //removes the cookies spent
        document.getElementById('cursors').innerHTML = cursors; //updates 
the number of cursors for the user
        document.getElementById('cookies').innerHTML = cookies; //updates 
the number of cookies for the user
    }
    var nextCost = Math.floor(10 * Math.pow(1.1, cursors)); //works out 
the cost of the next cursor
    document.getElementById('cursorCost').innerHTML = nextCost; //updates 
the cursor cost for the user
}
var cats = 0;

function buyCat() {
    var catCost = Math.floor(50 * Math.pow(1.1, cats)); //works out the 
cost of this cursor
    if (cookies >= catCost) { //checks that the player can afford the 
cursor
        cats = cats + 2; //increases number of cursors
        cookies = cookies - catCost; //removes the cookies spent
        document.getElementById('cats').innerHTML = cats; //updates the 
number of cursors for the user
        document.getElementById('cookies').innerHTML = cookies; //updates 
the number of cookies for the user
    }
    var nextCost = Math.floor(50 * Math.pow(1.1, cats)); //works out the 
cost of the next cursor
    document.getElementById('catCost').innerHTML = nextCost; //updates the 
cursor cost for the user
}

我希望在cookie> = cursorCost之前禁用我的buyCursor按鈕，並且在Cookies> = catCost之前禁用我的buyCat按鈕。 我的輸出是按鈕正常。

Answer 1

嘗試

 Button.disabled = true; 

 <button id="Button" >Click Me!</button> 

Answer 2

您的js：

document.getElementById("cursorCost").disabled = true;

您的html：

Cost: <span id="cursorCost">10</span> <button onclick="buyCursor()">Buy Cursor</button>

您如何找到“按鈕” ... TT

Answer 3

選擇元素時出錯。 改正它。

您可以通過在HTML中添加disabled屬性來disabled所有必需的按鈕，也可以通過JS添加它。

我建議在標記中添加disabled ，然后由JS刪除。

Cost: <span id="cursorCost">10</span>
<button onclick="buyCursor()" disabled>Buy Cursor</button>

用JS刪除disabled attr

if (cookies >= cursorCost) { //checks that the player can afford the 
cursor

    //remove disabled attribute
document.getElementById("ID_OF_YOUR_BUTTON").removeAttribute("disabled");


    }

Answer 4

您在代碼中犯了一些錯誤。

1. 您正在獲取span id並嘗試禁用該按鈕，相反，您必須為該按鈕分配一個id並進行訪問。
2. 您正在buyCursor()函數中調用禁用函數，這是錯誤的。 您需要在該函數之外調用該特定代碼段。

我已經在以下代碼中完成了這些。

根據ShivCK建議，即使在HTML本身中，您也可以調用Disabled屬性

 var cookies = 0; checkCursor() function cookieClick(number) { cookies = cookies + number; document.getElementById("cookies").innerHTML = cookies; checkCursor() } function Bigclick(number) { if (rebirths < 1){ cookies = cookies + number; document.getElementById("cookies").innerHTML = cookies; } checkCursor() } var cursors = 0; function buyCursor() { var cursorCost = Math.floor(10 * Math.pow(1.1, cursors)); //works out the cost of this cursor if (cookies >= cursorCost) { //checks that the player can afford the cursor cursors = cursors + 1; //increases number of cursors cookies = cookies - cursorCost; //removes the cookies spent document.getElementById('cursors').innerHTML = cursors; //updates the number of cursors for the user document.getElementById('cookies').innerHTML = cookies; //updates the number of cookies for the user } var nextCost = Math.floor(10 * Math.pow(1.1, cursors)); //works out //the cost of the next cursor document.getElementById('cursorCost').innerHTML = nextCost; //updates the cursor cost for the user } var cats = 0; function buyCat() { var catCost = Math.floor(50 * Math.pow(1.1, cats)); //works out the cost of this cursor if (cookies >= catCost) { //checks that the player can afford the cursor cats = cats + 2; //increases number of cursors cookies = cookies - catCost; //removes the cookies spent document.getElementById('cats').innerHTML = cats; //updates the number of cursors for the user document.getElementById('cookies').innerHTML = cookies; //updates the number of cookies for the user } var nextCost = Math.floor(50 * Math.pow(1.1, cats)); //works out the cost of the next cursor document.getElementById('catCost').innerHTML = nextCost; //updates the cursor cost for the user checkCursor() } function checkCursor(){ if (cookies <= 10){ document.getElementById("cursorCostBtn").disabled = true; } else { document.getElementById("cursorCostBtn").disabled = false; } if (cookies <= 50){ document.getElementById("catCostBtn").disabled = true; } else { document.getElementById("catCostBtn").disabled = false; } if (cookies <= 100){ document.getElementById("dogCostBtn").disabled = true; } else { document.getElementById("dogCostBtn").disabled = false; } if (cookies <= 200){ document.getElementById("humanCostBtn").disabled = true; } else { document.getElementById("humanCostBtn").disabled = false; } if (cookies <= 1000){ document.getElementById("rebirthCostBtn").disabled = true; } else { document.getElementById("rebirthCostBtn").disabled = false; } } 

 <span id="cookies">0</span><br /> <button onclick="cookieClick(1)">Click Me!</button><br /> Cost: 50 <button onclick="cookieClick(50)">BigClick</button><br /> Cost: <span id="cursorCost">10</span> <button id="cursorCostBtn" onclick="buyCursor()">Buy Cursor</button><br /> Cost: <span id="catCost">50</span> <button onclick="buyCat()" id="catCostBtn">Buy Cat</button><br /> Cost: <span id="dogCost">100</span> <button onclick="buyDog()" id="dogCostBtn">Buy Dog</button><br /> Cost: <span id="humanCost">200</span> <button onclick="buyHuman()" id="humanCostBtn">Buy Human</button><br /> Cost: <span id="rebirthCost">1000</span> <button onclick="buyRebirth()" id="rebirthCostBtn" >Rebirth</button><br />