1 Star2 Stars3 Stars4 Stars5 Stars (8 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

 

Summary
JavaScript Getting The Value Of An Input Field Absolute Beginner
Article Name
JavaScript Getting The Value Of An Input Field Absolute Beginner
Description
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.
Author
A1WEBSITEPRO LLC

Related Post

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

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider buying me a drink.

Drinks

Leave a Reply

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