javascript - 无法让我的简单 JavaScript 事件处理程序工作

问题描述

我正在尝试在 HTML 表单上获取事件处理程序。我只是想让最简单的事情正常工作，但我就是看不到我错过了什么。

它是一个更广泛项目的一部分，但由于我无法让这部分工作，我将其缩减为最基本的元素 1 文本字段和一个按钮，以尝试查看我缺少什么。

我要做的就是输入一些文本并在屏幕上的不同区域显示消息。

用户在输入字段中输入文本 (id=owner)。计划是，当按下按钮 (id="entry") 时，entry.js 文件中的事件处理程序（函数“entry”）应该会显示一条消息。

我不希望表格将我带到另一个需要停留的地方
我只想在 <div id="feedback" 部分中添加某种形式的文本。
当我可以让它工作时：我打算从输入的各种文本字段中创建文本。

我知道这是初学者的东西，我知道我已经减少了这个，以至于几乎不值得考虑，但我欢迎任何意见，谢谢。

HTML代码是：

<form method="post" action="">  
    <label for="owner">Input Owner: </label>
    <input type="text" id="owner" />
    <div id="feedback"></div>
    <input type="submit" value="enter" id="entry" />
</form>

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

entry.js 的代码是：

function entry() {

    var elOwner = document.getElementById('owner');   
    var elMsg  = document.getElementByID('feedback');
    elMsg.textContent = 'hello';                     
    }


var elEntry = document.getElementById('entry');
    elEntry.onsubmit=entry;

我努力了：

添加阻止默认值：
window.event.preventDefault();
通过事件监听器执行此操作：
elEntry.addEventListener('submit',entry,false);
使用 innerHTML 发布消息：
elMsg.innerHTML = "

目前所发生的一切是推送提交重新加载页面 - 没有任何迹象表明任何地方发布了任何文本。

标签： javascripthtmlformsevent-handling

解决方案

一个问题是你有一个错字，最后getElementById大写了D。

另一个是preventDefault()应该在form元素上调用，而不是在输入上。

这是一个纠正这两个错误的工作示例。

function entry(event) {

  var elOwner = document.getElementById('owner');
  var elMsg = document.getElementById('feedback');
  elMsg.textContent = 'hello';
  
  event.preventDefault();
}


var entryForm = document.getElementById('entry').form;
entryForm.onsubmit = entry;

<form method="post" action="">
  <label for="owner">Input Owner: </label>
  <input type="text" id="owner" />
  <div id="feedback"></div>
  <input type="submit" value="enter" id="entry" />
</form>

我还event为处理程序定义了一个参数。我不记得 iswindow.event曾经标准化（可能是），但我更喜欢参数。