My Input form are not displaying field values on button clicking!

JavaScript
1

Html Code:

<form action="" id="form-1"></form>
    <label for="">
        First Name:
    </label>
        <input type="text" name="fname" id="fname" placeholder="">

        <label for="">
            Last Name:
            <input type="text" name="lname" id="lname" placeholder="">
        </label>
        <button class="btn">Click</button>
        <label for="">
            Display Full Name:
            <input type="text" name="fullName" id="fullName" placeholder="">
        </label>
    </form>

JS Code:

let form = document.getElementById('form-1');
let fname = document.getElementById('fname').value;
let lname = document.getElementById('lname').value;

form.addEventListener('submit',function(){
    
    document.querySelector('.btn').addEventListener('click',function(){
        let display = fname.concat(lname);
        document.getElementById('fullName').innerHTML = display;
    });
})
2

Remove this. You’ve ended form tag pretty early.

3

still not working !!

4

Still not displaying the values of input field …

5

its incorrect the way your written it. and also you are trying to access the value when it will be nothing.

do something like this instead:

let form = document.getElementById('form-1');
let fname = document.getElementById('fname')
let lname = document.getElementById('lname');

    
    document.querySelector('.btn').addEventListener('click',function(){
              document.getElementById('fullName').value = `${fname.value} ${lname.value}`;
    });
6

why attach an event listener inside the scope of another event listener and also when your script is run the value is empty

9

I mean ! how to place the event listeners ??

10

I placed exactly like you said :

let fname = document.getElementById('fname')
let lname = document.getElementById('lname');

    
    document.querySelector('.btn').addEventListener('click',function(){
              document.getElementById('fullName').value = `${fname.value} ${lname.value}`;
    });
11

But the values only display just for few seconds…

12

are you using something like codepen? if you have your setting set to update automatically when you make changes to your code then it will do that. that would be the expected behavior…

for me its working as expected:

https://codepen.io/kravmaguy/pen/gOLramJ

13

Yeahhh !! its working in codepen … but not in visual studio code browser

14

I think you’re closing form tag two times