javascriptのFailed to load resource: the server responded with a status of 404 (NOT FOUND)index.js:1

前提・実現したいこと

pythonで財務諸表を自動で分析できるようなシステムを作っています。

javascript(js)初心者です。jsでリロードしても入力した数字が消えないようにする機能を作りたいです。

発生している問題・エラーメッセージ

簡単な文字をコンソールに表示したいのですが、以下のエラーが発生します。
Failed to load resource: the server responded with a status of 404 (NOT FOUND)index.js:1
Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALIDfavicon.ico:1
Unchecked runtime.lastError: The message port closed before a response was received
Error handling response: TypeError: Cannot read properties of undefined (reading 'data')

該当のソースコード

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4   <meta charset="UTF-8">
5   <title></title>
6   <link rel="stylesheet" type="text/css" href="static/design.css">
7   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
8 </head>
9 <body>
10    <nav class="navbar navbar-light bg-light">
11        <div class="container-fluid">
12          <a class="navbar-brand" href="/">Value Searcher</a>
13          <form class="d-flex" action="/howto" method="GET">
14          <a type="button" class="btn btn-primary" href="/howto">使い方</a>
15          </form>
16          <form class="d-flex" action="/login" method="GET">
17            <a type="button" class="btn btn-primary" href="/login">ログイン</a>
18          </form>
19          <form class="d-flex" method="POST">
20            <input class="form-control me-2" type="search" placeholder="ソニー,2143" aria-label="Search" name=num >
21            <button class="btn btn-outline-success" type="submit">Search</button>
22            
23          </form>
24        </div>
25      </nav>  
26 <ul id="1" class="inner-table">損益計算書</ul>
27       
28
29    <form action="/roughprofit" method="POST">
30          <label for="">売上高</label>
31          <input id="java" class="main" type="number" name="sales" placeholder="千万円">
32          <label for="">売上総利益（粗利益）</label>
33          <input class="main" type="number" name="roughprofit" placeholder="千万円">
34          <input type="submit" value="計算">
35          <ul>粗利益率(小数点第一位％表示)</ul>{{ result }}{{originaldata1}}{{originaldata2}}
36        </form>
37以下同じ
38<script src="index.js"></script>
39 </body>
40 
41</html>

javascript
1console.log('hello');

試したこと

以下の記事を参考にしました。

https://techacademy.jp/magazine/26836
https://qiita.com/peco4107/items/6c8fba1a13c54a5447a7

補足情報（FW/ツールのバージョンなど）

ファイルとディレクトリの配置

text
1_pycache_
2|-app.cpython-39.pyc
3images
4|-2.png
5static
6|-design.css
7 |-js
8  |-index.js
9templates
10|-howto.html
11|-index.html
12|-searched.html
13|-table.html
14|-Registar.html
15|-login.html

app.py
search.db
クレスコ財務データ（自動保存済み）.csv

FW:flask
言語:Python3.9.7
pandasダウンロード済み

m.ts10806

2022/01/04 22:55

>ファイルとディレクトリの配置もしかしたらスペースを入れてるのかもしれませんが、行頭のスペースは詰められるので、マークダウンのcodeで対応してください。

m.ts10806

2022/01/04 22:56

あと ```[] ``` []に入れるのは「言語名」であって「ファイル名」ではないので、言語名を入れて、中にはコード以外の情報は含まないようにしてください。（コピペで確認するときに邪魔になります）

jaogjig

2022/01/05 07:26

htmlはどのファイルかわからなくなってしまうと思ったのでやっていました。 m.ts10806さんの発言の方が正しいと思い修正しました。こちらで見やすくなっているでしょうか

jaogjig

2022/01/05 07:30

ファイルとディレクトリの配置修正しました。

行動規範の内容に同意します

回答1件

ベストアンサー

※FlaskはおろかPythonもほとんど分かりませんが、調べた感じで回答します。

static/js 配下にある状態でsrc="index.js"で参照できないことはおおよそ分かります。(今参照しているURLと同列にはないはずだから)
url_for()を利用したうえで参照するのが良さそうですよ。
Flaskのテンプレートでurl_forを用いてリンク作成、画像表示を行う。
【Python】【Flask】外部CSSファイルやJavaScriptを読み込む

ちなみに参照された記事ですが、
1つ目の記事は本件とはあまり関係なさそうですし（Cannot read properties of undefined ではなくCannot read property ‘プロパティ名’ of undefinedの解説。ちょっと違う）、
2つ目はRuby On RailsでURLを生成するやり方としてはフレームワークの機能を利用していない
ので微妙です。

投稿2022/01/04 20:36

編集2022/01/04 20:37

m.ts10806

総合スコア80850

jaogjig

2022/01/05 07:30 編集

回答ありがとうございます。実際に参考記事を実践したところできました。ありがとうございます。次のエラーの（Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALIDfavicon.ico:1）は治っていませんが、こちらのエラーは気にしなくていいのでしょうか