JSFiddle Functioning Properly, But Documents Are Not Loading

My JSFiddle is functioning properly, but the files on my computer aren't. It seems like there might be an issue with how they are linking up or something that I may have overlooked. I've checked the console for errors, but nothing is popping up.

As a beginner in programming, any tips you could provide to point me in the right direction would be greatly appreciated. Thank you!

$( document ).ready(function() {
    $('#show').click(function() {
        var color = '#'+Math.floor(Math.random()*16777215).toString(16);
        $('body').css('background-color', color );
    });
});     
body {
background: #fff18e;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="javascript.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
       
    <title>Choose A COLOR!</title>
    
</head>

<body>
    
    <button id="show">Surprise Me</button>
    
</body>
    
    
</html>

Answer №1

If your code resides in a file named javascript.js, it should be placed within the <head> section of your HTML document, following the inclusion of jquery.js. This is necessary because your code relies on the $ variable being defined by jQuery. It's worth noting that the attribute for specifying script sources is called src, not scr. You can use the following setup.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="javascript.js"></script>

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

What is preventing me from utilizing a dynamic import while working with Nuxt3?

I'm currently working on developing a component that allows me to dynamically import icons based on the provided icon name using unplugin-icons. However, I'm facing an issue where dynamic imports don't seem to work when the import path is dy ...

Tips on wrapping div elements while maintaining equal width in different screen sizes using @media queries

Does anyone have a solution for wrapping divs using @media screen while maintaining equal width on all divs? I've tried using float and inline-block, but can't seem to achieve consistent justified widths. While table-cells maintain equal field wi ...

Oops! The type in React.jsx is not valid - it should be a string for built-in components. You may want to consider converting your class component to a

The error message I am encountering is as follows: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it&ap ...

Sort with AngularJS: orderBy multiple fields, with just one in reverse

Currently, I am faced with the challenge of filtering data based on two variables: score and name (score first, followed by name). This task involves various games, some of which have scores in reverse order (like golf) while others maintain a normal scor ...

The pagination feature in React MUI DataGrid is malfunctioning

I am currently working with a datagrid and implementing server-side pagination. I have set a limit of 5 objects to be returned from the backend, and an offset variable to indicate from which index the next set of data should come. const handlePageChange = ...

Troubleshooting techniques for resolving CSS issues with the video.js package in ReactJS

When using video.js in react to build a video player, I encountered an issue with the npm package not providing its inbuilt CSS. How can I add the inbuilt CSS of video.js? Instead of the control bar, I am getting something different than what is shown in t ...

Adjusting the array of buttons with various functions within the Header component

I am looking to create a customizable Header component with different sets of buttons that trigger various functions. For example, on the home page, the buttons could be "visit about page" and "trigger vuex action A", while on the about page they could be ...

What steps should I take to keep a reference to a specific plugin instance following an AJAX callback?

When creating a plugin, I would like to trigger an AJAX call that retrieves data and then proceeds with building the plugin control. Here is a simplified example of what I have in mind: $.fn.grid = function (options) { this.each(function () { ...

First video filling the entire screen with no black bars

I am looking to implement a video tag that can occupy the entire window, centered, without distorting the aspect ratio. Additionally, I want this video tag/container to push down all other content below it. When the window is resized, I would like the vid ...

Issues with CKEDITOR in Internet Explorer when multiple instances are used with different configuration files

My current challenge involves placing multiple CKEDITOR instances on a single page, each loading a different configuration file. While it functions correctly in Firefox (FF), Internet Explorer (IE) seems to apply the config file from the last instance on t ...

Windows Outlook - automatic tag wrapping feature

My goal is to ensure that buttons wrap properly inside their cell. I have set a max-width for the cell as well as a ghost table of 200px. The width should not extend past 200px, causing the span to wrap to the second row automatically. This method works ev ...

Maintaining the active state in Bootstrap, even when manually entering a URL, is essential for smooth

Check out this fully functional plnkr example: http://plnkr.co/edit/p45udWaLov388ZB23DEA?p=preview This example includes a navigation with 2 links (routing to 2 ui-router states), and a jQuery method that ensures the active class remains on the active lin ...

Executing a Visual Basic subroutine from a jQuery dialog box

Currently, I have a form that includes a jQuery dialog creation. Within this dialog, there is a button generated from an ASP server control that should trigger a function in the code behind when clicked. However, I am encountering an issue where the functi ...

What is the process of assigning data, in JSON format, from an HTML form to a variable?

I have the coding below in my abc.html file, which converts form data to JSON format: <body> <form enctype='application/json' method="POST" name="myForm"> <p><label>Company:</label> <input name=& ...

Sending NodeJS Buffer as form data to Spring Boot in a correct way

I'm facing an issue with my NodeJS application where I am working with an image buffer called qrCode const qrCodeData = Buffer.from(body).toString('base64'); //body received, not sure if base64 is correct f ...

Ways to implement div on hover in my table's td cells

Here is the HTML table code I have: <table border='1px'> <tr> <td id='td'>first</td> <td>last</td> <tr> <td id='td'>newFirst</td> <td>newSecond</td> </t ...

Experiencing a problem with my JavaScript code in Node.js due to an asynchronous issue arising when using a timeout

My goal with this code is to retrieve JSON questions and present them to the user through the terminal. The user has 5 seconds to respond to each question before the next one appears. However, I encountered an issue where the next question times out automa ...

Layering images and headlines on top of other images

I'm attempting to place text and an image over the sublime text blank document (please visit: ) Currently, my h1 is on top of the image that I want it to be laid over. Additionally, there's another image I'd like to overlay as well. Could ...

Customized Pagination Text for DataTable

In an effort to customize the display options for jQuery DataTables, I implemented the following code snippet. It allows me to modify the default selection of showing 12, 24, 36, or 48 records per page instead of the usual preset values of 10, 25, 50, and ...

What is the purpose of defining the initialState in Redux?

As per the Redux documentation, it is considered a best practice to establish an initialState for your reducer. However, maintaining this initialState can become challenging when the state relies on data from an API response, leading to discrepancies betwe ...