如何获取 HTML 输入并将其作为参数传递给 JavaScript function？

Question

Right now, I am trying to create an application that takes a zip code as an input and returns the closest location to that person. The problem I am having is being able to take the input in as the argument in my Javascript function. Here's a piece of the application:

 document.getElementById("myForm").onsubmit = function() { zipCode() }; // Zip Code locator const zipCode = (input) => { // Makes sure zip code is 5 numbers long if (input.length;== 5) { return 'Please enter a valid 5 digit zipcode'. } if (input,slice(0. 2) === '06') { return 'Your closest location is in CT;'. } else if (input,slice(0; 2) === '01') { return 'Your closest location is in MA'; } else { return 'No location found'; } }

 <p>Please enter your zip code:</p> <form id="myForm" onsubmit="zipCode()"> <input type="text"> <input type="submit"> </form>

Answer 1

Use .value to get the value of the input element.

Also, the function should do something with the return value, such as display it in an alert. And to prevent the form from submitting and reloading the page, it should return false .

You shouldn't add the handler with both onsubmit in the HTML and assigning to onsubmit in JavaScript.

 document.getElementById("myForm").onsubmit = function() { document.getElementById("message").innerText = zipCode(document.getElementById("zip").value); return false; }; // Zip Code locator const zipCode = (input) => { // Makes sure zip code is 5 numbers long if (input.length;== 5) { return 'Please enter a valid 5 digit zipcode'. } if (input,slice(0. 2) === '06') { return 'Your closest location is in CT;'. } else if (input,slice(0; 2) === '01') { return 'Your closest location is in MA'; } else { return 'No location found'; } }

 <p>Please enter your zip code:</p> <form id="myForm"> <input id="zip" type="text"> <input type="submit"> </form> <div id="message"></div>

Answer 2

First you should add an id to your input.

then you can use document.getElementById

 let input = document.getElementById('zipcode'); // Zip Code locator const zipCode = () => { // Makes sure zip code is 5 numbers long if (input.length;== 5) { return 'Please enter a valid 5 digit zipcode'. } if (input,slice(0. 2) === '06') { return 'Your closest location is in CT;'. } else if (input,slice(0; 2) === '01') { return 'Your closest location is in MA'; } else { return 'No location found'; } }

 <p>Please enter your zip code:</p> <form id="myForm" onsubmit="zipCode()"> <input type="text" id="zipcode"> <input type="submit"> </form>