我开始研究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是因为你没有定义bet..所以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时向上。