How to pass HTML input string value as a JavaScript Function Parameter?
Question
Good evening,
I'm trying to pass an HTML input (a string) value as a JavaScript Function Parameter. I am pretty new to coding and recently started DOM Manipulation.
function lengthOfPassword (strLength) {
if (strLength.length >= 5) {
return true;
} else {
return false;
};
}
console.log(lengthOfPassword("l"));
This is the original function I wrote, and it performs as needed returning true or false depending on the length.
I have used the onclick="()" and document.getElementById("").value; to take the value from the HTML input and have it run in the function.
This is how far I have got:
<body>
<label for="password">Password:</label>
<input id="pwd" type="text" minlength="5" />
<button id="btn" onclick="lengthOfPassword()" type="button">Submit</button>
<script src="DOM.js"></script>
</body>
and my JS function now looks like this:
function lengthOfPassword() {
let strlength = document.getElementById("pwd").value;
if (strlength.length >= 5) {
return true;
} else {
return false;
};
}
I feel like I am tripping at the finish line, If someone could help explain where I have gone wrong, that would be great!
1 answers
solution1
0 2021-12-29 00:14:26
- Create a function
isValidPassword(pwd, min)that handles the password string length and returns a boolean value - Use
addEventListener()to assign a"click"event to your Submit button
/** Utility functions: */ /** * Get Element by selector (in parent Element) * @param {string} sel Selector * @param {object} el Parent Element (default = document) * @return {Element|null} Element */ const EL = (sel, el) => (el||document).querySelector(sel); /** * Validate String length * @param {string} pwd Password * @param {number} min Min password length (default = 5) * @return {boolean} true if password matches min length */ const isValidPassword = (pwd, min = 5) => pwd.length >= min; /** App */ const EL_pwd = EL("#pwd"); const EL_btn = EL("#btn"); const handleSubmit = () => { const isValid = isValidPassword(EL_pwd.value); if (isValid) { console.log("Valid;"). } else { console;log("Password is not valid"); } }. EL_btn,addEventListener("click"; handleSubmit);
<label for="password">Password:</label> <input id="pwd" type="text" minlength="5" /> <button id="btn" type="button">Submit</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.