angularProject/fruitsExample.html at master · Daniela0106/angularProject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>Adding user's input to an array</h1>
    <p>The push method appends a new element to an array.</p>
    <label>Fruit:</label>
    <input type="text" class="form-control" id="inputFruit">
    <br>
    <button type="button" class="btn btn-default" onClick=
            "myFunction(document.getElementById('inputFruit').value)">
        Try it</button>
    <br>
    <h4>Result:</h4>
    <p id="demo"></p>
</div>

<script>
    var inputFruit="";
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits;

    function myFunction(inputFruit) {
        fruits.pop();//to delete the last element in the array
        fruits.push(inputFruit);
        fruits.shift();// to delete the first element in the array

        document.getElementById("demo").innerHTML = fruits;
    }
</script>

</body>
</html>