Javascript 文本输入隐藏，需要在单击按钮时使其可见_Javascript_Html

Javascript 文本输入隐藏，需要在单击按钮时使其可见

javascript html

Javascript 文本输入隐藏，需要在单击按钮时使其可见,javascript,html,Javascript,Html,我和其他几个人正在尝试使用javascript为学校创建一个简单的21点游戏，但我们在让它正常工作方面遇到了困难。现在，当点击“新游戏”时，它会生成正确的数字，并且“经销商2”的输入会像应该的那样隐藏起来。但是，我们很难找到当单击Stand（站立）按钮时，经销商2输入变为可见的位置。有没有一个干净的方法来解决这个问题守则： <!DOCTYPE html> <html> <head> <title>Simple Blackjack</

我和其他几个人正在尝试使用javascript为学校创建一个简单的21点游戏，但我们在让它正常工作方面遇到了困难。现在，当点击“新游戏”时，它会生成正确的数字，并且“经销商2”的输入会像应该的那样隐藏起来。但是，我们很难找到当单击Stand（站立）按钮时，经销商2输入变为可见的位置。有没有一个干净的方法来解决这个问题

守则：

<!DOCTYPE html>
<html>
<head>
    <title>Simple Blackjack</title>
    <meta charset="utf-8">
    <style>
        body {
            font-family: Arial;
            background: url("cards.jpg");
        }
        section {
            width: 600px;
            height: 300px;
            margin: auto;
            background-color: #007929;
            padding: 15px;
            border-radius: 10px;
            border: solid #000 2px;
        }
        header {
            width: 550px;
            height: 50px;
            margin: auto;
            margin-bottom: 15px;
            background: url("cards.jpg");
            text-align: center;
            border-radius: 10px;
            border: solid #000 1px;
        }
        h1 {
            line-height: 10px;
        }
        div {
            width: 400px;
            height: 300px;
            float: left;
        }
        aside {
            width: 200px;
            height: 300px;
            float: right;
        }
        table {
            width: 400px;
            font-weight: bold;
            color: #fff;
        }
        .cards {
            background-color: #63dd8d;
            border: solid #000 1px;
            border-radius: 5px;
            font-size: 14pt;
            padding: 5px;
        }
        .button {
            background-color: #009900;
            width: 150px;
            color: #fff;
            font-weight: bold;
            padding: 5px;
            border-radius: 5px;
            border: solid #000 1px;
            clear: both;
            margin: bottom: 15px;
         }
    </style>
    <script>
        var dealer1;
        var dealer2;
        var player;

        function dealer() {
            dealer1 = document.getElementById("dealer1").value =       Math.random()*11 + 1;
            document.getElementById("dealer1").value = Math.floor(dealer1);

            dealer2 = document.getElementById("dealer2").value = Math.random()*11 + 1;
            dealer2 = Math.floor(dealer2);
            document.getElementById("dealer2").value = "Hidden";

            player = document.getElementById("player").value = Math.random()*21 + 2;
            document.getElementById("player").value = Math.floor(player);
        }
        function stand() {

        }
        function dealCard() {

        }
    </script>
</head>
<body>
<section>
    <header>
        <h1>Simple Blackjack</h1>
    </header>
    <form>
        <div>
            <table>
                <tr>
                    <td>Dealer Cards:</td>
                    <td><input id="dealer1" class="cards" type="text" name="dealer1" size="5" disabled="true" />&nbsp;&nbsp;<input id="dealer2" class="cards" type="text" name="dealer2" size="5" disabled="true" /></td>
                </tr>
                <tr>
                    <td>Your Card Total:</td>
                    <td><input id="player" class="cards" type="text" name="player" size="5" disabled="true" /></td>
                </tr>
            </table>
        </div>
        <aside>
            <input type="button" name="deal" value="Deal Card" onclick="dealCard()" class="button" /><br><br>
            <input type="button" name="stand" value="Stand" onclick="stand()" class="button" /><br><br>
            <input type="button" name="newGame" value="New Game" onclick="dealer()" class="button" />
        </aside>
    </form>
</section>
</body>
</html>


