JavaScript code not showing up on website

Question

~~Getting an error in the console when viewing my website, trying to addjQuery into it but the console is spitting out an error in the javascript file.~~

Uncaught ReferenceError: $ is not defined catergory.js:1

I have looked at this answer (given below) and followed its guidance, but it hasn't solved the problem.

The JavaScript code listed below seems not to work.

<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>')
  }
});

in the snippet your code is working, what browser are you using? — Ramon de Vries, Jun 18 '20 at 13:47
It seems to work right? If I select CPU Cooler I see CPU Cooler product info, same for the CPU option. — Olaf, Jun 18 '20 at 13:47
i edit your code with snippet for prove what users comment said. — Simone Rossaini, Jun 18 '20 at 13:49
Works fine for both declared options. Just declare additional options as you like, to you javascript function. — Giliam, Jun 18 '20 at 13:50
I'm using Adobe Dreamweaver to code my website and using Google Chrome, the snippet works yes, but on the actual site its not working at all. — KuntaKinte, Jun 18 '20 at 13:51
@SimoneRossaini Why would you want to edit the question to include the superfluous, unnecessary text? How does "I have made a topic about this but I still need help" and "Thanks" help? — j08691, Jun 18 '20 at 13:52
@ScottMarcus The errors in console I'm getting is this: Uncaught ReferenceError: $ is not defined at category.js:1 — KuntaKinte, Jun 18 '20 at 13:54
That means that you don't have JQuery properly referenced, which is a completely different issue than what this question is asking about. You should edit the question with a more appropriate title and then change the body of the question to ask about how to properly reference JQuery. — Scott Marcus, Jun 18 '20 at 13:57
https://stackoverflow.com/questions/22268881/referenceerror-is-not-defined/22268906 — Scott Marcus, Jun 18 '20 at 13:58
@ScottMarcus Followed what the thread said, still same error... — KuntaKinte, Jun 18 '20 at 14:06
Then there is yet a different problem. It could be that your server doesn't allow this. It could be the URL you are using to get JQuery from, but it's not what the current question asks about. — Scott Marcus, Jun 18 '20 at 14:07
@ScottMarcus There you go, I edited it, hope your happy now.. — KuntaKinte, Jun 18 '20 at 14:12
It's not about me being happy, It's about you getting the answer you need. — Scott Marcus, Jun 18 '20 at 14:19
I understand where you are coming from, but this website is for people to get help, I tried everything now and I am still getting the same error, I don't know any other steps to fix this since I am new to coding. I'm really desperate for a fix since I want to finish this project off.. — KuntaKinte, Jun 18 '20 at 14:22
I'm not sure what your complaint is. By changing your question to what the actual problem is, you are more likely to get helpful answers. I've been a member of this site for over 9 years and you've been here for 4 months. Maybe trust those who have more experience with the site than you? — Scott Marcus, Jun 18 '20 at 14:35
And, have you made sure that you've referenced JQuery before you referenced `category.js`? Perhaps edit the question and show us the HTML so we can see how and where all your references are? — Scott Marcus, Jun 18 '20 at 14:36
Yes I have referenced JQuery before category.js, I'll edit the post and add my html code. — KuntaKinte, Jun 18 '20 at 14:50
Also, I am no longer getting the reference error in console, the problem is now the code isn't working. — KuntaKinte, Jun 18 '20 at 14:56
@j08691 Actually I had edited a snippet of its code, so as to show them that it is working. — Simone Rossaini, Jun 19 '20 at 06:02
@SimoneRossaini And in the process restored all the unnecessary text that was edited out. — j08691, Jun 19 '20 at 13:33

score 0 · Answer 1 · answered Jun 18 '20 at 13:51

You need to add more options for every selection.

$('#pcparts').on('change', function() {
  if (this.value === 'cpu') {
    $('.prodct-info').html('<div class="details"><p class="info">CPU product info</p><button class="purchase">Purchase</button><div>')
  } else if (this.value === 'cpucooler') {
    $('.prodct-info').html('<div class="details"><p class="info">CPU Cooler product info</p><button class="purchase">Purchase</button><div>')
  }
else if (this.value === 'mobo') {
    $('.prodct-info').html('<div class="details"><p class="info">CPU product info</p><button class="purchase">Purchase mobo</button><div>')
  }
//add more if else
});

This is correct to get the full implementation, but the provided code does work for what's been accounted for. This should be a comment. — Scott Marcus, Jun 18 '20 at 13:51

JavaScript code not showing up on website

1 Answers1