CODEWITHSUNDEEP
javascript
user3148414
user3148414

Reputation: 7

Get element by input text id

what is wrong with the code? i have to get the text from the input text box after clicking on submit button, the input text value must be shown in paragraph.

<html>
<body>

<p id="demo"></p>
<br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()"></button>
<script>
function myFunction()
{
var x = document.getElementById("myList");
var txt = "Welcome ";
for (var i=0;i<x.length;i++)
{
txt = txt + x.elements[i].id + "br";
 }
document.getElementById("demo").innerHTML=txt;
}
</script>

</body> 
</html>

Upvotes: 0

Views: 2106

Answers (6)

JavaStudent
JavaStudent

Reputation: 1111

You have to take the "myList" id's value and then assign it to innerHTML of

tag which could be done as follows : 

<html>
<body>
<p id="demo"></p>
<br>
<form>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()"/>
</form>
<script>
function myFunction()
{

 var txt = "Welcome";
 var x = document.getElementById("myList").value;
 txt = txt +" "+x;
document.getElementById("demo").innerHTML=txt;
}
</script>

</body> 
</html>

Upvotes: 0

Just code
Just code

Reputation: 13791

Check here a demo

Check here no need to loop all the elements

You just need a id of the element so why are you looping it ?

Here is the source code of it

This is the javascript code looks like

function myFunction()
{
var x = document.getElementById("myList");
var txt = "Welcome ";

txt = txt + x.value + "br";

document.getElementById("demo").innerHTML=txt;
}

You want a value from the element so you have to take a value you can see in the functiont x.value so it will retrive the value from the element and then your function will work i hope this will help you

Upvotes: 1

user2727841
user2727841

Reputation: 725

loop??? I didn't understand its very simple try this.

<html>
<body>
<p id="demo"></p><br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()">
<script>
    function myFunction() {
        var x = document.getElementById("myList");
        var txt = "Welcome " + x.value;
        document.getElementById("demo").innerHTML = txt;
    }
</script>
</body>
</html>

OR

        var x = document.getElementById("myList").value;
        var txt = "Welcome " + x;

Upvotes: 0

Abraham Hamidi
Abraham Hamidi

Reputation: 13789

There are two ways to fix it:

[1] Change x.length to x.value.length and x.elements to x.value.elements

The fiddle

[2] Change var x = document.getElementById("myList"); to var x = document.getElementById("myList").value;

And the fiddle, why not?

A text box has no property length, so I think you are referencing to its text? That's what this fix will do. (Also, it's better practice to use method 2.)

Upvotes: 1

Mayur Tilva
Mayur Tilva

Reputation: 160

<html>
<body>

<p id="demo"></p>
<br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()">
<script>
    function myFunction() {
        var x = document.getElementById("myList").value;
        alert(x);
        var txt = "Welcome ";
        for (var i = 0; i < x.length; i++) {
            txt = txt + x.charAt(i) + "<br />";
        }
        document.getElementById("demo").innerHTML = txt;
    }
</script>

</body> 
</html>

Upvotes: 0

Faron
Faron

Reputation: 1243

You would want to use this code

document.getElementById('myList').value;

it will grab the value from the input box element.

Upvotes: 4

Related Questions