简单21点
身体{
字体系列：Arial；
背景：url（“cards.jpg”）；
}
部分{
宽度：600px；
高度：300px；
保证金：自动；
背景色：#007929；
填充：15px；
边界半径：10px；
边框：实心#000 2px；
}
标题{
宽度：550px；
高度：50px；
保证金：自动；
边缘底部：15px；
背景：url（“cards.jpg”）；
文本对齐：居中；
边界半径：10px；
边框：实心#000 1px；
}
h1{
线高：10px；
}
div{
宽度：400px；
高度：300px；
浮动：左；
}
旁白{
宽度：200px；
高度：300px；
浮动：对；
}
桌子{
宽度：400px；
字体大小：粗体；
颜色：#fff；
}
.卡片{
背景色：#63dd8d；
边框：实心#000 1px；
边界半径：5px；
字号：14pt；
填充物：5px；
}
.按钮{
背景色：#009900；
宽度：150px；
颜色：#fff；
字体大小：粗体；
填充物：5px；
边界半径：5px；
边框：实心#000 1px；
明确：两者皆有；
边缘：底部：15px；
}
var dealer1；
var-dealer2；
var播放器；
函数交易商（）{
dealer1=document.getElementById（“dealer1”）.value=Math.random（）*11+1；
document.getElementById（“dealer1”）.value=Math.floor（dealer1）；
dealer2=document.getElementById（“dealer2”）.value=Math.random（）*11+1；
dealer2=数学楼层（dealer2）；
document.getElementById（“dealer2”）.value=“隐藏”；
player=document.getElementById（“player”）.value=Math.random（）*21+2；
document.getElementById（“播放器”）.value=Math.floor（播放器）；
}
功能支架（）{
}
函数dealCard（）{
}
简单21点
经销商卡：
您的卡总数：

可以使用

jQuery

获取它，如下所示：

<input type="button" name="dealer2" value="Dealer2" style="display: none !important;" />

<input type="button" name="stand" value="Stand" onclick="stand()" class="button" />

<script>      
    function stand() {
        $("#dealer2").show();
    }
</script>


功能支架（）{
$（“#经销商2”）.show（）；
}

希望这有助于…

使用

javascript隐藏某些内容：
document.getElementById("hello").style.display = 'none';

document.getElementById("hello").style.display = 'block';

要使用javascript
再次显示它，请执行以下操作：
document.getElementById("hello").style.display = 'none';

document.getElementById("hello").style.display = 'block';

或者您可以只使用JQuery
。
您应该为函数stand（）使用另一个名称。


因为名称在

只需使用另一个名称

要使用本机javascript更改禁用的属性，请使用document.getElementById（“dealer2”）.disabled=false

var交易商1；
var-dealer2；
var播放器；
函数交易商（）{
dealer1=document.getElementById（“dealer1”）.value=Math.random（）*11+1；
document.getElementById（“dealer1”）.value=Math.floor（dealer1）；
dealer2=document.getElementById（“dealer2”）.value=Math.random（）*11+1；
dealer2=数学楼层（dealer2）；
document.getElementById（“dealer2”）.value=“隐藏”；
player=document.getElementById（“player”）.value=Math.random（）*21+2；
document.getElementById（“播放器”）.value=Math.floor（播放器）；
}
函数stnd（）{
document.getElementById（“dealer2”）.disabled=false；
dealer2=document.getElementById（“dealer2”）.value=“已更改”；
}
函数dealCard（）{
}
正文{
字体系列：Arial；
背景：url（“cards.jpg”）；
}
部分{
宽度：600px；
高度：300px；
保证金：自动；
背景色：#007929；
填充：15px；
边界半径：10px；
边框：实心#000 2px；
}
标题{
宽度：550px；
高度：50px；
保证金：自动；
边缘底部：15px；
背景：url（“cards.jpg”）；
文本对齐：居中；
边界半径：10px；
边框：实心#000 1px；
}
h1{
线高：10px；
}
div{
宽度：400px；
高度：300px；
浮动：左；
}
旁白{
宽度：200px；
高度：300px；
浮动：对；
}
桌子{
宽度：400px；
字体大小：粗体；
颜色：#fff；
}
.卡片{
背景色：#63dd8d；
边框：实心#000 1px；
边界半径：5px；
字号：14pt；
填充物：5px；
}
.按钮{
背景色：#009900；
宽度：150px；
颜色：#fff；
字体大小：粗体；
填充物：5px；
边界半径：5px；
边框：实心#000 1px；
明确：两者皆有；
边缘：底部：15px；
}

简单21点
简单21点
经销商卡：
您的卡总数：






如果要使用jQuery，可以执行以下操作：
$('input').click(function() {
   if ($('input').val() === "show") {
      $('#name').show('700');
      $('input').val("hide");
   } else{
      $('#name').hide('700');
      $('input').val("show");
   };
});

#name
是元素的id：Dtl；博士
使用设置属性。用于反转属性的设置：
function dealer() {
    //...set dealer1, dealer2
    //hide the element
    document.getElementById("dealer2").setAttribute("hidden", "true");   
 }

function stand() {
    //show the element
    document.getElementById("dealer2").removeAttribute("hidden");

function dealer() {
    //...set dealer1, dealer2
    //hide the element
    document.getElementById("dealer2").setAttribute("hidden", "true");   
 }

function stand() {
    //show the element
    document.getElementById("dealer2").removeAttribute("hidden");

有没有一个干净的方法来解决这个问题
是的，有很多。有关一些常见的tec，请参见下面的说明