Javascript 为什么该值没有进入控制台？

这是一个愚蠢的问题，但我感到沮丧，希望得到一些帮助。为什么我的值在提交后不会输出到控制台？有人注意到问题吗

var todos = "";

// user clicked on the add button in the to-do field add that text into the to-do text

$('#add-todo').on('click', function(event) {
  event.preventDefault();

  //values per text box
  todos = $("#todo-input").val().trim();

  //test values from textbox
  console.log(todos);

HTML

---

您只需要关闭whit}

var todos=； //用户单击待办事项字段中的添加按钮，将该文本添加到待办事项文本中 $'add-todo'。单击时，functionevent{ 违约事件； //每个文本框的值 todos=$todo-input.val.trim； //测试文本框中的值 console.logtodos； } 在此处添加您的待办事项列表：

---

add您的脚本何时运行？您是否正在将其全部包装到文档中。准备好了吗？当我按下按钮时，我希望能够从文本框中获取值并将其显示在控制台中。您是否尝试过从匿名单击处理程序中转储输入内容…而不进行修剪？我已经格式化了您的代码。除了可能缺少一些JavaScript之外，您还有无效的HTML。例如，您打开一个输入标记，但用/div将其关闭。请更正这些，以便我们可以看到您正在执行的所有操作。不，他没有，他在其中有一个嵌套的div，但它没有缩进，这使您感到不安，输入标记是一个单例。关闭div标记不是问题…这在代码snippit上有效，但由于某些原因在我的系统中仍然不起作用。加载文档时需要执行此操作。我对此非常陌生，不确定这意味着什么。非常感谢。很抱歉问你这个新手问题，但我为什么要这么做？如果你对回答不感兴趣，我就自己研究一下。我想问一下，如果你想从html中获取资源，你需要加载这个。

<div class ="col-4">
    <form role = "form">
        <div class = "form-group row">
            <div class = "To-Do-List">
                <label for="todo-input">Add Your To Do List Here:</label>
            </div>
            <input class="form-control" id="todo-input" type = "text">
            <tbody id = "table_body">
            </tbody>
        </div>
    </form>
</div>
<div class="button">
    <button class ="btn btn-danger" id="add-todo" type="submit">Add</button>
</div>