イベントハンドラーを割り当てようとしたときの不正なパス/boomboom/v2/index.htmlエラーメッセージ

レイチェルオカシオ

私はCodepenのJavascriptで、フォーム入力を受け取り、それを順序付けられていないリストに追加するイベントハンドラーを作成しています。テストしようとすると、「badpath / boomboom / v2 / index.html」エラーメッセージが表示されます。このエラーが私のコードの結果なのか、Codepenの問題なのかわかりません。誰かがこれを修正する方法を教えてもらえますか?

このエラーが何を意味するのかわからないので、何を試すべきかわかりません。

HTMLは次のとおりです。

<div class="card">
<div class="card-body">
    <h3 class="card-title">Today's To Do List</h3>
    <form id="todo-form">Week 5: To Do List
        <div class="form-group">
            <input type="text" class="form-control" id="todo-Week 5: To Do Listinput" placeholder="What else do you need to do?">
        </div>
        <div class="form-group">
            <input type="submit" id="todo-btn" class="btn btn-secondary btn-block" value="Add Item To List">
        </div>
    </form>
</div>
<ul class="list-group list-group-flush" id="todo-ul">
    <li class="list-group-item">Pick up groceries
            <i class="fas fa-trash-alt"></i>
    </li>
    <li class="list-group-item">Finish essay
        <i class="fas fa-trash-alt"></i>
    </li>
    <li class="list-group-item">Soccer @ 5:00

        <i class="fas fa-trash-alt"></i>
</ul>

CSSは次のとおりです。

        body
    {
        background-color: #34495e;
        font-family: 'Lato', sans-serif;
    }

    button {
        margin: 0 auto;
        float: right;
    }

    .centered {
        margin: 0 auto;
        width: 80%
    }

    .card {
        margin: 50px auto;
        width: 18rem;
    }
    i{
        float:right;
        padding-top:5px
    }

これがJavascriptです:

    (function(){
  //add event handler to form button
  formButton = document.querySelector("#todo-btn");
  formButton.onclick = addNewTodo;

  function addNewTodo() {

  //get value of form field
  newTask = document.getElementById("todo-Week 5: To Do Listinput").value;
  //console.log(newTask);
  //create new ul list item element
  const newItem = document.createElement('li');
  const newItemContent = document.createTextNode(newTask);

  //add new li element item to ul
  newItem.appendChild(newItemContent);
  document.getElementById("todo-ul").appendChild(newItem);
  }


})();

コードは、https://codepen.io/raquelocasio/pen/XwwKLZのペンでも表示できます。

フォームフィールドにテキストを入力してボタンをクリックすると、エラーが表示されます。

期待される出力は、フォームフィールドに入力されたテキストを新しいリストアイテムとして追加できることです。ヘルプやポインタをいただければ幸いです。

カメックス

<form>Codepenでタグを使用したときに、同様の問題が発生しました。<form>タグをタグに切り替えた<div>ところ、エラーはなくなりました。

これを試すことができますか?

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

パッケージをインポートしようとしたときのエラーメッセージ

分類Dev

メッセージのバックを送信しようとしたときにチームボットは、不正なエラーがスローされます

分類Dev

FailedToParseMongoDbでレプリカセットをセットアップしようとしたときの不正な数字\ "\"エラーメッセージ

分類Dev

メモリ不足(908066816が割り当てられました)(805306376バイトを割り当てようとしました)PHPエラーメッセージ

分類Dev

HTML形式のカスタムエラーメッセージ

分類Dev

FacebookAPIを使用しようとしたときのエラーメッセージ

分類Dev

Sassをインストールしようとしたときのターミナルエラーメッセージ

分類Dev

matplotlibをインストールできません。エラーメッセージに「ModuleNotFoundError」と表示されます。「html.parser」という名前のモジュールがありません。「html」はパッケージではありません

分類Dev

パッケージをインストールしようとしたときのSetuptoolsエラー

分類Dev

405メッセージ送信APIエンドポイントを使用しようとしたときにエラーが発生しました

分類Dev

MySQLエラーメッセージとPHPエラーメッセージ

分類Dev

