JavaScript Getting The Value Of An 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.

• text
• number
• date
• Complete List Here.

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;
}</script>

Lesson #16