调用querySelector获取表单内容返回null及刷新自动弹alert问题求助

1. querySelector返回null问题 #

根因 #

你代码里的表单onsubmit属性存在语法错误：return: false中的冒号是非法字符，导致阻止表单默认提交的逻辑失效。点击提交按钮后表单会触发默认的页面刷新行为，此时DOM正在被销毁，执行querySelector('#string')时对应元素已经被卸载，因此返回null。

修复步骤 #

• 修改form标签的onsubmit属性，将return: false修正为return false;，修复后代码如下：

<form onsubmit="translate(); return false;">
    <input id="string" type="text">
    <input type="submit">
</form>

• （可选优化）更推荐将事件逻辑移到JS文件中统一维护，不用行内事件绑定，写法如下：
  首先删掉form标签上的onsubmit属性，然后在pigLatin.js中添加如下代码：

document.querySelector('form').addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新行为
  e.preventDefault();
  translate();
})

2. 刷新网页自动触发alert问题 #

根因 #

你的pigLatin.js文件中存在全局作用域下直接调用translate()的代码，页面加载完成后（你加了defer属性，JS会等DOM解析完成后执行）就会直接运行该函数，触发alert弹窗。

修复步骤 #

打开pigLatin.js文件，删除全局作用域下的translate()直接调用语句，仅保留translate函数的定义即可，确保只有提交表单时才会触发该函数执行。

内容的提问来源于stack exchange，提问作者Kaden Hansen