Как мне установить значение переменной для пользовательского ввода в поле ввода?

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 консоль возвращает пустую строку. Я также пробовал использовать lengthValue.val () для функции passwordLength, но консольная ошибка гласила: «.val () не является функцией». Какие-либо предложения? Заранее спасибо.

javascript input

0

user72503948573038 29 Окт 2019 в 02:24

Почему passwordLength не является переменной?

–

Kevin.a

29 Окт 2019 в 02:27

Ой, это так, я просто неправильно скопировал и вставил. буду редактировать сейчас - не обращайте внимания.

–

user72503948573038

29 Окт 2019 в 02:29

Answer 1

Вы можете добавить прослушиватель событий следующим образом:

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

Это должно работать, если HTML для buttonTwo имеет идентификатор с именем «buttonTwo», например:

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

0

Mudassir 29 Окт 2019 в 02:48

Answer 2

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, которая будет сохранять значение каждый раз при изменении ввода.

0

Kevin.a 29 Окт 2019 в 02:34

Спасибо, Кевин. Я попробовал это и получил ошибку: «Uncaught ReferenceError: myFunction не определена в HTMLmyFunction.onchange (index.html: 77) onchange @ index.html: 77»

–

user72503948573038

29 Окт 2019 в 02:43

Как мне установить значение переменной для пользовательского ввода в поле ввода?

2 ответа

Похожие вопросы

Новые вопросы

javascript