Using Javascript and JQuery to create an alert that pops up upon loading the page is not effective

I am having trouble making an alert show up when my website loads. The Javascript code is functional when directly included in the HTML, but once I move it to a separate file named script.js and link it, nothing happens. Can someone please help me identify where I am going wrong? Below is the code in question. Any assistance would be greatly valued.

$(document).ready(function() {
      alert("Welcome!);
      });
background-color:Teal;

}
h1 {
  text-align: center;
  color: Gold;
  font-family: arial;
  font-size: 25pt;
}
#p1 {
  text-align: left;
  color: white;
  font-family: arial;
  font-size: 14pt;
  margin-top: 40px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 300px;
}
#p2 {
  text-align: right;
  color: white;
  font-family: arial;
  font-size: 14pt;
  margin-top: 100px;
  margin-bottom: 20px;
  margin-left: 300px;
  margin-right: 10px;
}
#p3 {
  text-align: left;
  color: white;
  font-family: arial;
  font-size: 14pt;
  margin-top: 100px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 300px;
}
#img1 {
  float: left;
  padding-right: 15px;
  width: 200px;
}
#img2 {
  float: right;
  padding-left: 15px;
  width: 200px;
}
a:link {
  color: gold;
  background-color: transparent;
  font-family: arial;
  text-decoration: none;
}
a:visited {
  color: gold;
  background-color: transparent;
  font-family: arial;
  text-decoration: none;
}
a:hover {
  color: white;
  background-color: transparent;
  font-family: arial;
  text-decoration: underline;
}
a:active {
  color: lime;
  background-color: transparent;
  font-family: arial;
  text-decoration: underline;
}
<!DOCTYPE html>
<html>

<head>
  <title>
    "Cute Cats"
  </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <script src="script.js">
  </script>
  <h1> Cute Cats </h1>


  <p id="p1"> <img src="Tulip.jpg" alt="Cute Cat-Tulip" id="img1"> Find box a little too small and curl up with fur hanging out lick arm hair or sweet beast swat at dog, and chirp at birds that box? i can fit in that box. Spit up on light gray carpet instead of adjacent
    linoleum. Spill litter box, scratch at owner, destroy all furniture, especially couch find empty spot in cupboard and sleep all day, licks paws ptracy,intently sniff hand, or really likes hummus weigh eight pounds but take up a full-size bed. Chew
    the plant. Bleghbleghvomit my furball really tie the room together hiss and stare at nothing then run suddenly away and warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats stretch, ooh, are those your
    $250 dollar sandals?

  </p>


  <p id="p2"> <img src="Tikki.jpg" alt="Cute Cat-Tikki" id="img2"> Slap kitten brother with paw spread kitty litter all over house, i could pee on this if i had the energy purr when being pet for nya nya nyan. Touch water with paw then recoil in horror eat all the
    power cords for chill on the couch table, annoy the old grumpy cat, start a fight and then retreat to wash when i lose so scratch me there, elevator butt refuse to come home when humans are going to bed; stay out all night then yowl like i am dying
    at 4am. Eat the rubberband the cat was chasing the mouse so demand to be let outside at once, and expect owner to wait for me as i think about it yet taco cat backwards spells taco cat furrier and even more furrier hairball for groom forever, stretch
    tongue and leave it slightly out, blep stand in front of the computer screen. Red light attracts my eyes, light must die, attack!

  </p>


  <p id="p3"> <img src="Maddi.jpg" alt="Cute Cat-Maddison" id="img1"> More napping, more napping all the napping is exhausting. Fish i must find my red catnip fishy fish who's the baby pet me pet me don't pet me scratch need to chase tail, but intently stare at the
    same spot, or i like frogs and 0 gravity. Meow to be let out thinking longingly about tuna brine or catasstrophe scratch, yet stare at wall turn and meow stare at wall some more meow again continue staring take a big fluffing crap cough hairball on
    conveniently placed pants. Lounge in doorway hiding behind the couch until lured out by a feathery toy. Sit on human give attitude, or meow go back to sleep owner brings food and water tries to pet on head, so scratch get sprayed by water because
    bad cat or lick butt. Stare at ceiling.

  </p>

</body>

Any feedback or guidance you can offer would be highly appreciated.

Answer №1

You had an oversight with the ending double quotes in your alert message. I have corrected it for you below.

Note: Including jQuery twice is unnecessary, so please remove one instance. (If you added jQuery twice because the snippet prompted you to do so, you can ignore that request if jQuery is already included elsewhere).

