Is there a way to transform inline JS coding to an external style sheet?

I currently have JavaScript code in both the body and head sections of my webpage. If I decide to move them to an external .js file, what steps should I take to transfer them and then bring them back onto the page?

Head -

<script language="Javascript">
setInterval("settime()", 1000);

function settime () {
var curtime = new Date();
var curhour = curtime.getHours();
var curmin = curtime.getMinutes();
var cursec = curtime.getSeconds();
var time = "";

if(curhour == 0) curhour = 12;
time = (curhour > 12 ? curhour - 12 : curhour) + ":" +
     (curmin < 10 ? "0" : "") + curmin + ":" +
     (cursec < 10 ? "0" : "") + cursec + " " +
     (curhour > 12 ? "pm" : "am");

document.date.clock.value = time;
}
</script> 

Body -

<script language="JS" type="text/javascript">
var monthArray = new Array("January", "February", "March", "April", "May",
                       "June", "July", "August", "September",
                       "October", "November", "December");

var today = new Date();
var todayMonth = today.getMonth();
var todayDate = today.getDate();
var todayYear = today.getFullYear();
document.write(monthArray[todayMonth] + " " + todayDate + ", " + todayYear);
</script>

Answer №1

To improve your website's performance, consider moving your JavaScript code into an external file named my.js and including it in your page like this:

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

Make sure to adjust the src value to reflect the location of your JS file relative to your webpage.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a single video on an HTML page in sequential order

My webpage contains a video tag for playing online videos. Instead of just one, I have utilized two video tags. However, when attempting to play both videos simultaneously, they end up playing at the same time. I am seeking a solution where if I start pla ...

Could not locate the provider: $stateProvider

It's puzzling to me why this code is not recognizing the $stateProvider. Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $stateProvider This is a simple example of a module: ( ...

Is it possible that bitwise left shifts in JavaScript ES6 (<<) become cyclical after surpassing a shift of 63?

From my understanding of the << bitwise left operator in JS (ES6), the void to the right is typically filled with zeros. However, through observation in both V8 and JSC, it appears that the set bits suddenly reappear when we shift by 64 or more. (2 ...

Troubleshooting angular service jasmine test - unable to locate $http service

As I followed the tutorial at , I encountered an issue with the jasmine test provided. Despite simplifying the test to its core, it still fails to pass. Could someone point out where I might be going wrong? The service being tested is: var appServices = ...

Utilizing React: Incorporating classes to elements with innerHTML

Is there an efficient way to determine if a table cell contains innerHTML and apply a class accordingly? I have a large table with numerous cells that need to be handled dynamically. The cell content is set using dangerouslySetInnerHTML, as shown below: ...

Streaming data from a third-party API using WebSockets to distribute it to various subclients

In our data-driven application, the backend continuously pulls data from a third-party server and sends it to the frontend clients via websockets. The problem arises when multiple clients connect, resulting in the same data being fetched multiple times unn ...

Failure of default option to appear in dropdown menu in Angular

I currently have a dropdown list in my HTML setup like this: <select id="universitySel" ng-model="universityValue" ng-options="university._id for university in universities"> <option value="-1">Choose university</option> ...

Error message: "Uncaught TypeError in NextJS caused by issues with UseStates and Array

For quite some time now, I've been facing an issue while attempting to map an array in my NextJS project. The particular error that keeps popping up is: ⨯ src\app\delivery\cart\page.tsx (30:9) @ map ⨯ TypeError: Cannot read pr ...

Patience is key when waiting for Ajax response data in Vue.js

Within my Vue component, I am attempting to retrieve data from an API using axios. <template> <div> This is Default child component {{tools[0].name}} </div> </template> <script> import { CustomJS } fr ...

What is the process for incorporating Material-UI into a JSFiddle project?

I'm having trouble figuring out how to load and use the Material UI script on platforms like JSFiddle or SO's code editor, even though I can add it with NPM. Check out this JSFiddle example <script src="https://unpkg.com/@material-ui/core/um ...

Encountering `No provider for ControlContainer!` error while utilizing [class.someClass] in Angular 2?

I have a project in progress which involves using angular 2. I am currently working on forms and validation and have encountered an issue. Although I have found a workaround, I am curious to understand why my original code is not functioning properly. Bel ...

Learning how to extract data from XML and insert it into HTML using JavaScript (Novice)

--Simplified Code Update-- I'm in a bit of a tricky situation here. According to w3schools, my code should be functioning properly, but for some reason, it's just not working as expected. Here's the code for my JavaScript. XHTML <!DOCT ...

Creating a JavaScript script to implement a CAPTCHA feature on Google Forms

I'm looking to implement a JavaScript solution that can prevent spam on Google Forms. The idea is as follows: Generate a random number a between 1 and 1000; Generate another random number b between 1 and 1000; Obtain input from the user, storing it a ...

What is the process of triggering an action from within getInitialProps?

I've been struggling to integrate Redux into a Next.js app, particularly when trying to use the dispatch function within getInitialProps. For some reason, the store keeps returning as undefined and I can't seem to pinpoint the issue. I've fo ...

Ejs does not automatically include the message when returning a template to render in HTML

I need help rewording the title properly. I am facing an issue in my server code where a database query is executed to check if the account name already exists. If it does, a specific message should be displayed using this template: con.query('SELECT ...

Run XQuery dynamically in JavaScript and store the outcome in a JavaScript variable

Looking to achieve the following: Running a dynamic XQUERY stored in a JavaScript variable example var myxquery = For Channels.Channel where Channel/availability = yes And Channels.Channel/Label = 'CNN' Return EXIST(Channels.Channel/Id)&apo ...

Merging text and a JSON object to retrieve the information

Having some trouble with a JSON object and retrieving values. This is the syntax that works for getting the data I need. dataJSON.companies[0].fields.Internet.length I want to dynamically evaluate the object using a string variable, like this... var me ...

Tips for creating a useState variable within the render() function in reactjs

I'm completely new to reactjs, and I've been trying to define useState variables within the render() method of a reactjs component. However, I keep running into an error: "Invalid hook call." class ProductDefinition extends Component { construc ...

Following a POST request, the redirection functionality in Next.js seems to be malfunctioning

I am facing an issue with redirecting the user after submitting a form. I have a button that triggers a post request to my API route, which then inserts a row in the database. The goal is to redirect the user to / once everything is done. However, the retu ...

Encountering an issue of duplicate key error when using multiple v-for loops with various keys

I've encountered an issue while working on a Python application that utilizes Vue.js. A ticket came my way with an error message stating: [Vue warn]: Duplicate keys detected: ''. This may cause an update error. (found in Root) The pro ...