The program stops working after moving .js functions to a separate file

Question

I want to move my functions to a separate js file, but when I do it, they stop working. How to approach this problem? Are there some other syntaxes when you want to move the functions to a separate *.js file?

function edit_description() {
    var targetDescription = $("#description-1");
    var value = targetDescription.text();

    if (value != "") {
            value = ""
        };

    targetDescription.html(`<input class="description form-control" data-target="description-1" type="text" value=${value}>`);

    $("input:text").focus();

    $("input").blur(function (e) {
        e.preventDefault();
        var target = targetDescription.children('input').attr("data-target");
        $(`#${target}`).text($(this).val());
        var description = $(this).val();
        save_description(identification = "description-1", description);
      });
};
function save_description(identification, description){
    console.log('Saved!');

    var userInput = {"identification":identification, "description":description};
};

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  </head>

  <body>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src=/static/main.js></script>

    <div class="table-wrapper">
      <table id="table" class="table table-striped">
        <thead>
          <tr>
            <th scope="col"><span>Edit</span></th>
            <th scope="col"><span>Description</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td id = "edit-1"><a class="btn" role="button" onclick="edit_description();">Edit ></a></td>
            <td id = "description-1">Lorem</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

As you can see I put my js in a file called main.js in a static directory.

Check browser console for the error log. Also, check if your js script's path exists or not (Here I see you are using an absolute path) — samnoon, Jul 07 '22 at 13:15
Avoid using absolute paths since an app may not always live in the root of a domain, stick to relative paths. If the script is in the same folder, use `src="./main.js"` — Ruan Mendes, Jul 07 '22 at 13:58
Before you ask a question, you should have checked what file is being request in in your network tab of dev tools. That would have directed you to what file it's actually trying to download and given you a clue on what's wrong with your path. — Ruan Mendes, Jul 07 '22 at 13:59
I got different errors in this file and in the other, much similar - mostly missing functions or "functions are not objects". I tried to move the chain of these functions to js in different parts of it, @evolutionxbox — Swantewit, Jul 08 '22 at 06:13
Your solution worked, @JuanMendes. Please write is a response to this problem, so that I can give you proper thanks :) — Swantewit, Jul 08 '22 at 06:25

score 1 · Accepted Answer · answered Jul 08 '22 at 12:25

1

Avoid using absolute paths since an app may not always live in the root of a domain, stick to relative paths.

If the script is in the same folder as the HTML file, use src="./main.js"

answered Jul 08 '22 at 12:25

Ruan Mendes

90,375
31
153
217

score -2 · Answer 2 · answered Jul 07 '22 at 13:54

-2

Double Quotation ("") is missing! Try this:

<script src="/static/main.js"></script>

Or this:

<script src="~/static/main.js"></script>

answered Jul 07 '22 at 13:54

Chaudhry Hammad Wali

1

You talk about double quotes and then you add a tilde (~) which does not mean anything to a browser trying to find a file. Also quotation marks are nice but not required in this case. It's only truly required if there are spaces in your attribute (or other special characters. See https://mathiasbynens.be/notes/unquoted-attribute-values – Ruan Mendes Jul 07 '22 at 14:02
(~) is used for the root directory. there is a possibility that the html page is in another folder instead of in the root directory and folder named "static" is also in the root directory. – Chaudhry Hammad Wali Jul 07 '22 at 14:06
`~` mean the user's home directory from the command line on a UNIX machine, not on a path on an HTML page. Some web servers may give it `~` a special meaning when used in a server side context, but as a bare HTML page, it means nothing. See https://stackoverflow.com/questions/6252471/what-is-the-use-of-tilde-in-url – Ruan Mendes Jul 07 '22 at 21:20
The solutions you suggested, @ChaudhryHammadWali don't work. Take into account that stack overflow is actually quite a hard crowd and if you even give a good answer or ask a good question but do it in the wrong way, you can lose points. And your response is unthoughtful and, well, wrong. If you want to contribute to this forum, please approach it more seriously :) Just a friendly advice from someone who got his share of stack overflow's "love" already ;P – Swantewit Jul 08 '22 at 06:30
1

@Swantewit SO's a hard crowd may be true. However, I think I was polite enough and explained how this answer doesn't really understand the problem. I know you are trying to give them advice but they are posting answers that don't really make any sense so don't blame it on SO's tough crowd. – Ruan Mendes Jul 18 '22 at 17:23

The program stops working after moving .js functions to a separate file

2 Answers2