$(document).ready(function() {
  alert("Welcome!");
});
background-color: Teal;
}
h1 {
  text-align: center;
  color: Gold;
  font-family: arial;
  font-size: 25pt;
}
#p1 {
  text-align: left;
  color: white;
  font-family: arial;
  font-size: 14pt;
  margin-top: 40px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 300px;
}
#p2 {
  text-align: right;
  color: white;
  font-family: arial;
  font-size: 14pt;
  margin-top: 100px;
  margin-bottom: 20px;
  margin-left: 300px;
  margin-right: 10px;
}
#p3 {
  text-align: left;
  color: white;
  font-family: arial;
  font-size: 14pt;
  margin-top: 100px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 300px;
}
#img1 {
  float: left;
  padding-right: 15px;
  width: 200px;
}
#img2 {
  float: right;
  padding-left: 15px;
  width: 200px;
}
a:link {
  color: gold;
  background-color: transparent;
  font-family: arial;
  text-decoration: none;
}
a:visited {
  color: gold;
  background-color: transparent;
  font-family: arial;
  text-decoration: none;
}
a:hover {
  color: white;
  background-color: transparent;
  font-family: arial;
  text-decoration: underline;
}
a:active {
  color: lime;
  background-color: transparent;
  font-family: arial;
  text-decoration: underline;
}
<!DOCTYPE html>
<html>

<head>
  <title>
    "Cute Cats"
  </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <script src="script.js">
  </script>
  <h1> Cute Cats </h1>


  <p id="p1"> <img src="Tulip.jpg" alt="Cute Cat-Tulip" id="img1"> Find box a little too small and curl up with fur hanging out lick arm hair or sweet beast swat at dog, and chirp at birds that box? i can fit in that box. Spit up on light gray carpet instead of adjacent
    linoleum. Spill litter box, scratch at owner, destroy all furniture, especially couch find empty spot in cupboard and sleep all day, licks paws ptracy,intently sniff hand, or really likes hummus weigh eight pounds but take up a full-size bed. Chew
    the plant. Bleghbleghvomit my furball really tie the room together hiss and stare at nothing then run suddenly away and warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats stretch, ooh, are those your
    $250 dollar sandals?

  </p>


  <p id="p2"> <img src="Tikki.jpg" alt="Cute Cat-Tikki" id="img2"> Slap kitten brother with paw spread kitty litter all over house, i could pee on this if i had the energy purr when being pet for nya nya nyan. Touch water with paw then recoil in horror eat all the
    power cords for chill on the couch table, annoy the old grumpy cat, start a fight and then retreat to wash when i lose so scratch me there, elevator butt refuse to come home when humans are going to bed; stay out all night then yowl like i am dying
    at 4am. Eat the rubberband the cat was chasing the mouse so demand to be let outside at once, and expect owner to wait for me as i think about it yet taco cat backwards spells taco cat furrier and even more furrier hairball for groom forever, stretch
    tongue and leave it slightly out, blep stand in front of the computer screen. Red light attracts my eyes, light must die, attack!

  </p>


  <p id="p3"> <img src="Maddi.jpg" alt="Cute Cat-Maddison" id="img1"> More napping, more napping all the napping is exhausting. Fish i must find my red catnip fishy fish who's the baby pet me pet me don't pet me scratch need to chase tail, but intently stare at the
    same spot, or i like frogs and 0 gravity. Meow to be let out thinking longingly about tuna brine or catasstrophe scratch, yet stare at wall turn and meow stare at wall some more meow again continue staring take a big fluffing crap cough hairball on
    conveniently placed pants. Lounge in doorway hiding behind the couch until lured out by a feathery toy. Sit on human give attitude, or meow go back to sleep owner brings food and water tries to pet on head, so scratch get sprayed by water because
    bad cat or lick butt. Stare at ceiling.

  </p>

</body>

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

The endpoint for 'create_chat' with given parameters '()' was not located. Only one pattern was attempted: 'create_chat/(?P<id>[0-9]+)/$'

Hello everyone, I am currently working on developing a chat application using Django Version 3.8.1. I have encountered an error that is causing some issues for me. The specific task at hand is to create a view for private chat with a friend. views.py def ...

Express bodyParser may encounter difficulties in parsing data sent from Internet Explorer

