点击「Add Task」按钮后如何让自定义文本显示在任务列表下方？

嘿，我帮你定位到问题根源了！点击按钮后任务没出现在列表里反而跑到地址栏，主要是两个关键错误导致的：

1. 外部JS文件加载方式错误 #

你的HTML里引入app.js的写法不对，现在的代码是：

<script type="app.js"></script>

type属性是用来指定脚本类型的（现代浏览器可以省略这个属性），而加载外部JS文件必须用src属性来指定文件路径。把这行改成：

<script src="app.js"></script>

这样浏览器才能正确加载你的app.js脚本，执行里面的事件监听和任务添加逻辑。

2. 缺少DOM元素的引用 #

你的app.js里直接使用了form、taskInput、taskList这些变量，但没有先从DOM中获取对应的元素节点。这会导致代码执行时抛出错误，既没法阻止表单的默认提交行为（这就是内容跑到地址栏的原因），也没法往列表里添加新项。

在loadEventListeners()函数之前，先添加DOM元素的获取代码：

// 先获取需要操作的DOM元素
const form = document.getElementById('task-form');
const taskInput = document.getElementById('task');
const taskList = document.querySelector('.collection');

做完这两处修改后，再点击Add Task按钮，就能正常在Tasks下方的列表里创建新的任务项了，地址栏也不会再出现提交的内容。如果还有问题，可以打开浏览器的开发者控制台（按F12）查看报错信息，方便进一步排查~

内容的提问来源于stack exchange，提问作者Justin Valentine