Encountering a console error while trying to integrate jQuery into my website. The JavaScript file is throwing an error in the console that says:
Uncaught ReferenceError: $ is not defined catergory.js:1
Even after following the suggested steps in this answer, the issue persists.
The following JavaScript code appears to be ineffective.
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="css-js/design.css">
<link rel="stylesheet" href="css-js/fly-in-animations.css">
<link rel="stylesheet" href="css-js/design2.css">
<script src="css-js/category.js"></script>
<meta charset="utf-8">
<title>PC Tech - Products</title>
</head>
<div class="category">
<label class="pcpartstext" for="pcparts">Choose a category:</label>
<select name="pcparts" id="pcparts">
<option selected disabled>Choose One</option>
<optgroup label="Computer Hardware">
<option value="cpu">Central Processing Unit (CPU)</option>
<option value="cpucooler">CPU Cooler</option>
<option value="mobo">Motherboard</option>
<option value="ram">Random Access Memory (RAM)</option>
<option value="storage">Storage (HDDs/SSDs)</option>
<option value="gpu">Video Cards (GPU)</option>
<option value="psu">Power Supply (PSU)</option>
<option value="cases">Case/Chassis</option>
</optgroup>
<optgroup label="Computer Accessories">
<option value="monitor">Monitors</option>
<option value="keyboardmousepad">Keyboard, Mouse & Mousepads</option>
<option value="speakerandheadset">Speakers & Headsets</option>
</optgroup>
</select>
</div>
<div class="product-info">
</div>
javascript
$('#pcparts').on('change', function() {
if (this.value === 'cpu') {
$('.product-info').html('<div class="details"><p class="info">CPU product info</p><button class="purchase">Purchase</button><div>')
} else if (this.value === 'cpucooler') {
$('.product-info').html('<div class="details"><p class="info">CPU Cooler product info</p><button class="purchase">Purchase</button><div>')
}
});