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

Question

I am trying to get an event handler on an HTML form. I am just trying t get the simplest thing working, but I just cannot see what I am missing.

It is part of a wider project, but since I cannot get this bit working I have reduced it down the most very basic elements 1 text field and a button to try and see what it is I am missing.

All I want to do is get some text entered and flash up message in a different area on the screen.

The user enters text into the input field (id=owner). The plan is that when the button (id="entry") is pressed the event handler (function "entry") in the entry.js file should cause a message to display.

• I don't want the form to take me to a different place it needs to stay where it is
• I just want some form of text to go in the: <div id="feedback" section.
  When I can get it working: I intend the create the text from the various text fields that get entered.

I Know that this is beginner stuff & I know that I have reduced this down such that it barely worth thought but I would welcome any input please & thank you.

HTML code is:

<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>

Code for entry.js is:

function entry() {

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


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

I have tried:

• Adding in a prevent default:
  window.event.preventDefault();

• doing this through an event Listener:
  elEntry.addEventListener('submit',entry,false);

• using innerHTML to post the message:
  elMsg.innerHTML = "

At present all that happens is that the pushing submit reloads the page - with no indication of any text being posted anywhere.

Answer 1

One issue is that you have a typo, where getElementById capitalized the D at the end.

Another is that preventDefault() should be called on the form element, not the input.

Here's a working example that corrects those two mistakes.

 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>

I also defined a event parameter for the handler. I don't remember is window.event was ever standardized (it probably was), but I'd prefer the parameter.

Be sure to keep your developer console open so that you can get information on errors that may result from typos.

Answer 2

 var elEntry = document.getElementById('entry'); elEntry.addEventListener("click", function(e) { e.preventDefault(); var elMsg = document.getElementById('feedback'); elMsg.textContent = 'hello'; });

 <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>