如何将 HTML 输入字符串值作为 JavaScript 函数参数传递？答案

【问题标题】：How to pass HTML input string value as a JavaScript Function Parameter?如何将 HTML 输入字符串值作为 JavaScript 函数参数传递？
【发布时间】：2021-12-28 23:52:34
【问题描述】：

晚上好，

我正在尝试将 HTML 输入（字符串）值作为 JavaScript 函数参数传递。我对编码很陌生，最近开始使用 DOM 操作。


          function lengthOfPassword (strLength) {
  
            if (strLength.length >= 5) {
              return true; 
            } else {
              return false; 
            };  
            }
            console.log(lengthOfPassword("l"));

这是我编写的原始函数，它根据需要执行，根据长度返回真或假。

我使用了onclick="()" 和document.getElementById("").value; 从 HTML 输入中获取值并让它在函数中运行。

这是我已经走了多远：

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

我的 JS 函数现在看起来像这样：

        
        function lengthOfPassword() {

        let strlength = document.getElementById("pwd").value;
  
          if (strlength.length >= 5) {
            return true; 
          } else {
            return false; 
          };  
          }

我觉得我在终点线绊倒了！如果有人可以帮助解释我哪里出错了，那就太好了！

【问题讨论】：

你想对函数返回的真/假做什么？
你不应该使用不安全的内联on* 属性。直接在 JS 文件或标签中使用 Element.addEventListener()。
您的上一个版本应该可以使用。但它不是很有用，因为函数的返回值不用于任何事情。
谢谢你，Roko C. Buljan - 我会试试 Element.addEventListener()。哦，谢谢你，巴尔玛。我想要做的是，如果有人输入少于 5 个字符的字符串，它将输出 false（我计划添加警报），因此如果字符串太短，用户会知道类似“无效”的消息

标签： javascript html function onclick getelementbyid

【解决方案1】：

创建一个函数isValidPassword(pwd, min) 处理密码字符串长度并返回一个布尔值
使用addEventListener() 将"click" 事件分配给您的提交按钮

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

【讨论】：