How do I separate JavaScript Scripts for HTML

Question

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>

I don't think its being understood right. The first section of fruits doesn't work. If I push create it will do the bottom code where veggies is. I am trying to make them two separate happenings, one for fruits that removes the last one, then one for veggies that adds one to the beginning. Sorry if I didn't state the objective clearly. — BobSnarley
– BobSnarley, Commented Jun 17, 2015 at 19:09

Mladen Oršolić · Accepted Answer · 2015-06-17 18:58:25Z

1

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>

edited Jun 17, 2015 at 18:58

answered Jun 17, 2015 at 18:53

Mladen Oršolić

1,4323 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Josh Beam Over a year ago

The functions are fine at the end of the body; this is a best practice, as it will wait for the DOM is loaded before executing any scripts without an onload handler.

Mladen Oršolić Over a year ago

Actually as you are saying it, DOM will not be fully loaded as there will be at least </HTML> after them, scripts being executed without being triggered by an event are matter for another story.

rady Over a year ago

On top of what @JoshBeam said, I think its better to JS at the bottom of the html file anyway because of the way HTML is loaded. It will load the contents at the top of the file before things at the bottom. By putting scripts at the bottom, the content gets loaded first, giving the appearance of faster load times. this is especially tru in regards to separate .js files

Josh Beam Over a year ago

HTML5 doesn't require an <html> tag, so it would be irrelevant to script execution. So as far as the JS is concerned, the DOM will be fully loaded. stackoverflow.com/a/5642982/2714730

rady · Accepted Answer · 2015-06-17 19:01:32Z

1

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.

answered Jun 17, 2015 at 19:01

rady

4285 silver badges12 bronze badges

5 Comments

Mladen Oršolić Over a year ago

where do you see myfunction() declared twice?

rady Over a year ago

@MladenOršolić Scroll down in the box. after <p id="veggie"></p>

Mladen Oršolić Over a year ago

Oh didnt even see the remaining part. Yep in this case youre absolutely right.

BobSnarley Over a year ago

Cancel the first one I wrote, I found the missing spot, now the (Fruit) Pop button removes the (veggie) last in line and leaves the (fruit) top alone.

rady Over a year ago

Make sure you also change the onclick attribute to also point to the new functions.

Sudhansu Choudhary · Accepted Answer · 2015-06-17 19:17:50Z

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.

This helped me so incredibly much, I appreciate it emmensely! I have unjumbled all of my code and now it reads and flows nicer! You are my savior!

area28 · Accepted Answer · 2015-06-17 18:55:57Z

0

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">

answered Jun 17, 2015 at 18:55

area28

1,4251 gold badge9 silver badges11 bronze badges

Collectives™ on Stack Overflow

How do I separate JavaScript Scripts for HTML

4 Answers 4

4 Comments

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related