Question

我正在创建一个随机密码生成器，我希望用户能够设置所需的密码长度。我有一个输入字段供用户输入所需的长度，我想将其输入存储在变量中。我已经尝试了几种堆栈溢出解决方案，但都没有成功。

这是我现在拥有的HTML：

<div id = "pswrdLngth">
            <div class = "text-center">
                <p>Desired password length:</p>
                <input type="text" id = "lengthValue" name="userInput" size="25" placeholder="Enter a # between 8-128">
            </div>   
    </div>

和JavaScript：

var lengthValue = document.querySelector("#lengthValue"); 
var passwordLength = lengthValue.value;

$(".buttonTwo").on("click", function() {
    console.log(passwordLength); 
} )

单击buttonTwo时，控制台返回空行。我也尝试过对函数passwordLength使用“ lengthValue.val（）”，但是控制台错误显示为：“。val（）不是函数”。有什么建议么？预先谢谢你。

Answer 1

const myFunction = () => {
  var lengthValue = document.querySelector("#lengthValue");
  var passwordLength = lengthValue.value;
  console.log(passwordLength)
}

html：

<div id = "pswrdLngth">
            <div class = "text-center">
                <p>Desired password length:</p>
                <input type="text" id = "lengthValue" name="userInput" size="25" placeholder="Enter a # between 8-128" onchange="myFunction()">
            </div>   
    </div>

我做了一个onchange函数，它将在每次输入更改时存储该值。

Answer 2

您可以这样添加事件监听器：

var lengthValue = document.getElementById("lengthValue"); 
var passwordLength = lengthValue.value;
document.getElementById('buttonTwo').addEventListener("click", function() {
    console.log(passwordLength); 
} )

如果buttonTwo的HTML具有一个名为“ buttonTwo”的ID，则该方法应该起作用，如下所示：

<input type="button" id="buttonTwo">

如何在输入字段中为用户输入设置变量的值？

2 个答案: