html - Hide and show <p> element with javascript -
i creating text based rpg javascript. want hide , show <p>
element when specific input made.
when "1" pressed, want create <p>
element in top right hand corner says "get key handcuffs" -- reminder.
below code talk prisoner. after done talking him should reminder.
else if (input == "1") { if (currentroom == "interrogation" && guarddead3 == true) { $('<p>no, dont want kill you. why here? <br>prisoner: dont know, got captored. need me. need find key handcuffs. not sure are. </p>').insertbefore("#placeholder").fadein(1000); } else { $('<p>what 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 expected result, use below
html:
<input type="text" maxlength="1"> <p>no, dont want kill you. why here? <br>prisoner: dont know, got captored. need me. need find key handcuffs. not sure are. </p>
js
$(document).ready(function(){ $('input').keypress(function(e) { if(e.keycode == 13){ if($('input').val()=='1'){ $("p").toggle(); }else{ $("p").toggle(); } } }); });
Comments
Post a Comment