After creating a server app with Node and Express 4, I utilized jQuery for the front-end. An Ajax call was set up to send data via POST to the server: $.ajax({ cache: false, type: 'POST', url: Config.API_ENDPOINT_REGISTRATION, ...

Experiencing a hiccup in React while attempting to play an mp3 file

My project includes the following code snippet, with an example mp3 file and npm package: https://www.npmjs.com/package/react-sound import React from 'react'; import Sound from 'react-sound'; class CustomSound extends React.Component ...

Node.js method convention - invoking self-defined functions

Consider a scenario where a Node module contains two functions, func1() and func2(). It is necessary for func1 to make a call to func2 during its execution. In order to test func2 independently, I have included both func1 and func2 in the exports by setti ...

The JQuery(document).ready function does not seem to be executing on the webpage, but it works as expected when placed in a

I have encountered a peculiar problem. It's strange to me because I can't figure out the root cause of it, despite trying everything in the Chrome Developer Tools debugger. Here is a snippet of code that works when I run it from a file on my desk ...

Next js is repeatedly calling a Firestore document in multiple instances during the fetching process

In my Next js 13 project, I am facing an issue while fetching a single document with an id from Firebase. Instead of returning just one read (which is expected since I'm fetching a single doc), it is returning multiple reads, sometimes ranging from 2 ...

What is the best way to showcase this information within my columns?

I'm facing an issue with VueJS. I have a large dataset that I want to display in columns in a specific order. How can I properly insert the code for this? Thank you for any assistance. [ { "sort": 0, "title": "My title", "description": ...

Utilizing base64_encode versus json_encode to pass encoded data through a hidden input

I am currently working on a project where users will be able to create live blocks using Ajax. I have encoded the block's elements map inside a hidden input's value and plan to decode it within the php file. My main question is this: I am utiliz ...

Customize the underline color of Material-UI's Input component

Trying to create an input component with a white underline. However, the underline color changes to black when hovering over it. It should remain white. Override the underline class as shown in the demo and instructions below. Despite trying to implement t ...

Combining three input files in a single form and securely storing them in the database

After trying several solutions on Stack Overflow, I haven't found any that helped me or addressed the issue at hand. I have a form with three input fields, and while I know I can use the 'multiple' attribute on one field, I specifically nee ...

Ways to ensure that JavaScript code is executed after making AJAX requests

Greetings! I must admit, I am still in the early stages of learning AJAX and dynamic web technologies. My current dilemma bears resemblance to a discussion thread I came across, but it seems to involve a framework, which I am not utilizing. Possibly relat ...

Error in defining class variable within the constructor not found

Just started delving into CoffeeScript and facing a challenge. In my code snippet below, I initialize WebSocketServer with a number as the first argument and a function as the second argument. However, when the websocket receives a message, @msgHandler sud ...

Converting "require" to ES6 "import/export" syntax for Node modules

Looking to utilize the pokedex-promise for a pokemonapi, however, the documentation only provides examples on how to require it in vanilla JavaScript: npm install pokedex-promise-v2 --save var Pokedex = require('pokedex-promise-v2'); var P = new ...

I could not view the jquery ui icon, but the text within the span appeared on the screen

I'm facing an issue where the jQuery UI icon is not visible, but the text within the span tag is being displayed. I tried using Firebug to troubleshoot, but I couldn't see the CSS code when inspecting the span tag. <TITLE> Test </TITLE ...

Generate a random number using the Math.random() method in Node.js/JavaScript to access a folder on the local machine

I am facing a challenge in reading a JSON file located deep within multiple folders on my local machine. The issue arises because the folder name where the file is stored changes every time, as it is generated using the Math.random() method with the prefix ...

The error thrown states: "TypeError: Unable to access the property 'getFieldDecorator' of undefined in a React component."

Encountering this error: > TypeError: Cannot read property 'getFieldDecorator' of undefined > _class.render src/containers/RegisterTenant/register.js:81 78 | this.setState({ 'selectedFiles': files }); 79 | } 80 | > ...

The jQuery event binding feature functions properly with simple text links, but does not work when used with links

Having some trouble with my jQuery code. <script type="text/javascript> jQuery.noConflict(); jQuery(document).ready(function(){ jQuery('a.connect').bind("click", function(event) { var st ...

Tips for integrating a logo into router view animations

How can I incorporate a logo into the white fade-in screen that appears when navigating between subpages using <router-view> within App.vue? Here is a simplified version of my App.vue code: <template> <div id="app"> <div ...

Unusual characteristics of decision-making

Here is a snippet of my JavaScript code: function getSelectedText(){ if(window.getSelection){ select = window.getSelection().getRangeAt(0); var st_span = select.startContainer.parentNode.getAttribute("id").split("_") ...

Is the custom attribute event being triggered too soon?

My Unique Component Creation Journey I have meticulously crafted a custom component to enhance the navigation of my application. The core structure consists of an ul element, with each li item dynamically generated based on the contents of the router&apo ...