如何獲取 HTML 輸入並將其作為參數傳遞給 JavaScript function？

Question

現在，我正在嘗試創建一個應用程序，它將 zip 代碼作為輸入並返回與該人最近的位置。 我遇到的問題是能夠將輸入作為我的 Javascript function 中的參數。 這是應用程序的一部分：

 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

使用.value獲取輸入元素的值。

此外，function 應該對返回值做一些事情，例如在警報中顯示它。 並且為了防止表單提交和重新加載頁面，它應該返回false 。

您不應該在 HTML onsubmit onsubmit

 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

首先，您應該在輸入中添加一個id 。

那么你可以使用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>