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

时间：2017-03-17 19:48:20

标签： javascript html

我和其他几个人正在尝试使用javascript为学校创建一个简单的二十一点游戏，但我们无法让它正常工作。现在，当点击新游戏时，它会很好地生成数字，并且经销商2的输入会像它应该的那样隐藏。但是，我们无法将其转到单击Stand按钮的位置，Dealer 2输入变为可见。有没有一个干净的方法来解决这个问题？

守则：

<td><span class="myClass"><table> ....

5 个答案:

答案 0 :(得分：1)

TL;博士

使用hidden设置setAttribute()属性。使用.removeAttribute()撤消属性设置：

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

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

有一个干净的方法吗？

是的，有多个。请参阅下面的解释，了解一些常用技巧。

隐藏属性

一种方法是使用hidden设置setAttribute()属性。使用.removeAttribute()撤消属性设置：

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

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

对于哪种方法更好，存在不同的意见。请参阅comments on this blog post以及this等答案。

另请注意，因为标有 stand 的按钮设置了 name 属性，所以在DOM中通过window.stand引用它。因此，函数 stand（）正在被指向该元素的对象替换。解决此问题的一种方法是重命名元素，例如 standButton ：

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

＆＃13;
＆＃13; 
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").setAttribute("hidden", "true");

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

function stand() {
  document.getElementById("dealer2").removeAttribute("hidden");
}

function dealCard() {

}
＆＃13; 
body {
  font-family: Arial;
}

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;
  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;
}
＆＃13; 
<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="standButton" value="Stand" onclick="stand()" class="button" /><br><br>
    <input type="button" name="newGame" value="New Game" onclick="dealer()" class="button" />
  </aside>
</form>
＆＃13;
＆＃13;
＆＃13;

隐藏输入类型

此外，正如@rayon在评论中建议的那样，type属性可以从文字更改为隐藏。

  

hidden：未显示但其值已提交给服务器的控件。 1 

function dealer() {
    //...set dealer1, dealer2
    //set type to hidden to hide the element
    document.getElementById("dealer2").type = "hidden";

}

function stand() {
    //set type to text to display it as normal
    document.getElementById("dealer2").type = "text";

＆＃13;
＆＃13; 
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").type = "hidden";

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

function stand() {
  document.getElementById("dealer2").type = "text";
}

function dealCard() {

}
＆＃13; 
body {
  font-family: Arial;
}

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;
  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;
}
＆＃13; 
<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="hidden" 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="standButton" value="Stand" onclick="stand()" class="button" /><br><br>
    <input type="button" name="newGame" value="New Game" onclick="dealer()" class="button" />
  </aside>
</form>
＆＃13;
＆＃13;
＆＃13;

样式（包括CSS）

另一种方法是更新元素样式。可以使用多种样式 - 例如display可以使用.style

来 none 
function dealer() {
    //...set dealer1, dealer2
    document.getElementById("dealer2").style.display = "none";

然后显示元素（当单击标有 stand 的按钮时），将该显示样式设置为 none 以外的值（例如空白字符串，内联等。）

 function stand() {
    document.getElementById("dealer2").style.display = "";
 }

请参阅下面的代码段中演示的内容：

＆＃13;
＆＃13; 
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").style.display = "none";

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

function stand() {
  document.getElementById("dealer2").style.display = "inline";
}

function dealCard() {

}
＆＃13; 
body {
  font-family: Arial;
}

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;
  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;
}
＆＃13; 
<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="standButton" value="Stand" onclick="stand()" class="button" /><br><br>
    <input type="button" name="newGame" value="New Game" onclick="dealer()" class="button" />
  </aside>
</form>
＆＃13;
＆＃13;
＆＃13;

或者visibility可以设置为隐藏以隐藏元素，然后设置为 visible 以显示它。

function dealer() {
    //...set dealer1, dealer2
    document.getElementById("dealer2").style.visibility = "hidden";
}

function stand() {
   document.getElementById("dealer2").style.visibility = "visible";

CSS类也可以与上述技术结合使用。例如，可以添加以下css规则：

#dealer2.hidden {
    visibility: hidden;
}

然后使用classList.add()和classList.remove()添加类来使用该类样式规则：

function dealer() {
    //...set dealer1, dealer2
    document.getElementById("dealer2").classList.add("hidden");
}

function stand() {
    document.getElementById("dealer2").classList.remove("visible");

＆＃13;
＆＃13; 
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").classList.add("hidden");

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

function stand() {
  document.getElementById("dealer2").classList.remove("hidden");;
}

function dealCard() {

}
＆＃13; 
body {
  font-family: Arial;
}

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;
  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;
}

#dealer2.hidden {
  visibility: hidden;
}
＆＃13; 
<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="standButton" value="Stand" onclick="stand()" class="button" /><br><br>
    <input type="button" name="newGame" value="New Game" onclick="dealer()" class="button" />
  </aside>
</form>
＆＃13;
＆＃13;
＆＃13;

还有其他技术也可以达到同样的要求。一些javascript库（如jQuery）包含上述技术的包装器（例如jQuery＆＃39; s .hide()和.show()）。

1 <子> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type）

答案 1 :(得分：0)

可以使用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 :(得分：0)

使用javascript隐藏内容：

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

使用javascript再次显示：

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

或者您可以改为使用JQuery。

答案 3 :(得分：0)

您应该使用function stand()的其他名称 因为<input type="button" name="stand" value="Stand" onclick="stand()" class="button" />

中的名称重复

只需使用其他名称

要使用原生javascript更改已停用的属性，请使用document.getElementById("dealer2").disabled = false; 

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 stnd() {
  document.getElementById("dealer2").disabled = false;
  dealer2 = document.getElementById("dealer2").value = "Changed";
}

function dealCard() {

}
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;
}
<!DOCTYPE html>
<html>

<head>
  <title>Simple Blackjack</title>
  <meta charset="utf-8">
</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="stnd()" class="button" /><br><br>
        <input type="button" name="newGame" value="New Game" onclick="dealer()" class="button" />
      </aside>
    </form>
  </section>
</body>

</html>

答案 4 :(得分：0)

如果你想使用jQuery，你可以这样做：

select substr( '123|456', instr( '123|456','|' )+1 ) from dual;

SUB
---
456

$('input').click(function() { if ($('input').val() === "show") { $('#name').show('700'); $('input').val("hide"); } else{ $('#name').hide('700'); $('input').val("show"); }; }); 是您元素的#name。 ：d

相关问题
最新问题