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

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

下面是我现在对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>

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

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函数，它将在每次输入更改时存储值

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

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

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

如果buttonTwo的HTML有一个名为“buttonTwo”的id，则应该可以这样做：

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

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

为什么passwordLength不是一个变量？哦，是的，我只是复制和粘贴不正确。我现在就要编辑了-别理它。谢谢你，凯文。我尝试了这一点并得到了错误：“uncaughtreferenceerror:myFunction未在HTMLmyFunction.onchange（index.html:77）onchange@index.html:77中定义”