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

Implement a callback function to dynamically generate variables and display them within an HTML element

Apologies in advance for any errors I may make as I am a beginner when it comes to javascript, jquery, and json. I have a script that retrieves data from a json file and displays it on a webpage using javascript, jquery, ajax (I believe), and json. When ...

Displaying a Next.js component depending on the environment setting

Having trouble displaying a maintenance message to users based on an environment value. In my .env.local file, I have the following value set: NEXT_PUBLIC_SHOW_MAINTENANCE=true This is how my page is structured: const Index = () => { const showMai ...

Updating the title with respect to the current route in AngularJS 1

Is it possible to dynamically change the title displayed in a header based on the current route provided by the router, even when outside of the controller scope? For example, I have a mainMenu controller that is loaded when a specific route is called. The ...

attempting to merge two arrays into a single union

I am looking for a way to create a new array that contains only unique values from both the first and second arrays, maintaining their original order. This is my current approach: function union(first, second) { return first.filter(function(value) { ret ...

I'm experiencing trouble with Shopify as it appears to be failing to execute

I have been attempting to incorporate a tracking pixel into my project. Thus far, I have tested the code in various environments, both with and without wrapping it in a function and deploying it using window.onload. If you would like to see the implementa ...

Switching images dynamically using Flask and JavaScript

I'm currently working on Flask and encountering a perplexing issue. I'm attempting to update an image using JavaScript, but I am getting these errors from Flask: ... 12:05:34] "GET / HTTP/1.1" 200 - ... 12:05:38] "GET /img/pictur ...

Selecting items from a list at random using the power of math.random() and math.floor()

When attempting to randomize the popping of elements in a list stored in the baby variable, only baby[1] is being popped. How can I make it pop random elements? <body> <h1 id="1">bebe</h1> <h1 id="2">t ...

"Protractor encountered an issue when navigating to the most up-to-date Angular section in our

We are in the process of upgrading our application from AngularJS to the latest version of Angular. I am currently working on writing tests that transition from the AngularJS version of the app to the admin application, which is built using the latest ver ...

Using Jquery to Parse Json data from Twitter

I am currently facing an issue where the system is producing too many results despite working properly. Any suggestions on how to resolve this? var url = "search.twitter.com/search.json?q=%23ps3&rpp=15&from=mmgn&lang=en&callback=?"; $.getJSON(url, funct ...

When examining two arrays for similarities

I am dealing with two arrays within my component arr1 = ["one", "two"] arr2 = ["one", "two"] Within my HTML, I am utilizing ngIf in the following manner *ngIf="!isEnabled && arr1 != arr2" The isEnabled condition functions as expected, however ...

The debate between using backticks and colons in TypeORM queries

Lately, I've been crafting queries utilizing backticks const firstUser = await connection .getRepository(User) .createQueryBuilder("user") .where(`user.id = '${id}'`) .getOne(); However, in the typeorm documentatio ...

Simple method to retrieve the ID of an input field within a form using jQuery selectors

I have a form with each input field having a unique id, and I have attached a jQuery 'input' event to the form. I want to retrieve the id of the field on which the user changes some value using a jQuery function. There seems to be something missi ...

A guide on smoothly navigating to the desired row in a gridview using Asp.net

Currently, I am developing a project using ASP.net and C# technology. In my application, I integrated a GridView that contains multiple rows. Within the grid, there is a text box and a search button available. The columns displayed in the grid are Id and ...

json array is only populated with the initial value

I am facing an issue with a local file that contains some JSON data. { "tournament": [{ "TeamName": "AS Roma", "TeamPlayer": "Rickard" } { "TeamName": "Inter", "TeamPlayer": "Bobban" }] }​ When I click the button, I attempt to pop ...

JavaScript drop-down menu malfunctioning

I am currently in the process of learning web development languages, and I'm attempting to create a dropdown list using JavaScript (I previously tried in CSS without success). I would greatly appreciate it if you could review my code and let me know ...

Updating the user interface in react-apollo following a delete mutation

After successfully executing a delete mutation in my React Apollo component, the UI of my app did not update as expected. Here is the code snippet for reference: const deleteRoom = async (roomId, client = apolloClient) => { const user = await getUser ...

Navigating programmatically to another page in Next.js can be easily achieved by utilizing the useRouter hook

Following a post request to an external API, my goal is to navigate back to the homepage. While I am familiar with React, this is my first experience using Next.js. Here's the snippet of code: export default function New({genres}) { const createMovie ...

Retrieving a boolean value from a function that includes an asynchronous AJAX request

In my calendar application, I am working with an array of dates: <div v-for="date in dates">{{ date }}</div> I want to apply a conditional class based on the outcome of an isWeekend() method that involves making an API call: <div v-for="d ...

Ways to incorporate conditional logic with URL query parameters in Next.JS

I'm trying to implement conditional logic based on a URL query. In this scenario, I want to greet Kátia Fantes dynamically when she visits localhost:3000/katia-fantes. Any suggestions on how to achieve this? import { useRouter } from 'next/rou ...

The function CKEDITOR.replace() is not defined

I'm currently utilizing backbone-forms and I am looking to swap out my textArea with CKEDITOR. However, when I try to implement the code, I keep encountering an error message: Uncaught TypeError: undefined is not a function (for CKEDITOR line) defin ...