0

This is my template

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
    <title>My Awesome App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="stylesheet" type="text/css" href="/{{style}}.css" />
    <script src="/views/layouts/client.js"></script>  
    <script src="/server.js"></script>  
  </head>
  <body>
    
    
    {{> header}}
    
    {{{body}}}
    
    {{> footer}}
    
    
  </body>
  
</html>

I link the file in the head and then I call the function here

<input
            id="months"
            type="number"
            min="1"
            max="300"
            value="1"
            step="1"
            onchange="computeLoan()"
          />

Finnaly here is my js function



function computeLoan(){
    const amount = document.querySelector('#amount').value;
    const interest_rate = document.querySelector('#interest_rate').value;
    const months = document.querySelector('#months').value;
    const interest = (amount * (interest_rate * 0.01)) / months;
    let payment = ((amount / months) + interest).toFixed(2); 
    payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.querySelector('#payment').innerHTML = `Monthly Payment = ${payment}`
}

and here is the dev tool error

Failed to load resource: the server responded with a status of 404 ()


Refused to execute script from 'https://bpa-2022-2023.glitch.me/client.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

however, it never works I have tried console logs, those don't show up, I have also tried putting the function in my server.js thinking it might be able to run in there, no use I have even tried placing the script tags in different spots on page no luck. Nothing I have googled has worked.

Titan1315
  • 29
  • 4

1 Answers1

0

You should serve the client.js file. Creat a directory called public and put the client.js file in it, then use the static middleware on your express app:

app.use(express.static(path.join(__dirname, "public")); // or in your case "views/layouts"

But it's never a good idea to put your static js files in the views folder because of separation of concerns.

The reason you get that error message is because the client does not have access to that file. After you created a public folder and served that don't forget to change your script tag to <script src="/client.js"></script>

Laurent Dhont
  • 1,012
  • 1
  • 9
  • 22
  • So I moved the file to the public directory and moved the script tag to the bottom of the body. I have also done the dirname public – Titan1315 Nov 22 '22 at 20:33
  • and I still get the error 4:216 Uncaught ReferenceError: computeLoan is not defined at HTMLInputElement.onchange (4:216:13) – Titan1315 Nov 22 '22 at 20:33
  • @Titan1315 Sorry, I did not see that you put it inline on the input element. Please put the script tag back in the header and it should be solved. I will edit my answer. – Laurent Dhont Nov 22 '22 at 20:35
  • still doesnt work same error 4:197 Uncaught ReferenceError: computeLoan is not defined at HTMLInputElement.onchange (4:197:13) – Titan1315 Nov 22 '22 at 20:47