I cant get an Input value with javascript

Question

So i am trying to get the value of an input tag with javascript and show it on the console but it doesnot work at all. this is my code, what am i missing here?

const userTextValue = document.getElementById('user-text').value;


const show = () => {
  console.log(userTextValue);
}

const submit = document.getElementById('submit');

submit.addEventListener('click', show);

Does the element with id "user-text" exist? Does the element with id "submit" exist? Does this run before the user has entered something? Does running this code summon badgers in the next room? What exactly doesn't work here? — VLAZ
– VLAZ, Commented Feb 18, 2022 at 11:37
Most likely you're attaching a click event to the submitter element, and the form is submitted (and the page is reloaded). Set the console to preserve old logs, then you'll see the logged value. That's probably an empty string, though, you've to read the value in the event handler, it's just a string, it's not linked to the value of the element. — Teemu
– Teemu, Commented Feb 18, 2022 at 11:39
how do i tell the console to preserve old logs and by the way it worked for me before, i just dont know what i did wrong this time :( — Falconcode
– Falconcode, Commented Feb 18, 2022 at 11:41
i put the userTextValue declaration inside the event handler, still same result. — Falconcode
– Falconcode, Commented Feb 18, 2022 at 11:44

Rahul Kumar · Accepted Answer · 2022-02-18 11:39:10Z

3

Access the input value when you click on show button, so that you get the updated value entered by user.

const show = () => {
  const userTextValue = document.getElementById('user-text').value;
  console.log(userTextValue);
}

const submit = document.getElementById('submit');
submit.addEventListener('click', show);

<div>
<input id="user-text" />
<button id="submit">Show</button>
</div>

answered Feb 18, 2022 at 11:39

Rahul Kumar

3,1572 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Revan99 · Accepted Answer · 2022-02-18 11:40:01Z

0

when you submit the page refresh by default to prevent that you can do it like this

const show = (e) =>{
    e.preventDefault();
    console.log(userTextValue);
}

answered Feb 18, 2022 at 11:40

Revan99

4462 gold badges6 silver badges13 bronze badges

3 Comments

Teemu Over a year ago

@Falconcode Yup, except the form is not submitted to your server (not sure if that even should, though).

Falconcode Over a year ago

i am just experimenting for now, i am taking a React course so just wanted to know how some things worked.

Falconcode Over a year ago

hey it is me again, i have noticed the console holds on to the old values and i want to only show the the input value i submitted on the console. any idea, how can i solve that?

Collectives™ on Stack Overflow

I cant get an Input value with javascript

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related