1 Star2 Stars3 Stars4 Stars5 Stars (15 votes, average: 4.33 out of 5)

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.

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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
<input type="text" id="foo" value="">

Then we grab the value with this syntax.


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>
function getValue() {
var y = document.getElementById("boo");
var x = document.getElementById("foo").value;
var z = document.getElementById("koo").value;
y.innerHTML = x +' ' + z;

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.

Subscribe To My YouTube Channel:
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;

Lesson #16


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

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips


Cool People Share:


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.