I'm having trouble getting my jQuery to connect with my HTML, no matter what I do

UPDATE: Thank you everyone, I finally figured out that it was the API causing the issue. Even though I downloaded the files to avoid server requests, I will switch to using https instead.

I have a couple of questions.

  1. Why isn't my code functioning properly? I am attempting to create a splash screen that starts off green and transitions to a red background when clicked.

  2. Can someone explain what this

    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    is used for exactly? I understand that it links to jQuery code, but I need more specifics.

Here is my HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type='text/javascript' src='anim.js'></script>
        <title></title>
    </head>
    <body>
        <div id="splash">
       </div>
    </body>
</html>

My CSS Styles:

#splash {

z-index: 100;
position: absolute;
background-color: #82a43a;
top: 0; 
right: 0; 
left: 0; 
bottom: 0;

}

body {

    background-color: red;

}

The jQuery Script:

$("#splash").click(function() {

$(this).fadeOut();

});

Answer №1

It's likely that you're currently hosting this website on your local filesystem rather than a server. When using links that start with //, they are considered protocol relative, attempting to locate the jQuery file at

file://code.jquery.com/jquery-1.9.1.min.js
, which isn't a valid location.

To resolve this issue, simply replace that line of code with:

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

Answer №2

In the realm of coding, our mother tongue is javascript, the language we use to craft functions. However, jquery steps in as a trusty sidekick - a library born from javascript. If we wish to employ jquery's powers, we must adhere to integrating this library into our page so that the DOM can comprehend and utilize its functions.

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

But alas, even with this library in place, your functions may fail to function properly. This is due to the necessity of including the protocol http:// when calling libraries from a live server while using the library locally. Thus, your script tag should be written like so:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Answer №3

If you want to load JQuery from the web, you can insert the link to the JQuery JS file like this:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

View a demo here showcasing its functionality using an external JQuery resource.

Answer №4

For optimal functionality, remember to include your script within a document ready block:

 $(document).ready(function(){
    $("#splash").click(function() {
     $(this).fadeOut();
    });
  });

To ensure the click event works as intended, add some text or element inside the #splash div to trigger the click event properly.

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

Ways to add AJAX information to select2

I am currently utilizing a select2 dropdown feature and I am attempting to configure it in such a way that it dynamically displays the leads based on the JSON response. As you can observe in the image provided below, the text correctly yields a JSON array ...

Handling asynchronous behavior in the context of conditional statements can be a challenging aspect of

Currently, this code section is passing undefined to if(customerWaiting >0). It's an async issue that I'm struggling to resolve. Despite my efforts and research on other threads, I can't seem to make this basic newbie question work. I&a ...

Having issues with AJAX and .change() function not functioning correctly?

I am working on two drop-down menus. The first menu displays the provinces in the country, and when a province is selected, the second menu should show the districts within that province. The following code is for displaying the provinces: $(document).re ...

React splits the page and interrupts the scroll event listener

For some reason, my webpage has been split by the React.js library. When attempting to scroll down while hovering over the top navigation menu, scrolling becomes impossible. However, scrolling works fine when done on any other part of the screen. I' ...

Troubleshooting problems with forms using Bootstrap and HTML

I could use some assistance with a problem I'm facing while trying to acquire new skills through learning. I would like my picture and forms to resemble the one in this image: enter image description here index.html <div class="jumbotron"> &l ...

Tips for using jQuery to create a delete functionality with a select element

I'm relatively new to utilizing jquery. I decided to tackle this project for enjoyment: http://jsbin.com/pevateli/2/ My goal is to allow users to input items, add them to a list, and then have the option to select and delete them by clicking on the t ...

RStudio Connect now automatically inserts CSS code into cells when updating

My current project involves creating an app for holiday requests. The main page of the app is displayed like this: https://i.sstatic.net/z2qma.png At the bottom right corner, you'll notice a column labeled "Accepted?" which displays either "OK" or " ...

Placing a function within an array raises the question: why is the array's value represented as an integer?

There's something puzzling happening in my code. I've placed a setTimeout function inside an array, but when I check the contents of the array using console.log(arr), it only shows an integer value. How is this possible? See the code snippet belo ...

Generating dynamic links in HTML

I've been stuck on this problem for a while now. What I'm trying to do is create a Django website that pulls in Twitch livestreams and displays them on different pages. It's a project I'm working on to learn how to use APIs in web appli ...

How to align a Bootstrap form to the center

Struggling to center the opt-in form on my website, I've created a "center" class with margin properties but it's not working as expected. .center { margin-left: auto; margin-right: auto; width: 100% } I suspect that one of Bootstrap's cla ...

I am experiencing issues with CSS functionality in my Ruby on Rails application

Currently, I am in the process of creating a blog based on Mackenzie Child's 12 in 12 RoR tutorials. I diligently followed all the steps in the tutorial and adhered strictly to his code. However, I encountered an issue with the CSS stylesheets not be ...

Showing information from page's table using find_element_by_xpath (Selenium with Python)

I am currently exploring the implementation of the find_element_by_xpath() method to locate table elements on a webpage and present them in either a display or print format. Below is an excerpt from the page content: <tbody id="listContainer_databody" ...

Aligning content with CSS styling

I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed parag ...

Leveraging AJAX in Ruby on Rails

In my controller, I have a function that looks like this: def showRecipeIngredients ingredients = RecipeIngredient.where( "recipe_id = ?", params[:id]).all @html = "" ingredients.each do |i| @html = @html + "<p>#{Food.find_by_ndb ...

What is the process for adding or modifying attributes in child elements?

I have been experimenting with a simple script that adds the target="_blank" attribute to all the <a> elements. $(function(){ $('a').attr('target', '_blank'); }); While it is functioning perfectly, I am now interested ...

Attempting to fill a collection of JSON entities through a GET call?

When handling a GET request that contains a list of JSON objects, I want to display the data in an input field on the screen using ng-model for data binding. The structure of the JSON get request is as follows: [{"make":"Mahindra","vin":"1987","model":"XU ...

Optimal Method for altering Material UI Icon's height

Placing two icons from Material UI Icons side by side in a row reveals that although their heights are both set to 24px, the actual height of the paths within each icon differs - one being 18px and the other being 22px. This inconsistency in height is not ...

Various behaviors in multiple instances of DatePicker

Currently, I have a form with two datePicker elements (using jQuery UI). When I hover over a date in the first datePicker, an AJAX call is made successfully. However, the issue is that the AJAX call is triggered for both datePickers when I only want it to ...

Guide to creating a simple multi-column index linking each item to a specific page reference

Here's an idea I have in mind: Alan 12 | Byron 104 Alfred 54 | Charles 33 Ann 28 | Cleopatra 7 Basil 133 | Corey 199 ...