禁用js中的按钮

时间:2018-06-28 12:30:36

标签: javascript html button

我正在制作答题器游戏 当玩家购买按钮的东西时,我需要停止按钮的单击。 所以我尝试了

var money = 10000000;
var MoneyperClick = 1;

function myFunction() {
  var val = document.getElementById("YourMoney");
  val.innerHTML = money;
  document.getElementById("YourLevel").innerHTML = MoneyperClick;
}

function
upgrade(up, need) {
  if (money >= need) {
    money = money - need;
    MoneyperClick =
      MoneyperClick + up;
    alert("구매 성공");
  } else {
    alert("골드 부족");
  }
}
<body onload="myFunction()">
    <h1>MERVEL CLICKER GAME</h1>
    <br/>
    <input id="special" type="button" value="click" onclick="money = money+MoneyperClick; 
myFunction();" />
    <br/> STARLORD:money per click +1:need 100 money
    <input class="normal" id="starlord" type="button" value="buy" onclick="upgrade(1,100); myFunction();" />
    <br/> BABYGROOT:money per click +2:need 150 money
    <input class="normal" id="babygroot" type="button" value="buy" onclick="upgrade(2,150); myFunction(); " />
    <br/> MANTIS:money per click +2:need 300 money
    <input class="normal" id="mantis" type="button" value="buy" onclick="upgrade(2,300); myFunction();" />
    <br/> NEBULA:money per click +2:need 400 money
    <input class="normal" id="nebula" type="button" value="buy" onclick="upgrade(2,400); myFunction();" />
    <br/> HAWKEYE:money per click +3:need 700 money
    <input class="normal" id="hawkeye" type="button" value="buy" onclick="upgrade(3,700); myFunction();" />
    <br/> BLACKWIDOW:money per click +3:need 1500 money
    <input class="normal" id="blackwidow" type="button" value="buy" onclick="upgrade(3,1500); 
myFunction(); " />
    <br/>
    <h1>your money is <span id="YourMoney"></span></h1>
    <h1>your money per click is <span id="YourLevel"></span></h1>
    <h1> You can buy everything only once </h1>

我的活动页面:http://appletree-noamboy2006504805.codeanyapp.com/clicker.php

如果购买了商品,如何禁用“购买”按钮?


啊哈! 按钮中有一个disable属性。 案子解决了。 谢谢大家的帮助。

3 个答案:

答案 0 :(得分:1)

使用任一 document.getElementById("myBtn").disabled = true;

 var x = document.getElementById("myBtn").disabled;
    document.getElementById("demo").innerHTML = x;

用于禁用按钮

function disableBtn() {
    document.getElementById("myBtn").disabled = true;
}

function enableBtn() {
    document.getElementById("myBtn").disabled = false;
}
<button id="myBtn">My Button</button>
<br><br>

<button onclick="disableBtn()">Disable "My Button"</button>
<button onclick="enableBtn()">Enable "My Button"</button>

答案 1 :(得分:1)

因此,如果要禁用单击的按钮,请将按钮(this)作为参数传递给upgrade()函数,如下所示(简化):

JavaScript:
function upgrade(up, need, button) { button.disabled = true; }

HTML:
<input type="button" onclick="upgrade(1, 100, this)">

var money = 10000000;
var MoneyperClick = 1;

function myFunction() {
  var val = document.getElementById("YourMoney");
  val.innerHTML = money;
  document.getElementById("YourLevel").innerHTML = MoneyperClick;
}

function
upgrade(up, need, button) {
  if (money >= need) {
    button.disabled = true; // Added this line to disable the button that got clicked
    money = money - need;
    MoneyperClick =
      MoneyperClick + up;
    alert("구매 성공");
  } else {
    alert("골드 부족");
  }
}
<body onload="myFunction()">
  <h1>MERVEL CLICKER GAME</h1>
  <br/>
  <input id="special" type="button" value="click" onclick="money = money+MoneyperClick; 
myFunction();" />
  <br/> STARLORD:money per click +1:need 100 money
  <input class="normal" id="starlord" type="button" value="buy" onclick="upgrade(1,100, this); myFunction();" />
  <br/> BABYGROOT:money per click +2:need 150 money
  <input class="normal" id="babygroot" type="button" value="buy" onclick="upgrade(2,150,this); myFunction(); " />
  <br/> MANTIS:money per click +2:need 300 money
  <input class="normal" id="mantis" type="button" value="buy" onclick="upgrade(2,300,this); myFunction();" />
  <br/> NEBULA:money per click +2:need 400 money
  <input class="normal" id="nebula" type="button" value="buy" onclick="upgrade(2,400,this); myFunction();" />
  <br/> HAWKEYE:money per click +3:need 700 money
  <input class="normal" id="hawkeye" type="button" value="buy" onclick="upgrade(3,700,this); myFunction();" />
  <br/> BLACKWIDOW:money per click +3:need 1500 money
  <input class="normal" id="blackwidow" type="button" value="buy" onclick="upgrade(3,1500,this); 
myFunction(); " />
  <br/>
  <h1>your money is <span id="YourMoney"></span></h1>
  <h1>your money per click is <span id="YourLevel"></span></h1>
  <h1> You can buy everything only once </h1>

答案 2 :(得分:0)

在这种情况下,您想使用<button>标签而不是<input>标签。

<input class="normal" id="starlord" type="button" value="buy" onclick="upgrade(1,100);  myFunction();">

将变为:

<button class="normal" id="starlord" onclick="upgrade(1,100);  myFunction(); this.disabled=true;">buy</button>

如您所见,我已经在按钮的onclick属性中添加了this.disabled=true;。这样,它将在第一次单击时禁用自身。