javascript code in html to js file

Question

I am struggling with the following problem.

I have made a memorygame with javascrpt for school.It all works fine, but my teacher told me that i can not have on line of javascript in my HTML, like this :

HTML :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Memory spelen</title>
    </head>
    <body>
        <script type="text/javascript" src="javascript.js"></script>
        <div id="memory_board"></div>
        <script>newBoard();</script>
   </body>
</html>

The newBoard() is applied to the memory_board div. How can i take this little piece of script out of my HTML file and place it in my js file, to still function properly.

Thanks in advance

What does newBoard do? Can you create a jsfiddle.net for us? — Patrick Hofman
– Patrick Hofman, Commented Jun 23, 2014 at 7:24
that piece of code will work like it was doing in your html if you don't jave server generated ids... else you will need a polyfill for those ids — HellBaby
– HellBaby, Commented Jun 23, 2014 at 7:26

hex494D49 · Accepted Answer · 2014-06-23 10:07:13Z

2

Inside of your javascript.js put this

window.onload = function {

    // content of your script

    var newBoard = function(){
        // the new updated newBoard() function from below
    }

    // other parts of your script

    if(window.location.href == 'your-url') {
        // now, after the newBoard() has been updated
        // the next to lines are not needed 
        // var board = document.getElementById('memory_board');            
        // board.innerHTML = newBoard();
        // just call the function
        newBoard();
    }
};

UPDATE

I just took a look at your old fiddle and I changed your newBoard function to this

function newBoard(){
    tiles_flipped = 0;
    var output = '';
    memory_array.memory_tile_shuffle();
    for(var i = 0; i < memory_array.length; i++){
        var div = document.createElement('DIV');
        div.id =  "tile_" + i;
        (function(div,i){
            div.onclick = function() {
                memoryFlipTile(this, memory_array[i]);
            };
        }(div,i));
        document.getElementById('memory_board').appendChild(div);
    }
}

Check the working fiddle.

edited Jun 23, 2014 at 10:07

answered Jun 23, 2014 at 7:26

hex494D49

9,2453 gold badges41 silver badges50 bronze badges

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

6 Comments

HellBaby Over a year ago

but what if you don't want this to run on each page? and you insert that js in a template layout?

Niels Over a year ago

Thanks, the problem still is that my javascript code doesn't apply to the <div>memory_board</div> in my HTML.

Niels Over a year ago

jsfiddle.net/2GW3k/5 this is my full code. If you like, please check it. Would be extremely helpful!

HellBaby Over a year ago

@hex494D49 this is better ;) ... all the time cases like this can appear so you should better be prepared for it

hex494D49 Over a year ago

@HellBaby Check the updated answer; now you have a working program / game :)

|

morgan9999 · Accepted Answer · 2014-06-23 07:27:22Z

1

try to put it like this in external js file

$(document).ready(function(){
   newBoard();
});

answered Jun 23, 2014 at 7:27

morgan9999

8012 gold badges13 silver badges34 bronze badges

1 Comment

Pramod S. Nikam Over a year ago

he want to do it on load of particular div. add filter to follow his requirement

Pramod S. Nikam · Accepted Answer · 2014-06-23 07:29:39Z

1

It looks that you need to call newBoard() method on onload event of memory_board div , You can do this in following ways:

<div id="memory_board" onload="javascript:newBoard()"  ></div>  // use onload event of memory_board

answered Jun 23, 2014 at 7:29

Pramod S. Nikam

4,5628 gold badges41 silver badges66 bronze badges

Comments

user3309301 · Accepted Answer · 2014-06-23 07:28:41Z

0

you can use onload function on the javascript. It will call the function when all the HTML tag is loaded on the screen.

answered Jun 23, 2014 at 7:28

user3309301

3011 silver badge4 bronze badges

Collectives™ on Stack Overflow

javascript code in html to js file

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related