Kevin Powell - Community•13mo ago

Pass ID

Hello, I'm a beginner So, I want to pass ID in order to dynamically display item desc based on clicked card. I ask chat gpt and it gave me code below. Everything looks fine until I try to run the code manually (without live server extensions) and got all sort of error such as: "Access to script at 'file:///C:/Users/Asus/.../passID.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted." How I can fix it? Thanks in advance

<script type="module" src="passID.js"></script>

<script type="module" src="passID.js"></script>

// Get all the card elements
const cardElements = document.querySelectorAll('.animal-card');

// Add a click event listener to each card element
cardElements.forEach(card => {
    card.addEventListener('click', event => {
    // Get the ID of the clicked element
    const id = event.currentTarget.id;

    // Encode the ID for use in the URL
    const encodedSearchQuery = encodeURIComponent(id);

    // Redirect to the detail page with the encoded ID in the URL parameter
    window.location.href = `/animal-detail.html?searchQuery=${encodedSearchQuery}`;
    });
});

// Get all the card elements
const cardElements = document.querySelectorAll('.animal-card');

// Add a click event listener to each card element
cardElements.forEach(card => {
    card.addEventListener('click', event => {
    // Get the ID of the clicked element
    const id = event.currentTarget.id;

    // Encode the ID for use in the URL
    const encodedSearchQuery = encodeURIComponent(id);

    // Redirect to the detail page with the encoded ID in the URL parameter
    window.location.href = `/animal-detail.html?searchQuery=${encodedSearchQuery}`;
    });
});

12 Replies

Joao•13mo ago

ChatGPT again... Quite honestly, I think you'd much better off learning these things on your own rather than copy pasting code from strangers online (that's what ChatGPT essentially is). Even if it did work, you are not learning anything. I'm happy to help you, debugging what you wrote and only after I've heard what have you tried to fix it. Saying you copied + pasted some code from somewhere and immediately turning for help it's not going to get you very far.

Nar•13mo ago

From what I know, the error is because the website can not access my directory directly or something, therefore I need to use localhost. I'm happy to learn, but I don't know where to start and dont have time to, because my school project is quite unforgiving (deadline is near and nobody in my project team can code). To me, chat GPT is easiest way to get the project done.

Joao•13mo ago

Well, have you tried to simply paste that code inside script tags directly instead of loading it from another file? That should tell you if the code at least works

Jochem•13mo ago

ChatGPT is a terrible learning tool. If you want to pick up javascript, I'd suggest https://javascript.info or any number of courses and tutorials on youtube. You can maybe fake it for a project or two using ChatGPT but you'll never learn how to program properly without doing the work of learning it yourself. ChatGPT's code can be awful and full of bugs, bad practices, and deprecated stuff. It also makes it so you don't learn the most important part of learning to code, which is to break up problems into manageable chunks. As for this issue, either use a liveserver plugin, host it somewhere, or do what Joao suggested and put the code in a script tag inside the HTML. The error you're getting means your browser is refusing to load a file from disk. What this code actually does, is redirect you to animal-detail.html with a get param in there. You'll have to do something with that get param if you want it to display anything

The Modern JavaScript Tutorial

CodeNascher•13mo ago

if it's the only .js file, removing type="module" from the script tag should fix the CORS error when running from file:///* agreed on the chatgpt statements

13eck•13mo ago

While this is the answer, note that if you remove type="module" then the file won't be deferred so you'll have to add that attribute (defer). In addition, without type="module" the script won't be able to import or export anything. If all of your JS is in one file that's fine, but as soon as you start importing and exporting you'll need to use type="module" and a localhost for dev purposes (IE not running via the file but an actual web server).

CodeNascher•13mo ago

why did i read your message as

while (this === "answer") {
   // ...
}

while (this === "answer") {
   // ...
}

😂. yeah you're right. thanks for the additions. was trying to avoid typing that much on my phone lol

13eck•13mo ago

Because you're a True Dev™️, that's why! :p

CodeNascher•13mo ago

far from it, but thanks for the compliment (even tho tongue in cheek, i assume) e:\ now you edited it and my joke no longer applies 😦 e:\ edited my snippet to reflect your edit

13eck•13mo ago

You're as much a dev as I am, x13ladMyDude

CodeNascher•13mo ago

nah, i'd consider myself as advanced beginner. but that's very off-topic now

Nar•13mo ago

thank you so much 👍

Gaming

Programming

Pass ID