Need help with JS stack

DDH · 01-20-2013, 06:13 PM

Need a bit f help wit JS

Old Pedant · 01-20-2013, 09:56 PM

Array.push() is *NOT* a push-down stack.

It does exactly what you are seeing.

Basically if you do this:

Code:

var ary = [ ];
ary.push("apple");
ary.push("banana");
ary.push("coleslaw");

you get exactly the same result as if you had done

Code:

var ary = [ ];
ary[0] = "apple";
ary[1] = "banana";
ary[2] = "coleslaw";

which is the same you would get if you did

Code:

var ary = ["apple","banana","coleslaw"];

You can argue that the push( ) method of Array is misnamed. But it's way too late to change it now. It is what it is.

Old Pedant · 01-20-2013, 10:05 PM

I should point out that if you use Array.push() and Array.pop() then indeed the array *acts* like a stack. It just isn't in the order you would expect it if you are used to conventional CPU stacks.

One "trick" you could pull:

Code:

function userInput(e)
{
    var inp = document.getElementById("input");
    if(e.which == 13 && inp.value != "" )
    { 
        backStack.push( inp.value );
        var temp = [];
        temp.concat(backStack).reverse();
        document.getElementById("TextBox1").innerHTML = temp.join("<br/>");
    }
}

DDH · 01-20-2013, 11:13 PM

Thanks! I've tried the "trick" you suggested, but it doesn't seems to work. I will continue to try. Thank you

jmrker · 01-21-2013, 01:15 AM

Quote:

Originally Posted by DDH

Thanks! I've tried the "trick" you suggested, but it doesn't seems to work. I will continue to try. Thank you

I'm not sure what kink of problem you are having without seeing your code,
but this works and can be modified to show both reversed and non-reverse display.
Plus I added two new stack commands to demonstrate.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Untitled </title>
<script type="text/javascript">
var backStack = [];
</script>

<style type="text/css">
 #TextBox1 { height:400px; width:200px;border:1px solid red; }
</style>

</head>
<body>
<input type="text" value="" id="input" onkeyup="userInput(event)">
<br>Stack Display:<br>
<div id="TextBox1"></div>
<button onclick="dropEntry()">Drop</button>
<button onclick="swapEntry()">Swap</button>

<script type="text/javascript">
function showStack() {                             // display in LIFO order
  var x = document.getElementById("TextBox1");
  var s = [].concat(backStack);
  x.innerHTML = s.reverse().join('<br/>'); // .reverse() demo
//  x.innerHTML = s.join('<br/>');         // no .reverse() demo
  document.getElementById('input').focus();
}
function userInput(e){
  if (e.which == 13) {
    var info = document.getElementById('input');
    if (info.value > "") {
      backStack.push(info.value);
      info.value = "";
      showStack();
    }
  }
}
function dropEntry() {
  if (backStack.length > 0) { backStack.pop(); }  showStack();
}
function swapEntry() {
  if (backStack.length > 1) {
    var top0 = backStack.pop();      var top1 = backStack.pop();
    backStack.push(top0);            backStack.push(top1);
  }
  showStack();
}

</script>

</body>
</html>

Old Pedant · 01-21-2013, 04:41 AM

Actually, you don't even need the intermediate temporary variable (temp in my code, s in jmrker's code).

This works:

Code:

<!DOCTYPE html>
<html>
<body>
<body>
<form onsubmit="return false;">
<input type="text" value="" id="input" />
</form>
<br>Stack Display:<br>
<div id="TextBox1"></div>

<script type="text/javascript">
(
  function()
  {
      var backStack = [ ];
      var inp = document.getElementById("input");
      inp.onkeyup = userInput;    

      function userInput(e)
      {
          if(e.which == 13 && inp.value != "" )
          { 
              backStack.push( inp.value );
              document.getElementById("TextBox1").innerHTML = 
                     [].concat(backStack).reverse().join("<br/>");
              inp.value = "";
              inp.focus();
         }
      }
  }
)();
</script>
</body>
</html>

DDH · 01-21-2013, 12:29 PM

Thank you!

Airblader · 01-21-2013, 01:19 PM

You could also use shift/unshift instead of push/pop.

DDH · 01-21-2013, 01:46 PM

Is there a way to display the popped element from an array into a text box.

jmrker · 01-21-2013, 02:30 PM

Quote:

Originally Posted by DDH

Is there a way to display the popped element from an array into a text box.

Which text box? The entry box or a different one?

Assuming input box and code from post #5:

Code:

function dropEntry() {
  if (backStack.length > 0) { var top0 = backStack.pop(); document.getElementById('TextBox1').value = top0; }
  showStack();
}

You should try some of the modifications yourself to see how it works for future reference.

DDH · 01-21-2013, 03:39 PM

Now I have a displayed item, but instead of the letters it displays 1,2,3....

jmrker · 01-21-2013, 04:47 PM

Quote:

Originally Posted by DDH

Now I have a displayed item, but instead of the letters it displays 1,2,3....

That doesn't make sense.

Show the code you are testing.

DDH · 01-21-2013, 04:52 PM

Basically I want to display the items as it pops it , and pushes it from one stack to another.

jmrker · 01-21-2013, 04:57 PM

Quote:

Originally Posted by DDH

Sorry, this is the code. Basically I want to display the items as it pops it , and pushes it from one stack to another.

Code:

if (backStack.length > 0) { document.getElementById('display').value = forwardStack.push(backStack.pop()); showBackStack(); showForwardStack();}

Show the WHOLE code. JS and HTML (and any CSS if used)
Where is the forwardStack coming from???
Don't make us guess at what your problem is without providing the source.

DDH · 01-21-2013, 04:59 PM

Okay.