隐藏并显示< p>元素与JavaScript [英] Hide and show <p> element with javascript

问题描述

我正在用JavaScript创建一个基于文本的RPG游戏。我想在进行特定输入时隐藏并显示< p> 元素。

当1 ，我想在右上角创建一个名为Get key to handcuffs的< p> 元素 - 就像提醒一样。

以下是与囚犯谈话的代码。

  else if（input ==1）{
 if（currentroom ==interrogation&&& guarddead3 == true）{
 $（'< p>不，我不想杀了你，你为什么在这里？< br>囚徒：我不知道，我被骗了，你需要帮助我，你需要找到手铐的钥匙，我不确定它们在哪里。< / p>'）。insertBefore（＃placeholder）。fadeIn （1000）; 
} else {
 $（'< p>你是什么意思？。< / p>'）。insertBefore（＃placeholder）。fadeIn（1000）; 
 $（＃container）。fadeOut（3000，function（）{
 $（＃killed_guard）。fadeIn（3000）; 
}）; 
 
 
 $ / code $ / pre 
 $ b $编辑：
 
 
  HTML：
< div id =placeholder>< / div> 
< / div> 
<！ -  
 INPUT 
  - > 
< form onsubmit =return false;> 
< center>< input type =textid =command_linesize =50autofocus =autofocus/>< / center> 
< / form> 
< / div> 
 
 
 CSS：
 
 #container {
颜色：白色; 
位置：绝对; 
 top：50％; 
剩下：50％; 
 margin-top：-200px; 
 margin-left：-400px; 
} 
 
 
 
 #console {
 background-color：black; 
 height：400px; 
 width：800px; 
 margin：0 auto; 
溢出：auto; 
颜色：白色; 
} 
 
 #console p {
颜色：白色; 
 display：none; 
 font-size：17px; 
 font-family：Times New Roman，Times，serif; 
} 
  
 
 
解决方案
使用下面的
 
 
 
 HTML：
 < input type =text maxlength =1> 
< p>不，我不想杀你。你为什么在这？囚犯：我不知道，我被捕了。你需要帮助我。你需要找到手铐的钥匙。我不确定他们在哪里。 < / p为H. 
  
 JS 
 <$如果（e.keyCode == 13）{$ b $（$）$（$）$（$） b 
 if（$（'input'）。val（）=='1'）{
 $（p）。toggle（）; 
} else {
 $（p）。toggle（）; 
} 
} 
}）; 
}）; 
  
  http://codepen.io/nagasai/pen/Krkxdg  
 
I am creating a text based RPG with JavaScript. I want to hide and show a <p> element when a specific input is made.

When "1" is pressed, I want to create a <p> element in the top right hand corner that says something like "Get key to handcuffs" -- like a reminder.

Below is the code to talk to the prisoner. After you are done talking with him you should get this reminder.
else if (input == "1") {
    if (currentroom == "interrogation" && guarddead3 == true) {
        $('<p>No, I dont want to kill you. Why are you here? <br>Prisoner: I dont know, I got captored. You need to help me. You need to find the key to the handcuffs. I am not sure where they are. </p>').insertBefore("#placeholder").fadeIn(1000);
    } else {
        $('<p>What do you mean?.</p>').insertBefore("#placeholder").fadeIn(1000);
        $("#container").fadeOut(3000, function() {
            $("#killed_guard").fadeIn(3000);
        });
    }
}
EDIT:
HTML: 
<div id="placeholder"></div>
</div>
<!--
INPUT
-->
<form onsubmit="return false;">
<center><input type="text" id="command_line" size="50" autofocus="autofocus" /></center>
</form>
</div>


CSS:

#container {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -400px;
}



#console {
    background-color:black; 
    height: 400px; 
    width: 800px; 
    margin: 0 auto;
    overflow: auto;
    color: white;
}

#console p {
    color: white;
    display: none;
    font-size: 17px;
    font-family: "Times New Roman", Times, serif;
}

解决方案
To achieve your expected result, use below

HTML:
<input type="text" maxlength="1">
<p>No, I dont want to kill you. Why are you here? <br>Prisoner: I dont know, I got captored. You need to help me. You need to find the key to the handcuffs. I am not sure where they are. </p>
JS
$(document).ready(function(){
  $('input').keypress(function(e) { 
    if(e.keyCode  == 13){

      if($('input').val()=='1'){
        $("p").toggle();
      }else{
        $("p").toggle();
      }
  }
    });
});
http://codepen.io/nagasai/pen/Krkxdg

                        
这篇关于隐藏并显示&lt; p&gt;元素与JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！