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>

如何找到“按钮” ... T

Answer 3

选择元素时出错。纠正。

您可以通过在HTML中添加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

您在代码中犯了一些错误。

您正在获取span id并尝试禁用该按钮，而必须为该按钮分配一个id并对其进行访问。
您正在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 />

如何禁用按钮/标签，直到满足条件

4 个答案: