1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 5.00 out of 5)

JavaScript Getting The Value Of An Input Field Absolute Beginner

a1-tutorial-javascript-getting-the-value-of-input-field-absolute-beginner

There are times when we need to get the value of a input field with JavaScript. We can get values from several different types of input fields.

JavaScript Value *

The way we grab a value from an input filed is by using the value function in JavaScript. First set the input field.

<input type="text" id="foo" value="">

Then we grab the value with this syntax.

document.getElementById("foo").value;

Code for Getting The Value in JavaScript *

Enter Something: <input type="text" id="foo" value=""><br/>
Enter Something Else: <input type="text" id="koo" value=""><br/>
<button onclick="getValue()">Try it </button>
<p id="boo"></p>
<script>
function getValue() {
var y = document.getElementById("boo");
var x = document.getElementById("foo").value;
var z = document.getElementById("koo").value;
y.innerHTML = x +' ' + z;
}
</script>

Adding Numbers Together In JavaScript *

This is the final code from today’s lesson. This code will add 2 numbers together and display them in the users browser. Notice we have to use the “+” sign in front of the variables that we want to change to integers so they can be added.

This: <input type="number" id="foo" value="" /><br/>
Plus This: <input type="number" id="zoo" value="" /><br/>
<button onclick="getValue()">Add Numbers</button>
<h2>Equals This</h2>
<p id="boo"></p><script>
function getValue(){
 var y = document.getElementById('boo');
 var x = document.getElementById('foo').value;
 var z = document.getElementById('zoo').value;
 var a = +x + +z;
 y.innerHTML=a;</pre>
}</script>

Lesson #16

 

Please follow and like us:
JavaScript Getting The Value Of An Input Field Absolute Beginner was last modified: June 25th, 2017 by Maximus Mccullough

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.