更改输入文本（不是占位符）

Question

the idea is to change the text inside the text input with a button, but i cant get it to work even without it!这个想法是用一个按钮更改文本输入中的文本，但即使没有它我也无法让它工作！ just by pure code i want to set it to '123' but it wont change no matter what, clearly the problem is in the HTML but i dont seem to find it.只是通过纯代码，我想将其设置为“123”，但无论如何它都不会改变，显然问题出在 HTML 中，但我似乎找不到它。 Here's what im writing in JS :这是我在 JS 中写的内容：

let contraseña = document.getElementById("contraseñaGenerada");

contraseña.value = "123";

I also tried with the following but it didnt work either.我也尝试了以下方法，但也没有用。

 contraseña.innerText = "123";

Here's the HTML:这是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>Password Generator</title>

    <link rel="stylesheet" href="style.css">    
    <script src="script.js"></script>
</head>


<body>

<h1 class="Texto">Welcome to our password generator.</h1>
<h3 class="Texto">Use our free online generator to get access to a highly secure random password of your liking. Choose the characters you want on your password and let the generator do the rest.</h3>

<br><br><br>    

<h2 class="Texto">Customize your password.</h2>
<br>

<div id="divCentro"> 

    <input type="text" name="contraseñaGen" id="contraseñaGenerada" >

    <div id="botones">

        <button class="boton">Copy to clipboard.</button>
        <button class="boton">Generate again.</button>

    </div>
</div>

<div id="Caracteristicas">

        <div id="Izquierda">

            <label for="barritaRange" class="TextoChico">Longitud de la contraseña: <br></label>
            <input type="number" id="numeroLongitud"><input type="range" name="barrita" id="barritaRange">

        </div>

        <div id="Derecha">
            
            <input type="checkbox" id="FacilDecir">   
            <label for="FacilDecir" class="TextoChico" >Facil de decir.</label>   
            <input type="checkbox" id="Minus">        
            <label for="Minus" class="TextoChico" >Incluye minusculas.</label>  
            <input type="checkbox" id="Mayus">
            <label for="Mayus" class="TextoChico" >Incluye mayusculas.</label>  
            <input type="checkbox" id="Nums">
            <label for="Nums" class="TextoChico" >Incluye numeros.</label>  
            <input type="checkbox" id="Simbolos">
            <label for="Simbolos" class="TextoChico" >Incluye simbolos.</label>  

        </div>
    </div>
</div>


</body>

</html>

Answer 1

You can always set input value with element.value property您始终可以使用element.value属性设置输入值

 let contraseña = document.getElementById("contraseñaGenerada"); contraseña.value = 'My Value';

 <!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>Password Generator</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <h1 class="Texto">Welcome to our password generator.</h1> <h3 class="Texto">Use our free online generator to get access to a highly secure random password of your liking. Choose the characters you want on your password and let the generator do the rest.</h3> <br><br><br> <h2 class="Texto">Customize your password.</h2> <br> <div id="divCentro"> <input type="text" name="contraseñaGen" id="contraseñaGenerada" > <div id="botones"> <button class="boton">Copy to clipboard.</button> <button class="boton">Generate again.</button> </div> </div> <div id="Caracteristicas"> <div id="Izquierda"> <label for="barritaRange" class="TextoChico">Longitud de la contraseña: <br></label> <input type="number" id="numeroLongitud"><input type="range" name="barrita" id="barritaRange"> </div> <div id="Derecha"> <input type="checkbox" id="FacilDecir"> <label for="FacilDecir" class="TextoChico" >Facil de decir.</label> <input type="checkbox" id="Minus"> <label for="Minus" class="TextoChico" >Incluye minusculas.</label> <input type="checkbox" id="Mayus"> <label for="Mayus" class="TextoChico" >Incluye mayusculas.</label> <input type="checkbox" id="Nums"> <label for="Nums" class="TextoChico" >Incluye numeros.</label> <input type="checkbox" id="Simbolos"> <label for="Simbolos" class="TextoChico" >Incluye simbolos.</label> </div> </div> </div> </body> </html>

Answer 2

After almost half an hour i realized its because my将近半小时后，我意识到这是因为我的

<script src="script.js"></script>

was on the top instead of bottom of body, make sure to add it to the end.. omg.在身体的顶部而不是底部，请确保将其添加到末尾.. omg。

更改输入文本（不是占位符）

问题描述

2 个解决方案

解决方案1
0 2022-07-16 23:21:54

解决方案2
0 2022-07-16 23:32:02

更改输入文本（不是占位符）

问题描述

2 个解决方案

解决方案1 0 2022-07-16 23:21:54

解决方案2 0 2022-07-16 23:32:02

解决方案1
0 2022-07-16 23:21:54

解决方案2
0 2022-07-16 23:32:02