Changing text on input (not placeholder)-CodePudding

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. Here's what im writing in 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:

  <!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 >Welcome to our password generator.</h1>
<h3 >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 >Customize your password.</h2>
<br>

<div id="divCentro"> 

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

    <div id="botones">

        <button >Copy to clipboard.</button>
        <button >Generate again.</button>

    </div>
</div>

<div id="Caracteristicas">

        <div id="Izquierda">

            <label for="barritaRange" >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"  >Facil de decir.</label>   
            <input type="checkbox" id="Minus">        
            <label for="Minus"  >Incluye minusculas.</label>  
            <input type="checkbox" id="Mayus">
            <label for="Mayus"  >Incluye mayusculas.</label>  
            <input type="checkbox" id="Nums">
            <label for="Nums"  >Incluye numeros.</label>  
            <input type="checkbox" id="Simbolos">
            <label for="Simbolos"  >Incluye simbolos.</label>  

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


</body>

</html>

CodePudding user response：

You can always set input value with element.value property

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 >Welcome to our password generator.</h1>
<h3 >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 >Customize your password.</h2>
<br>

<div id="divCentro"> 

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

    <div id="botones">

        <button >Copy to clipboard.</button>
        <button >Generate again.</button>

    </div>
</div>

<div id="Caracteristicas">

        <div id="Izquierda">

            <label for="barritaRange" >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"  >Facil de decir.</label>   
            <input type="checkbox" id="Minus">        
            <label for="Minus"  >Incluye minusculas.</label>  
            <input type="checkbox" id="Mayus">
            <label for="Mayus"  >Incluye mayusculas.</label>  
            <input type="checkbox" id="Nums">
            <label for="Nums"  >Incluye numeros.</label>  
            <input type="checkbox" id="Simbolos">
            <label for="Simbolos"  >Incluye simbolos.</label>  

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


</body>

</html>

CodePudding user response：

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.