CODEWITHSUNDEEP
javascriptcsshtml
user2162580
user2162580

Reputation: 11

Use External JavaScript file to change display on div

I am currently doing this:

<div id="textChange" style="display:none;">Blah blah</div>
<script type="text/javascript">
var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
}
</script>

and would like to move the script to an external JS file. How do I do that? I doesn't seem to be working for me.

Thanks.

Upvotes: 1

Views: 3726

Answers (7)

guypursey
guypursey

Reputation: 3194

Take everything between your script tags and put it in another file. You should save this file with a .js file extension. Let's pretend you save it as textChange.js.

Now the simplest thing to do would be to include the script file just after your <div> tag -- so basically where the <script> tags and code were before, write:

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

This assumes that 'textChange.js' is in the same folder as your HTML file.

...

However, that would far too easy! It is generally best practice to place <script> tags in the <head> of your HTML file. You can move the line above up into the head but then the script will load before your <div> does--it will try to do what it does and it will fail because it can't find the div. So you need to put something around the code in your script file so that it only executes when the document is ready.

The simplest way to do this (and there may be better ways) is write the following...

window.onload = function () {
    var d = new Date();
    var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
    if ((funnyDate>=20131916) && (funnyDate<=20131923))
        {
            document.getElementById("textChange").style.display ="block";
        }
}

This will mean your script is in the head where it should be and that it only performs when your whole page is ready, including the div that you want to act on.

Hope this helps.

Upvotes: 0

user2133617
user2133617

Reputation:

One way to do this is to create a function and include this in a js file

function style_changer(){

var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
  {
    document.getElementById("textChange").style.display ="block";
  }
}

Now in your html give reference to the js file containing this function for example

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

you can include this in your section and should work

Upvotes: 1

nsgulliver
nsgulliver

Reputation: 12671

Put script in a separate file and name it yourScript.js and finally include it in your file

add the code within the script file 

function changeFunnyDate(){
    var d = new Date();
     var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
      if((funnyDate>=20131916) && (funnyDate<=20131923))
    {
    document.getElementById("textChange").style.display ="block";
      }
}

Finally add the script in your file & call the method

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

Upvotes: 0

OpEtMaR
OpEtMaR

Reputation: 231

1-open notepad or notepad ++ or whatever you use as a text editor.

2-copy the javascript code to the text editor without and tags

var d = new Date();
 var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
  if((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
  }

3-save the files with any name you want and don't forget to add the .js extension to the file for example save the file as "test.js"

4-copy the "test.js" to the same directory as html page.

5-add this line to the html page 

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

Upvotes: 1

Sri Tirupathi Raju
Sri Tirupathi Raju

Reputation: 819

put this below code in a function

step1:

function onLoadCall()
var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
}
}

Step2:-

call that function on page load

<body onload='onLoadCall()'>
...
</body>

step3:- now move the script to another file it will work

Upvotes: 0

Bart
Bart

Reputation: 17371

Save the a file called script.js with the contents.

var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
{
    document.getElementById("textChange").style.display ="block";
}

And place this tag inside your HTML document. Place it just before the </body> so you'll know that the element textChange will exist in the DOM before your script is loaded and executed.

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

Make sure that script.js is in the same directory as your HTML document.

Upvotes: 0

dfsq
dfsq

Reputation: 193291

Include this script after your #textChange div and it will work. For example before closing </body> tag:

...
<script src="funny-script.js" type="text/javascript"></script>
</body>

This is the simplest method. You could also run this code on DOMContentLoaded or window.onload events, but looking at what your script doing I don't think it makes sence.

Upvotes: 1

Related Questions