CODEWITHSUNDEEP
javascript
BobSnarley
BobSnarley

Reputation: 39

How do I separate JavaScript Scripts for HTML

I have to create an HTML page following certain guidelines. I am not asking anyone to do my homework for me but I am stuck on the first part.

Create and Initialize three arrays. Use for-loops to populate those arrays. Add an element to the end of one array.

I have created 2 arrays and used a pop element. But when I open the .htm it populates correctly but when pressing create it does the second part of my code. How do I separate the scripts?

<!DOCTYPE HTML>
   <html>
   <head>
   <title>Testing JavaScript for Loop</title>
   </head>

   <body>

   <p>The pop method removes the last element from an array.</p>

    <button onclick="myFunction()">Create</button>
    <button onclick="pop()">Pop</button>

    <p id="demo"></p>

    <script>


    var fruits = ["Banana", " Orange", " Apple", " Mango"];

    var newFruits = [];

    document.getElementById("demo").innerHTML = newFruits;

    function myFunction() {
        for (var i in fruits) {
            newFruits.push(fruits[i])
        }
        document.getElementById("demo").innerHTML = newFruits;
    }

    function pop() {
        newFruits.pop();
        document.getElementById("demo").innerHTML = newFruits;
    }
</script>


<br>
  <p>This one needs to add and element to the beginning.</p>

    <button onclick="myFunction()">Create</button>
    <button onclick="pop()">This button needs to add to beginning</button>

    <p id="veggie"></p>

<script>    


    var veggies = ["Broccoli", " Carrots", " Cucumber", " Beans"];

    var newVeggies = [];

    document.getElementById("veggie").innerHTML = newVeggies;

    function myFunction() {
        for (var i in veggies) {
            newVeggies.push(veggies[i])
        }
        document.getElementById("veggie").innerHTML = newVeggies;
    }

/*need this to put an element at the beginning of the list */

    function pop() {
        newVeggies.pop();
        document.getElementById("veggie").innerHTML = newVeggies;
    }
    </script>     





      </body>
    </html>

Upvotes: 1

Views: 1110

Answers (4)

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

Following should work,

<!DOCTYPE HTML>
   <html>
   <head>
   <title>Testing JavaScript for Loop</title>
   </head>

   <body>

   <p>The pop method removes the last element from an array.</p>

    <button onclick="createFruits()">Create</button>
    <button onclick="popFruit()">Pop</button>

    <p id="demo"></p><br>
  <p>This one needs to add and element to the beginning.</p>

    <button onclick="createVeggies()">Create</button>
    <button onclick="popVegie()">This button needs to add to beginning</button>

    <p id="veggie"></p>

<script>    

    var fruits = ["Banana", " Orange", " Apple", " Mango"];

    var newFruits = [];

    document.getElementById("demo").innerHTML = newFruits;

    function createFruits() {
        for (var i in fruits) {
            newFruits.push(fruits[i])
        }
        document.getElementById("demo").innerHTML = newFruits;
    }

    function popFruit() {
        newFruits.pop();
        document.getElementById("demo").innerHTML = newFruits;
    }

    var veggies = ["Broccoli", " Carrots", " Cucumber", " Beans"];

    var newVeggies = [];

    document.getElementById("veggie").innerHTML = newVeggies;

    function createVeggies() {
        for (var i in veggies) {
            newVeggies.push(veggies[i])
        }
        document.getElementById("veggie").innerHTML = newVeggies;
    }

/*need this to put an element at the beginning of the list */

    function popVegie() {
        newVeggies.unshift("Brinjal");
        document.getElementById("veggie").innerHTML = newVeggies;
    }
    </script>     

      </body>
    </html>

First, never have two functions with the same name, javaScript is different than that of other languages(e.g., Java) where you have the luxury of method overloading. In case of two methods having same name, the second method in the code sequence will be executed when we talk of javaSript

Second, put all your custom javaScript code inside one <script> tag, preferably at the end of body, i.e., before "</body>" tag.

Third, even better practice is to put all ur custom javaScript code in a ".js" file and include it as,

<script src="yourJSFile.js"></script>

This helps maintain all ur js code in a single file. Note, the path in the src attribute should be proper (relative path will do).

Fourth and final point, wonder why you are popping an element when you need to add it to the beginning of array. You should use unshift() operation.

Hope this helps.

Upvotes: 0

rady
rady

Reputation: 428

Name you functions differently. by declaring myfunction() twice, JavaScript uses the last one. If you define the first function as fruits_myfunction() and the second as veggie_myfunction() you won't get this collision any more. It's not a matter of separating it. JavaScript's scoping is basically this: everything is global. Even if you where to separate the functions into separate files, you would still get this collision.

Upvotes: 1

Mladen Oršolić
Mladen Oršolić

Reputation: 1422

Use return; before your function is closed, also put functions in head section.

Something like this :

   <html>
   <head>
   <title>Testing JavaScript for Loop</title>
   <script>
    function myFunction() {
        for (var i in fruits) {
            newFruits.push(fruits[i])
        }
        document.getElementById("demo").innerHTML = newFruits;
        return;
    }

    function pop() {
        newFruits.pop();
        document.getElementById("demo").innerHTML = newFruits;
        return;
    }
   </script>
   </head>

   <body>

   <p>The pop method removes the last element from an array.</p>

    <button onclick="myFunction()">Create</button>
    <button onclick="pop()">Pop</button>

    <p id="demo"></p>

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

Upvotes: 1

area28
area28

Reputation: 1425

Assuming your file structure is:

/index.htm

Create a file called index.js for example.

Paste in the contents of the script tag:

var fruits = ["Banana", " Orange", " Apple", " Mango"];

var newFruits = [];

document.getElementById("demo").innerHTML = newFruits;

function myFunction() {
    for (var i in fruits) {
        newFruits.push(fruits[i])
    }
    document.getElementById("demo").innerHTML = newFruits;
}

function pop() {
    newFruits.pop();
    document.getElementById("demo").innerHTML = newFruits;
}

Now your structure is 

/index.htm
/index.js

In the htm file change the script tag to be:

<script type="text/javascript" src="/index.js">

Upvotes: 0

Related Questions