Simen Musaus Simen Musaus - 4 months ago 10
HTML Question

Hide and show <p> element with javascript

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

Answer

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

Comments