我有一个按钮，点击它会将数字减少50个。所以我想要的是如果var达到零，即使你点击按钮，它也不会变为负数。它只会保持零。（请使用javascript回答，谢谢:)）
（如果可以，请回答我如何防止<div id="goldMine">与<div class="resources>重叠。谢谢！
*我的HTML（如果你想）：
//Loading
console.log('Loading...')
console.log('Gathering information from server...')
console.log('Gathering information from server...succeed!')
console.log('Putting spells book in A-Z...complete!')
console.log('Making gold mines...')
console.log('Making gold mines...suceed!')
console.log('Smithering weapon...')
console.log('Smithering weapon...suceed!')
console.log('Sweeping the dusts...')
console.log('Sweeping the dusts...complete!!WAIT A SPIDER CRAWLING ON ME AHHHH')
console.log("Preventing cheaters who looking at the console...Wait, you're looking at it right now!")
console.log('Drawing maps...complete!')
console.log('Burning trees...complete!')
console.log('Typing stuff in the console...done!')
console.log('Adding easter egg...?')
console.log("Killing bugs...oops, there's a bug in the bug :/'")
console.log('FINISH LOADING. STARTING GAME!! Have fun playing!')
//Set the var
var coins = 0;
var golds = 0;
//Bought the woodden shortsword
function boughtWoodenSword() {
document.getElementById()
}
//increase coins per 0.45 seconds
window.setInterval(
function () {
coins ++
document.getElementById("numberOfCoins").innerHTML = "You got " + coins + " coins!";
checkConditions()
}, 450);
//Mine a gold every 10 second
window.setInterval(
function () {
golds ++
document.getElementById("numberOfGolds").innerHTML = "You mined " + golds + " golds!";
}, 10000);
//Get a coin when clicked button
function addCoins() {
coins ++;
document.getElementById('numberOfCoins').innerHTML = "You got " + coins + " coins!";
checkConditions()
};
//When enough coins, add 10 coins button will appear and when clicked add 10 coins
function add10Coins() {
coins += 10;
document.getElementById('numberOfCoins').innerHTML = "You got " + coins + " coins!";
checkConditions()
};
//Throw some coins for the poor(Wow, you're generous!)
function throwCoins() {
coins -= 10;
document.getElementById('numberOfCoins').innerHTML = "You got " + coins + " coins!";
checkConditions()
};
//Check for conditions
//check add 10
function checkConditions() {
if (coins >= 50) {
document.getElementById('add10Coins').style.display = "inline-block";
}
//check open shop
if (coins >= 500) {
document.getElementById('shop').style.display = "inline-block";
};
};#shop {
font-style: normal;
}
#goldMine {
border: 2px solid black;
}
pre {
font-style: normal;
}
var {
font-style: normal;
}
button {
font-size:15px;
margin :3px;
}<HTML style=font-family:sans-serif>
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right class="resources">
<form>
<fieldset>
<legend id="resource"><h3>RESOURCES</h3></legend>
Iron: <var id='numberOfIrons'>0<var><br>
Silver: <var id='numberOfSilver'>0<var><br>
Coal: <var id='numberOfCoal'>0<var><br>
</fieldset>
</form>
</div>
<div id="goldMine">
<pre style= border: 3px solid black>
_GOLD MINE_ _IRON MINE_ _GOLD MINE_ _IRON MINE_
| | | | | | | |
| | | | | | | |
</pre>
</div>
<div style=display:none id="shop">
<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy a item to unlock a new item!
Woodden Sword
.
/ \
| |
| |
|.|
|.|
|:|
|:|
'--8--'
8
O
Cost: 2000 coins
<button onclick='coins -= 2000;'>Buy</button>
Iron Sword
.
/ \
| |
| |
|.|
|.|
|:|
|:|
_|*|_
\--+--/
8
8
O
Cost: 50 Golds
<button onclick='golds -= 50'>Buy</button>
</pre>
</div>
</HTML>
答案 0 :(得分：2)
// In the onClick event handler:
coins = (coins <= 50) ? 0 : coins - 50;
return coins;
如果硬币小于或等于50，则硬币为零;否则，将硬币减少50。
<button onclick='(golds <= 50) ? golds = 0 : gold -= 50;'>Buy</button>
虽然可以这样做，但最好将这样的逻辑保留在HTML之外。最好在该元素上设置一个响应点击事件的eventListener。
// used to be:
// <button onclick='golds -= 50'>Buy</button>
<button id="sellIronSword">Buy</button>
// Inside a <script>
var ironSwordButton = document.getElementById('sellIronSword');
ironSwordButton.addEventListener('click', function() {
coins = (coins <= 50) ? 0 : coins - 50;
return coins;
}
var coins = 150;
var ironSwordButton = document.getElementById('sellIronSword');
ironSwordButton.addEventListener('click', function() {
coins = (coins <= 50) ? 0 : coins - 50;
document.getElementById('coins').innerHTML = coins;
});<h3>Coins: <span id="coins">150</span></h3>
<hr />
<label>
<span>Buy Iron Sword</span>
<button id="sellIronSword">Buy</button>
</label>