Accessing the value of an input field?

JavaScript
1

Hi everyone,

I am trying to console log the value of the input with the ID ‘task-1’ to see if I am targeting it properly. I input a value into the input field and nothing is happening in the console.

Does someone know what I am doing wrong please?

The relevant JS code is on line 54…

2

Hi there. I don’t see any console logging in the codepen. Did you save what you were up to?

3

sorry - here it is…

4

There’s no element with an id of “task-1”. There is one with an id of “task1” if that helps.

5

Thanks…third time lucky…

6

You need an event/function to run to get the input value after something is typed. Right now you are just getting the initial value from when the code first runs (which is an empty string).

7

ok, thanks.

I’ve done a bit of googling to try to find out what that event/function might be, but I haven’t found what I need. I thought maybe assign whatever is typed in to a variable and do something with that, but how do I target what is typed in - is there even a specific name for values that are typed into input fields? Maybe I’m not using the right language in my search.

On a separate note, I found a video that shows me that is I type ‘task1.value’ directly into the console, I can access the valued that is typed in. Just curious why my console log doesn’t work then, assuming I have typed something into the field of course (as I did when I tested the command directly in the console)?

8

You should do more of the new JS curriculum. It will teach you what you need to know.

You more or less have 3 options.

  • Use a button and get the input value inside the button click event handler.

  • Add an event listener to the input element and use the "input" or "change" event. Get the input value inside that event handler (input is all inputs, change is on enter).

  • Use a form and get the values on a form submission. Using the FormData API is also an option. But this option is a bit overkill for a single input.

Code example 
<input type="text">
<button>Submit</button>
<p id="output"></p>

const inputElement = document.querySelector("input");
const btn = document.querySelector("button");

inputElement.addEventListener("input", () => {
  // all keystrokes
  console.log("all keystrokes: ", inputElement.value);
});

inputElement.addEventListener("change", () => {
  // on Enter (and button click)
  console.log("On Enter: ", inputElement.value);
});

btn.addEventListener("click", () => {
  // on button click
  console.log("On button click: ", inputElement.value);
});

I can’t really answer that but the console has a context dropdown and you need to be inside the correct context. You will usually be inside the correct context if you open the dev tools using the right-click Inspect option on the page.

Also, something very handy you should know about is the $0 command. If you select an element in the Inspector, in the console $0 will be that element.

Console Utilities API reference

9

Great, thank you.

I am probably trying to do some things that I haven’t read about/studied yet as I am reading a book about the fundamentals when I get time and googling the rest.

Would you recommend a particular source for the new JS curriculum?

10

@coderostro
Here’s is the link to freeCodeCamp new JS Curriculum:

1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.