我开始研究HTML和JS中的小型单人轮盘模拟器。
<!DOCTYPE HTML>
<html>
<head>
<title>Roulette</title>
<meta name="viewport" content="width=device-width">
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Dank<span id="r">Roulette</span><span id="b">Balance: <span id="money">100</span></span></h1>
<p>Bet Amount: <input type = "text" id="bet"><button id="placebet" onclick="placeBet()">Place Bet</button></p>
<script>
var money = money; // also tried var money=100;
function placeBet() {
if (bet > money) {
alert("Invalid Bet");
} else {
money = money - bet;
document.getElementById("money").innerHTML = money;
}
}
</script>
</body>
</html>
CSS：
h1{
font-family:Arial;
color:red;
}
#r{
color:green;
}
#b{
margin-left:5cm;
color:black;
border-style:solid;
}
按下按钮时，天平显示NaN。如果下注金额高于您的金额，也没有提醒。我认为这与使用id“bet”未正确召回的下注金额有关。
你得到NaN，因为你没有定义赌注..所以money = money - bet;变得未定义..你需要做var bet = document.getElementById（“bet”）来获取值并将其转换为数字并使用它进行操作。如果你仍然面临问题，请告诉我，但这非常微不足道
var money = document.getElementById("money").innerHTML; // also tried var money=100;
var bet=document.getElementById("bet").value;
function placeBet() {
if (bet > money) {
alert("Invalid Bet");
} else {
money = money - bet;
document.getElementById("money").innerHTML = money;
}
}<!DOCTYPE HTML>
<html>
<head>
<title>Roulette</title>
<meta name="viewport" content="width=device-width">
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Dank<span id="r">Roulette</span><span id="b">Balance: <span id="money">100</span></span></h1>
<p>Bet Amount: <input type = "text" id="bet" value=10><button id="placebet" onclick="placeBet()">Place Bet</button></p>
<script>
</script>
</body>
</html>已经给出了解决方案。但如果您知道如何使用调试器，那么答案对您来说是显而易见的。所以我没有告诉你解决方案，我告诉你如何找到解决方案，这样你就可以自主。
将脚本放在单独的文件中，并使用脚本标记链接它们。
<script src="My_Code_In_Same_Folder_As_HTML.js" charset="UTF-8"></script>
然后获取Chrome浏览器。并学会使用按F12时弹出的调试器。