how to access text input value with javascript

Question

With this simple example, I want the p element to get the current value of text input but cannot figure out. The value doesn't change.

    function myFunction() {
    document.getElementById("myText").value = "Johnny Bravo";
    }
    document.getElementById("p1").innerHTML =   document.getElementById("myText").value;

    Name: <input type="text" id="myText" value="Mickey">

    <p id="p1">Click the button to change the value of the text field.</p>

    <button onclick="myFunction()">Try it</button>

"I want the p element to get the current value of text input" — It does. As soon as you load the page, the p element gets the current (i.e. the default) value. — Quentin
– Quentin, Commented Oct 31, 2016 at 15:22
yeah, you need to have the second part bound to the input changing on the text field or when you click the button — clurect
– clurect, Commented Oct 31, 2016 at 15:23
I want to make a bidirectional search field with a ul list of names and and input text field. 1) when I click on a list element it puts the name in the text field and highlights the element in the list (this part works). — Alfonso Martinez
– Alfonso Martinez, Commented Oct 31, 2016 at 15:48
2) the other part is to compare the value of text field and search in the list, if its finded the element get highlighted (but i cannot find a way to evaluate permantently the value of text input, it doesn't even change the p element (for demo) when writting in the text field) — Alfonso Martinez
– Alfonso Martinez, Commented Oct 31, 2016 at 15:52
Ok, I think the solution has to be with on change event, so it can change the value of text field every time its chsnges... — Alfonso Martinez
– Alfonso Martinez, Commented Oct 31, 2016 at 16:03

Blazemonger · Accepted Answer · 2016-10-31 15:23:08Z

3

Move that part of the code inside of your function. Currently, it only runs once and never again after the button is clicked.

    function myFunction() {
      document.getElementById("myText").value = "Johnny Bravo";
      document.getElementById("p1").innerHTML =   document.getElementById("myText").value;
    }

    Name: <input type="text" id="myText" value="Mickey">

    <p id="p1">Click the button to change the value of the text field.</p>

    <button onclick="myFunction()">Try it</button>

answered Oct 31, 2016 at 15:23

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

Comments

Aykut Ateş · Accepted Answer · 2016-10-31 15:23:27Z

3

    function myFunction() {
    document.getElementById("p1").innerHTML =   document.getElementById("myText").value;
    }

    Name: <input type="text" id="myText" value="Mickey">

    <p id="p1">Click the button to change the value of the text field.</p>

    <button onclick="myFunction()">Try it</button>

answered Oct 31, 2016 at 15:23

Aykut Ateş

1841 gold badge2 silver badges11 bronze badges

5 Comments

Felix Kling Over a year ago

Mind explained why you made this change? What's the problem with the OP's code?

Alfonso Martinez Over a year ago

More specifically I want to access the current value of text input from outside the function (to have a global var with the current value so I can use for other things)...For example, even when writting in the text field it should output that en the p element (independent from button)...

Felix Kling Over a year ago

@AlfonsoMartinez: "I want to access the current value of text input from outside the function" You can call document.getElementById("myText").value anywhere you need the value.

Alfonso Martinez Over a year ago

That is what I'm doing in the example (calling document.getElementById("myText").value) outside the function, and it doesn't get updated...

Felix Kling Over a year ago

@AlfonsoMartinez: "and it doesn't get updated" Every time you access document.getElementById("myText").value, you get the current value of the text field. It seems like you are accessing document.getElementById("myText").value at the wrong time, but without seeing your code, that's just speculation.

MineAndCraft12 · Accepted Answer · 2016-10-31 15:24:08Z

2

Switch the location of two of your lines of code in the JS...

function myFunction() {
    document.getElementById("p1").innerHTML = document.getElementById("myText").value;
}
document.getElementById("myText").value = "Johnny Bravo";

I'm guessing you wanted to start the value off as Johnny Bravo, and then when the button is clicked, then set the innerHTML?

answered Oct 31, 2016 at 15:24

MineAndCraft12

6716 silver badges15 bronze badges

Collectives™ on Stack Overflow

how to access text input value with javascript

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related