Home how to get the value from the first text box and assign that value to the second text box on click of a button in javascript

Questions

how to get the value from the first text box and assign that value to the second text box on click of a button in javascript

byMR

October 16, 2022

I am trying to code where if I enter any value in my Text-1 box so I want that value to be displayed in my Text-2 box. If someone can please help me how to do it. Below is my HTML & `

function displayText(){
    var txt1 = document.getElementById('txt-1');
    var btn1 = document.getElementById('btn1');
    var out1 = document.getElementById('output1');
    out1.innerHTML = txt1.value; 
    btn1.addEventListener('click',displayText);
}
displayText();

<label for="text-box">Username:</label>
        <input type="text" id="txt-1" placeholder="Text Box-1">
        <input type="text" id="output1" placeholder="Text Box-2">
        <input type="button" id="btn1" value="Click Me">

JS` code

>Solution :

Based on the code out1.value should be used as want to assign that to another text-box. But if wants to display within p tag, div tag then innerHTML should be used.

function displayText(){
    var txt1 = document.getElementById('txt-1');
    var btn1 = document.getElementById('btn1');
    var out1 = document.getElementById('output1');
    out1.value = txt1.value; 
    
}
btn1.addEventListener('click',displayText);

<label for="text-box">Username:</label>
        <input type="text" id="txt-1" placeholder="Text Box-1">
        <input type="text" id="output1" placeholder="Text Box-2">
        <input type="button" id="btn1" value="Click Me">