JQUERY and how to get a submitted value to stay on page and second div to show up

Question

I'm trying to figure out how to get this second div to show upon adding a value when enter is clicked. So after we fill in a empty space > hit enter > that value stays on page > second div shows up for us to enter another value...

    var oTWExample1 = new Typewriter(/* elements: */ "#bluebox, #first, #second", /* frame rate (optional): */ 100);
    /* default frame rate is 100: */
    // var oTWExample2 = new Typewriter("#controls");
    // var oTWExample3 = new Typewriter(/* elements: */ "#second", /* frame rate (optional): */ 100);
    onload = function () {
     oTWExample1.play();
     oTWExample2.play();
    };

    function enter(ele) {
       if(event.keyCode == 13) {
        document.getElementById("#second").style.display= 'block';
        // oTWExample3.play();
           // value += ele.value;
         }
     }
    //This is the HTML portion of it//

    <div id="poem"> $he went to the <form><input type="text"  onkeydown="search(this)"/></form>
    </div>

    <div id="second" style="display: none">
    and saw an array of <form><input type="text" onkeydown="search(this)"/></form>
    </div>

Check [this] link for getting the keyboard event for enter key(http://stackoverflow.com/questions/979662/how-to-detect-pressing-enter-on-keyboard-using-jquery) — Karthik Sivakumar, Nov 23 '16 at 05:24
Yeah! Here's the JSFiddle page. The typewriter simulation suppose to work, but not working on jsfiddle --- https://jsfiddle.net/mr7Lvusd/ — Dustin Lee, Nov 23 '16 at 06:00

score 1 · Accepted Answer · answered Nov 23 '16 at 05:40

This line of code document.getElementById("#second").style.display is wrong it should either be in javascript or in jquery not a combination of both,So you can use the code as shown below

JQUERY:

$("#second").attr('style','display:block');

JS:

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

This is a working code snippet,

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script>
 function search(ele) {
       if(event.keyCode == 13) {
        document.getElementById("second").style.display= 'block';
        //$("#second").attr('style','display:block');
        // oTWExample3.play();
           // value += ele.value;
         }
     }
    //This is the HTML portion of it//
</script>
    <div id="poem"> $he went to the <form><input type="text"  onkeydown="search(this)"/></form>
    </div>

    <div id="second" style="display: none">
    and saw an array of <form><input type="text" onkeydown="search(this)"/></form>
    </div>
</body>
</html>

Thanks! That works, i'll try that. But if you wanted to see the jsfiddle here is the link https://jsfiddle.net/mr7Lvusd/, supposedly the typewriter simulation works but not on the jsfiddle — Dustin Lee, Nov 23 '16 at 06:03

score 0 · Answer 2 · answered Nov 23 '16 at 05:51

Not sure if this would help

$(function() {
  $('#poem-input').keypress(function(e) {
    var keycode = event.keyCode || event.which;
    if (keycode == '13') {
      $(this).replaceWith('<span>' + this.value + '</span>')
      $('#second').show()
    }
  });
});

<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
  <div>$he went to the
    <input id="poem-input" type="text" />
  </div>

  <div id="second" hidden>
    and saw an array of
    <input type="text" />
  </div>
</body>
</html>

Oh thanks! This is what i was trying to go for basically! But here is the Jsfiddle, for some reason not working properly. https://jsfiddle.net/mr7Lvusd/ — Dustin Lee, Nov 23 '16 at 06:04

JQUERY and how to get a submitted value to stay on page and second div to show up

2 Answers2