There are times when we need to get the value of a input field with JavaScript. We can get values from several different #input-types" target="_blank" rel="noopener">types of input fields.
- text
- number
- date
- #input-types" target="_blank" rel="noopener">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