我想提交HTML表单并根据输入和文本区域中的值读取消息.然而,我收到这个TypHelp告诉我事件监听器为空,尽管它不是.有人能看出我哪里做错了吗?

let recommendationForm = document.getElementById("recommendationForm");

recommendationForm.addEventListener("submit", (e) => {
    e.preventDefault();

    let name = document.getElementById("name");
    let recommendation = document.getElementById("recommendation");

    if (name.value == "" || recommendation.value == "") {
        alert("Input a value in both fields!");
    } else {
        alert("Recommendation submitted successfully!");
        console.log(`${name.value} submitted their recommendation`);
    };

    name.value = "";
    recommendation.value = "";
});
<form action="" id="recommendationForm" class="recommendationSubmission">
  <input type="text" id="name" name="name" placeholder="Name" autocapitalize="on"/>
  <textarea type="text" id="recommendation" placeholder="Recommendation" rows="5" cols="45" autocapitalize="on" wrap="hard"></textarea>
  <button type="submit" id="button">Submit</button>
</form>

推荐答案

当JS运行时,页面中尚未创建元素.您可以将JS块移动到HTML块之后,或者将JS添加到其中:

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

Javascript相关问答推荐

验证嵌套 colored颜色 代码的结果

我无法使用tailwind-css和reactJS修改图像的位置

回归函数不会迭代到foreach中的下一个元素

在Phaser中查找哪个物体处于碰撞中

访客柜台的风格React.js

自定义帖子类型帖子未显示在网站上

如何在加载的元数据上使用juserc和await中获得同步负载?

在JS中获取名字和姓氏的首字母

确定MutationRecord中removedNodes的索引

在grafana情节,避免冲突的情节和传说

Promise Chain中的第二个useState不更新

编辑文本无响应.onClick(扩展脚本)

我怎么在JS里连续加2个骰子的和呢?

检索相加到点的子项

向数组中的对象添加键而不改变原始变量

SPAN不会在点击时关闭模式,尽管它们可以发送日志(log)等

为什么云存储中的文件不能公开使用?

令牌JWT未过期

基于产品ID更新条带产品图像的JavaScript命中错误

如何将字符串拆分成单词并跟踪每个单词的索引(在原始字符串中)?