Question

我正在学习javascript，而我正在练习通过制作二十一点游戏所学到的东西。我有一个公平地处理卡片的系统，但当我按下＆＃34;交易＆＃34;按钮卡的值出现但按钮消失。为什么会这样？任何帮助都感激不尽。这是我的代码：

<!DOCTYPE html>
<html>

<head>
<title>casino game.</title>
<input type="button" value="deal" onclick="document.write(random)" id="deal">
<input type="button" value="hit" onclick="hit" id="hit">
</head>

<body>
<script type="text/javascript">
var deck =     [11,2,3,4,5,6,7,8,9,10,10,10];
var random = deck[Math.floor(Math.random()*deck.length)]

</script>
<style type="text/css">
#deal{
    position: fixed;
    width: 50px;
    height: 40px;
    top: 100px;

}
#hit{
    position: fixed;
    width: 50px;
    height: 40px;
    top: 200px;
}

body{
    text-align: center;
    font-size: 30px;
    background: url("");
}

</style>


</body>
</html>

Answer 1

将<input>移至<body>而不是<head>，并使用document.write()覆盖HTML的所有内容。您可能希望将结果写在<div>中。

<!DOCTYPE html>
<html>

<head>
<title>casino game.</title>
<style type="text/css">
#deal{
    position: fixed;
    width: 50px;
    height: 40px;
    top: 100px;

}
#hit{
    position: fixed;
    width: 50px;
    height: 40px;
    top: 200px;
}

body{
    text-align: center;
    font-size: 30px;
    background: url("");
}

</style>
</head>

<body>
<input type="button" value="deal" onclick="deal()" id="deal">
<div id="result"></div>

<input type="button" value="hit" onclick="hit" id="hit">

<script type="text/javascript">
var deck = [11,2,3,4,5,6,7,8,9,10,10,10];

function deal() {
    var random = deck[Math.floor(Math.random()*deck.length)];     
    document.getElementById('result').innerHTML = random;
}
</script>
</body>
</html>

DEMO

按下后按钮消失

1 个答案: