same pop() method but two different results

**orrange23** · 20th July 2012, 22:55

hello guys,

i'm still reading j pollocks book and i'm on the part of the pop() method. and i'm a bit confused about the pop() method because it's giving me two different results but with the same method. i know it's a bit confusing explaining but here's the code i tested.

the first script is from w3schools.com:
The result of fruit will be: Banana,Orange,Apple

Code:

<body>
    <h2>pop() Method version 1</h2>

    <p id="demo">Click the button to remove the last array element.</p>

    <button onclick="myFunction()">Try it</button><br><br>

    <script type="text/javascript">
        var fruits = ["Banana", "Orange", "Apple", "Mango"];

        function myFunction() {
            fruits.pop();
            var x = document.getElementById("demo");
            x.innerHTML = "Result of pop method version 1:  " + fruits;
        }
    </script>

    <h2>pop() Method version 2</h2>

    <script type="text/javascript">
        var fruits2 = ["Banana", "Orange", "Apple", "Mango"];
        var pickedFruit = fruits2.pop();
        document.write("Result of pop method version 2:  " + pickedFruit);
    </script>
</body>

the second script with pop() method also has a different result. it only gave the result of Mango. this is the same result as with the book that it only write the last item in the array not remove it. but in the first script from w3schools. the pop() method result was it removed the last array and displayed the remaining fruits. i don't understand which is which

? is this right i'm doing?

many thanks in advance.

**John Pollock** · 20th July 2012, 23:22

Hey orrange,

The first one shows what is left in the original array (fruits)

The second creates a new variable that holds the value that was popped from the array (Mango) and shows that value. If it showed the value of the original fruits array instead, it woiuld be the same as the first one

Hope this helps!

***coothead*** · 20th July 2012, 23:47

Hi there orrange23,

putting an "alert()" into the script may help to show you what is going on...

Code:

<body>
<h2>pop() Method version 1</h2>

<p id="demo">Click the button to remove the last array element.</p>

<button onclick="myFunction()">Try it</button><br><br>

<script type="text/javascript">
   var fruits = ["Banana", "Orange", "Apple", "Mango"];

function myFunction() {
   test=fruits.pop();
   alert(test);
   var x = document.getElementById("demo");
   x.innerHTML = "Result of pop method version 1:  " + fruits;
 }
    </script>

<h2>pop() Method version 2</h2>

<script type="text/javascript">
   var fruits2 = ["Banana", "Orange", "Apple", "Mango"];
   var pickedFruit = fruits2.pop();
   document.write("Result of pop method version 2:  " +pickedFruit );
</script>

</body>

Clicking the button four or five times will indicate that the "push()" function
returns the value of the last item of the array and removes it.
The length of the array decreases by one

coothead

**orrange23** · 21st July 2012, 16:28

hi john and coothead,

thank you guys for the help and clearing it all out. i changed it again now i got the same results for the pop() method. your right john with the variable that's why it's showing two different values when printed. and below is the revised code:

Code:

<body>
    <h2>pop() Method version 1</h2>

    <p id="demo">Click the button to remove the last array element.</p>

    <button onclick="myFunction()">Try it</button><br><br>

    <script type="text/javascript">
        var fruits = ["Banana", "Orange", "Apple", "Mango"];

        function myFunction() {
            fruits.pop();
            var x = document.getElementById("demo");
            x.innerHTML = "Result of pop method version 1:  " + fruits;
        }
    </script>


    <h2>pop() Method version 2</h2>

    <script type="text/javascript">
        var fruits2 = ["Banana", "Orange", "Apple", "Mango"];
        fruits2.pop();
        document.write("Result of pop method version 2:  " + fruits2);
    </script>
</body>

thank you guys again. oh, and john i have a question will you be doing like a 4th edition of your book?

**John Pollock** · 21st July 2012, 22:10

Sure thing, glad we could help.

There is a 4th edition in the works. I'll post updates here and/or at my site as to when it will be out. It's still in the beginning stages right now.

**orrange23** · 24th July 2012, 17:39

REALLY! WOW! can't wait for your next book. i hope there's still the Try this and Self Test portion of the book but if you could squeeze in a bit additional examples of how a javascript code's practical use on a actual website if there is. i'm not saying every code to have an example but like maybe the popular one's that's being used all the time of popular websites. but this is just a suggestion. no matter what i still love your book. anyway looking forward to your next book and i know it's gonna be great!