JSでフォーム入力した内容がリストに追加できない

質問内容・実現したいこと

JavaScriptの独学者です。リストに新たな要素を追加するにあたり、ダイアログボックスを使った方法と、専用ページからの入力フォームを使った方法の2通りを実現するページを作ろうとしていますが、後者の結果が反映されません。どこに問題があるのかわからずに、あれこれコードを弄っているうちに、あっという間に何時間も過ぎてしまいました。大変レベルの低い質問で恐縮なのですが、どなたか下記コードの問題点をご指摘いただけますと幸いです。

index.html

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset = "utf-8">
5    <title>メイン</title>
6    <script src = "js/app.js"></script>
7   </head>
8   <body>
9    <h1 id="title">メインページ</h1>
10     <div>
11      <input type = "button" value = "login" onclick = "gate()">
12     </div>
13          <div>
14            <ul id = "custom">
15              <li>リスト3</li>
16              <li>リスト2</li>
17              <li>リスト1</li>
18            </ul>
19          </div>
20          <button type = "button" onclick = "addCustom()">ダイアログから追加</button>
21
22          <script>
23          //パスワード「kanri」でログインすると入力画面に遷移します。
24            function gate(){
25              let UserInput = prompt("パスワードを入力して下さい。");
26              if( /\W+/g.test(UserInput) ) {
27              alert("半角英数字のみを入力して下さい。");
28              }
29              else if( UserInput != null ) {
30               location.href = UserInput + ".html";
31              }
32           };
33          </script>
34   </body>
35  </html>
36

kanri.html

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset = "utf-8">
5    <title>管理者用</title>
6    <script src = "js/jquery-3.5.1.min.js"></script>
7    <script src = "js/app.js"></script>
8    <style type = "text/css">
9      h2{
10        color: green;
11      }
12    </style>
13  </head>
14  <body>
15    <h2>リスト追加フォーム</h2>
16    <section>
17      <form action = "index.html" id="form">
18        <input type = "text" name="word">
19        <input type = "submit" value="フォームから追加">
20      </form>
21    </section>
22   </body>
23</html>

app.js

JavaScript
1'use strict';
2
3function addList(){
4  let addL = window.prompt('追加項目を入力して下さい。');
5  return addL;
6};
7
8function addCustom(){
9  const li = `<li>${addList()}</li>`;
10  document.getElementById('custom').insertAdjacentHTML('afterbegin', li);
11};
12
13document.getElementById('form').onsubmit = function(){
14  const lu = document.getElementById('form').word.value;
15  const le = `<li>${lu}</li>`;
16  document.getElementById('custom').insertAdjacentHTML('afterbegin', le);
17};

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

回答2件

ベストアンサー

index.htmlとkanri.htmlはそれぞれ独立しています。
app.jsという共通の部品を使っているからスコープも共有されるなんて事はありません。
script要素で読み込まれた内容は、あくまでhtml文書の一部として動作します。
ブラウザの開発ツールを使って、エラーメッセージを確認してみましょう。

投稿2020/12/25 10:22