web-dev-qa-db-ja.com

イベントハンドラーを割り当てようとすると、パス/boomboom/v2/index.htmlが正しくないというエラーメッセージ

フォーム入力を受け取り、順序付けされていないリストに追加する、CodepenのJavaScriptでイベントハンドラーを書いています。テストしようとすると、「不正なパス/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 でも私のペンで表示できます

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

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

javascriptcodepen
5
Raquel Ocasio

このエラー（間違いなく混乱する-または楽しい名前が付けられている）は、<form>はサンドボックスで送信されます。 CodePen自体はWebアプリケーションです（Rails信じています）で構築されており、フォームを使用しています。これらはすべて機能しますが、おそらくそれらにはある程度の範囲があり、多くのユーザーがフォームをサーバーに送信することはできません。

次にエラーの例を示します。 https://codepen.io/sheriffderek/pen/VwLQjZY

私たちはこれらを何度か実行しました-しかし、それは常に私たちのせいでした-そして基本的にフォームを送信しようとしたとき-サーバーにアクセスできません：（これは予期しないことですが、理にかなっています）

enter image description here

そして

enter image description here

私たちが見たメッセージです。それは「うんち」を意味しますか？ ; ）....または...

そして、これはデフォルトのフォーム送信を防ぐためのドキュメントです https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

ペンでの使用方法： https://codepen.io/sheriffderek/pen/abOqZoM

element.addEventListener('click', function(event) {
   event.preventDefault();
   // some instructions etc.
});

私たちはそこの人々に伝える必要があります-そしておそらく彼らは提出エラーのタイプを検出し、それが発生した理由に関する情報に人々を導くことができます。 ：）

enter image description here

0
sheriffderek