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.

<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

 

JavaScript Getting The Value Of An Input Field Absolute Beginner was last modified: October 29th, 2021 by Maximus Mccullough

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
Publisher
A1WEBSITEPRO LLC
Logo
a1-tutorial-javascript-getting-the-value-of-input-field-absolute-beginner

2 Comments

Leave a Reply

Your email address will not be published.

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