te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Bad path boomboomv2index.html error message when trying to assign event handlers - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Bad path boomboomv2index.html error message when trying to assign event handlers - Stack Overflow

    javascript - Bad path boomboomv2index.html error message when trying to assign event handlers - Stack Overflow

    programmeradmin3浏览0评论

    I'm writing an event handler in Javascript on Codepen that will take a form input and add it to an unordered list. When trying to test, I get a "bad path /boomboom/v2/index.html" error message. I'm not sure if this error is a result of my code or an issue with Codepen. Can anyone point me to how to fix this?

    I don't know what to try because I have not idea what this error means.

    Here's the 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>

    Here's the 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
    }

    Here's the 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);
  }


})();

    Code can also be viewed on my pen at

    When I enter some text into the form field and click the button, the error displays.

    The expected output is to be able to add the text entered in the form field as a new list item. Any help or pointers would be greatly appreciated.

    I'm writing an event handler in Javascript on Codepen that will take a form input and add it to an unordered list. When trying to test, I get a "bad path /boomboom/v2/index.html" error message. I'm not sure if this error is a result of my code or an issue with Codepen. Can anyone point me to how to fix this?

    I don't know what to try because I have not idea what this error means.

    Here's the 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>

    Here's the 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
    }

    Here's the 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);
  }


})();

    Code can also be viewed on my pen at https://codepen.io/raquelocasio/pen/XwwKLZ

    When I enter some text into the form field and click the button, the error displays.

    The expected output is to be able to add the text entered in the form field as a new list item. Any help or pointers would be greatly appreciated.

    • javascript
    • codepen
    Share Improve this question asked Jun 8, 2019 at 17:38 Raquel OcasioRaquel Ocasio 631 silver badge5 bronze badges 2
    • Forgot to mention that I can't change the HTML or CSS, it was provided by the professor. – Raquel Ocasio Commented Jun 8, 2019 at 17:40
    • For future questions like this: here's an example of a most minimal version to show the oute: codepen.io/sheriffderek/pen/VwLQjZY (showing problem) - codepen.io/sheriffderek/pen/abOqZoM (showing addressed) - if we can show the people at CodePen - they could add some information to the error message to help people in the future. Docs: developer.mozilla/en-US/docs/Web/API/Event/preventDefault – sheriffderek Commented Mar 11, 2020 at 6:06
    Add a ment  | 

    4 Answers 4

    Reset to default 6

    it's due to the forms default behaviour which is to reload the page. In this case the error is related to codepen. You need to add the event preventDefault method to your addNewTodo function. You'll need to do this for most form submit events.

    function addNewTodo(event) {
  event.preventDefault()
  // Rest of your add todo code here...
}

    I saw a similar issue when I used <form> tags in Codepen. I switched the <form> tag to a <div> tag and the error went away.

    Can you try this?

    I got the same problem with a form on my codepen.io pen, but it got fixed when i changed button type="submit" to type="button".

    It seems like this error (which is agreeably confusing - or enjoyably named) is brought up when a <form> is submitted in the sandbox. CodePen itself is a web application (built on rails I believe) with forms - and I'm not sure how that all plays out - but it probably has some scope to those - and can't just be having forms submitted to their server by its many many users.

    Here is an example of an error: https://codepen.io/sheriffderek/pen/VwLQjZY

    We've run across these a few times - but it has always been our fault - and when we've basically tried to submit a form - to a server we have no access to: (which can be unexpected - but makes sense)

    and

    are the messages we've seen. Does that mean 'poop' ? ; ) .... or...

    and here is the documentation for preventing the default form submission https://developer.mozilla/en-US/docs/Web/API/Event/preventDefault

    and how to use that in a Pen: https://codepen.io/sheriffderek/pen/abOqZoM

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

    We should tell the people there - and maybe they can detect the type of submission error and direct people to information on why it occurs. : )

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论