HTMLメッセージを表示するときのAndroidWebviewエラー

分類Dev

PlayでMockitoテストを実行しようとしたときのエラーメッセージ

分類Dev

AndroidStudioのエラーメッセージ

分類Dev

Windowsのエラーメッセージ

分類Dev

エラー メッセージを送信

分類Dev

html形式のエラーメッセージ/ヒントの適切な場所

分類Dev

ログイン時のエラーメッセージ(HTMLおよびphp)

分類Dev

RestAPIビューを実装しようとしたときの「クライアントエラー」メッセージ

分類Dev

コンパイラエラーメッセージ:アップロードされた画像をテーブルに表示しようとするとCS1061

分類Dev

Python 3のアップグレード:アンインストール/再インストール3.6-3.7 — Django 2.1をインストールできなくなりました:エラーメッセージ:[Djangoという名前のモジュールがありません]

分類Dev

(未定義のインデックス: ドライバー) Laravel アプリケーションでデータベース クエリを実行しようとすると、なぜこのエラー メッセージが表示されるのですか?

分類Dev

ボタンテキストのHTMLエラーメッセージ

分類Dev

Spring MVCエラーメッセージ

分類Dev

Resteasy MessageBodyReaderエラーメッセージ

分類Dev

Oracleエラーメッセージ

分類Dev

pip installpyzmailエラーメッセージ

分類Dev

ESLINTエラーメッセージ

分類Dev

エラーメッセージNSData

Related 関連記事

  1. 1

    パッケージをインポートしようとしたときのエラーメッセージ

  2. 2

    メッセージのバックを送信しようとしたときにチームボットは、不正なエラーがスローされます

  3. 3

    FailedToParseMongoDbでレプリカセットをセットアップしようとしたときの不正な数字\ "\"エラーメッセージ

  4. 4

    メモリ不足(908066816が割り当てられました)(805306376バイトを割り当てようとしました)PHPエラーメッセージ

  5. 5

    HTML形式のカスタムエラーメッセージ

  6. 6

    FacebookAPIを使用しようとしたときのエラーメッセージ

  7. 7

    Sassをインストールしようとしたときのターミナルエラーメッセージ

  8. 8

    matplotlibをインストールできません。エラーメッセージに「ModuleNotFoundError」と表示されます。「html.parser」という名前のモジュールがありません。「html」はパッケージではありません

  9. 9

    パッケージをインストールしようとしたときのSetuptoolsエラー

  10. 10

    405メッセージ送信APIエンドポイントを使用しようとしたときにエラーが発生しました

  11. 11

    MySQLエラーメッセージとPHPエラーメッセージ

  12. 12

    HTMLメッセージを表示するときのAndroidWebviewエラー

  13. 13

    PlayでMockitoテストを実行しようとしたときのエラーメッセージ

  14. 14

    AndroidStudioのエラーメッセージ

  15. 15

    Windowsのエラーメッセージ

  16. 16

    エラー メッセージを送信

  17. 17

    html形式のエラーメッセージ/ヒントの適切な場所

  18. 18

    ログイン時のエラーメッセージ(HTMLおよびphp)

  19. 19

    RestAPIビューを実装しようとしたときの「クライアントエラー」メッセージ

  20. 20

    コンパイラエラーメッセージ:アップロードされた画像をテーブルに表示しようとするとCS1061

  21. 21

    Python 3のアップグレード:アンインストール/再インストール3.6-3.7 — Django 2.1をインストールできなくなりました:エラーメッセージ:[Djangoという名前のモジュールがありません]

  22. 22

    (未定義のインデックス: ドライバー) Laravel アプリケーションでデータベース クエリを実行しようとすると、なぜこのエラー メッセージが表示されるのですか?

  23. 23

    ボタンテキストのHTMLエラーメッセージ

  24. 24

    Spring MVCエラーメッセージ

  25. 25

    Resteasy MessageBodyReaderエラーメッセージ

  26. 26

    Oracleエラーメッセージ

  27. 27

    pip installpyzmailエラーメッセージ

  28. 28

    ESLINTエラーメッセージ

  29. 29

    エラーメッセージNSData

ホットタグ

アーカイブ