JAVASCRIPT: Input

---

---

---

Input Basics

Up to this point, all variable values have been directly assigned in the code. This means that each time a program runs, the output is the same, unless you go into the code and change the variable values.

JavaScript offers an opportunity for users to interact with a web page through the use of input. Input allows us to use the same program structure as before, but instead of hardcoding values into the variables, the user inputs values that are stored in the variables. This allows the program to do the same calculations with different values each time it runs.

---

Form Input

We can use HTML form elements to take input as well. One of the keys to this is that we also need to create a button to signify the end of the user input. It is important that the button IS NOT inside of a form tag as it will automatically act as a submit button and reset the page. As a matter of fact, you need not a form tag at all. Our question (or prompt) can be asked either as a label of the input tag, or as a placeholder in the input tag.

To access the information in the form, we will need to access the document object using document.getElementById. We can then use the .value property to access the value the user entered in the input.

Another change is that up to this point, our JavaScript always executes immediately when the page loads. If this happens with input, the user will not have a chance to input anything before the value is read. For this reason, we will need to wrap our code in a function that executes when the button is clicked. The function will be called using the onclick attribute of the button.

Once the function is called and the value is accessed, we can use our document based output technique to show the output on the screen.

<input id='first' placeholder='Enter First Name' />
<button onclick='getFirstName()'>Submit</button><br/>
<div id='welcome'></div>
<script>
	function getFirstName(){
		let name=document.getElementById("first").value;
		document.getElementById("welcome").innerHTML="Welcome, "+name;
	}
</script>

Explanation:

• In line(1), the input element is used, with a placeholder, to ask the user for their name
• In line(2), the button element is used to trigger the completion of input. Onclick, the button calls the getFirstName() function.
• In line(5), the getFirstName() function is created inside the script tags.
• Line(6) uses the value property of the document to access the input element, get its value and store it in a variable called name.
• Line(7) uses the document innerHTML property to output a message using the value obtained in line 5.

Window Input

Just like we use window.alert() for a pop-up output, JavaScript provides us with window.prompt() for pop-up input. The prompt method takes one parameter which is the question you are asking the user.

let name=window.prompt("Enter your first name:");
window.alert("Welcome, "+name);

The question (prompt) must be written in double quotes inside the parenthesis. Notice how the result of the question is stored in a variable that is then used in the alert output.

---

Prompting

One of the keys to gathering valid input from a user is to be very clear in what you are asking for. This is called a prompt. The more specific you are with a user, the better the input should be. For example, here are several versions of a programmer asking a user to input a year. Which versions are better?

1. Enter your birth year:
2. Enter the year your were born.
3. Enter your birth year as a four digit year.
4. What year were your born ?(yyyy)

---

Taking Numeric Input

ALL input in JavaScript comes in as a string. This means that if we ask a user for their age, the computer will see it as "16" (the string) not 16 (the number). So, if I take that age and add 5 to it, the computer sees "16"+5 and uses concatenation to get 165 instead of addition.

To fix this, if we are taking a number (integer or decimal) from a user that we intend to use in calculations, we need to "remove" the quotes from around the number and convert the string version to the numeric version. There are two methods to accomplish this:

• parseInt() - takes a stringified number and converts it to an integer
• parseFloat() - takes a stringified number and converts it to a decimal

let gpa=parseFloat(document.getElementById('gpa').value);
let offPerfect=4.0-gpa;
document.getElementById('output').innerHTML="You are "+offPerfect+" away from a perfect 4.0.";

Notice how the innerHTML request is set right into the parseFloat method in line(1). This allows use to take and convert the input in a single line of code.

Be careful that you know what type of input your users will enter. If there is a chance that they will enter a decimal, you should be using parseFloat as parseInt will simply cut the decimal off.

Using the above code as an example, if we used parseInt in line(1) instead of parseFloat, we could get incorrect output. If a user enters 3.45 into a parseInt, the value stored will be 3. The decimal value will be truncated (cut off). This will result in an output of being "1 away" from 4.0 instead of ".55 away" from perfect.

We can use these methods with window input as well:

var age=parseInt(window.prompt("Enter your age:"));