Как правильно выводить данные из переменной в input

Рейтинг: 0Ответов: 1Опубликовано: 25.07.2023

Я делаю генератор паролей, он должен создать пароль и я выводить в input, но с последним не получается

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="adaptive.css">
</head>
<body>
    <input class="output" id="js-output output" type="text" readonly>

    <div class="settings">
        <button class="btn1" id="js-btn2">=></button>
        <button class="btn2" id="js-btn1">copy</button>
    </div>

    <input type="range" class="form-range" id="customRange1">

    <script src="index.js"></script>
    <script src="pasword.js"></script>
</body>
</html>

js(password.js)

const GeneratorBTN = document.getElementById('js-btn2')

GeneratorBTN.addEventListener('click', function() {
    const outputINT = document.getElementById('output')
    let number = 'abcdefghijklmnopqrstuvwxyz1234567890'
    word = '';

    for(let i = 0; i < 15; i++){
        word += number[Math.round(Math.random() * (number.length - 1))];
    }

    document.getElementById('output').value = word
})
css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

Начнём с того, что input, checkbox, и другие теги, что могут запрашивать ввод или указание какого-то значения стоит оборачивать в form, а кнопке, которая его окликает, следует добавить в атрибут type значение "button", так как по умолчанию у кнопок type = "submit", что в последствии и производит отправку формы (значение инпута в данном случае сгенерировалось, и в момент отправилось куда-то), type = "button" же превращает кнопку в своеобразную пустышку для свободных действий.

Касаемо скрипта:

  1. В JS же ты в самом начале обратился к кнопке генерации, но не использовал её. Я в конце удалил ту строчку с новым селектором, и вместо неё подставил имя константы из начала.
  2. Я удалил 1 имя из id"" у инпута, и обратился к нему в единый раз, вопрос удобства или задачи, но лучше использовать 1 имя в id.
  3. К word = "" я дописал let, чтобы объявить это как переменную для этой функции

Вот полный код, к которому я добавил простенькие стили для лучшего восприятия :

//JS
const GeneratorBTN = document.getElementById('js-btn2')

GeneratorBTN.addEventListener('click', function() {
    const outputINT = document.getElementById('js-output')
    let number = 'abcdefghijklmnopqrstuvwxyz1234567890'
    let word = '';

    for(let i = 0; i < 15; i++) {
        word += number[Math.round(Math.random() * (number.length - 1))];
    }

    outputINT.value = word;
    console.log('abcd');
})
/* CSS */
* { margin: 0; padding: 0; border: 0; box-sizing: border-box;}
body {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
.wrapper {
    background-color: rgba(25, 25, 25, 0.84);
    width: 400px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    padding-left: 20px;
}
.output {
    width: 80.56%;
    height: 60px;
    font-size: 20px;
    padding: 10px;
    outline: none;
}
button {
    user-select: none;
    width: 60px;
    height: 30px;
    font-size: 20px;
}
<!---HTML--->
<body>
<form class="wrapper">
    <input class="output" id="js-output" type="text" readonly>

    <div class="settings">
        <button type="button" class="btn1" id="js-btn2">=></button>
        <button type="button" class="btn2" id="js-btn1">copy</button>
    </div>

    <input type="range" class="form-range" id="customRange1">
</form>
</body>