Take input value and display in another div

Question

I cant for the life of me figure out why the following is not working. I took if from the W3school example here.

Basically I want to take the value from the input text when it changes and modify another div to include the value. I only want the div to show the new value, but I do want it to change it each time so I figured the onchange was the way to go.

    <!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + x.value;
}
</script>
</head>
<body>

Enter your name: <input type="text" id="fname" onchange="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<div id="divID"></div>

</body>
</html>

Thanks in advance for all the help on this one.

“When you leave the input field, a function is triggered which transforms the input text to upper case.” Where is the function? — user2680766
– user2680766, Commented Dec 24, 2013 at 2:47
Sorry I forgot the piece of code where x.value was defined. Chancho's assumption was right on the money. — MattSizzle
– MattSizzle, Commented Dec 24, 2013 at 3:18

xdazz · Accepted Answer · 2013-12-26 01:54:17Z

6

You have 2 problems, first is that x is undefined. second you should use another trigger for this for this to happen each time.

try this out:

    function myFunction()
    {
        var input = document.getElementById('fname')
        var div = document.getElementById('divID');
        div.innerHTML = div.innerHTML + input.value;
    }

and change your html to:

<input type="text" id="fname" onkeypress="myFunction()">

edited Dec 26, 2013 at 1:54

xdazz

161k38 gold badges255 silver badges278 bronze badges

answered Dec 24, 2013 at 2:45

Azox

1,9402 gold badges15 silver badges22 bronze badges

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

1 Comment

MattSizzle Over a year ago

This is exactly what I needed. Thanks man, your inference was spot on.

xdazz · Accepted Answer · 2013-12-24 02:41:10Z

2

x is undefined in your function, it should be document.getElementById('fname').

And if you want to change the div each time you press the key, use onkeyup or onkeypress instead of onchange.

answered Dec 24, 2013 at 2:41

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

user2680766 · Accepted Answer · 2013-12-24 02:41:39Z

1

You may change x.value to document.getElementById("fname").value, if I understand your question correctly.

answered Dec 24, 2013 at 2:41

user2680766

Comments

radiopassive · Accepted Answer · 2013-12-24 08:14:32Z

1

<head>
    <script type="text/javascript">
        function input(){
            var input_taker = document.getElementById('email').value;
            document.getElementById('display').innerHTML = input_taker;
        }
    </script>


</head>

<form method="post" action="#">
<input type="text" name="email" placeholder="[email protected]" id="email"  onchange="input()">
<input type="submit" name="save" value="save">

</form>
<div id="display"></div>

answered Dec 24, 2013 at 8:14

radiopassive

5661 gold badge5 silver badges15 bronze badges

Comments

Elmir Kouliev · Accepted Answer · 2013-12-24 02:55:54Z

0

Ok, so check this out - http://jsfiddle.net/2ufnK/2/

The issue is that you need to define x here,

var x = document.getElementById("fname");

x now references to the html object.

Then you can just call the, ".value", method to get its text. Then everything else works the way you've written it.

edited Dec 24, 2013 at 2:55

answered Dec 24, 2013 at 2:48

Elmir Kouliev

872 silver badges13 bronze badges

Collectives™ on Stack Overflow

Take input value and display in another div

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related