Inputs

We’ll cycle back to inputs at a later class date, but here’s the quick basics of inputs.

We’ll be working with two basic kinds of inputs throughout much of this class.

Text Inputs

The first is this, boring, textual input:

<input id="txtPuppies" />

To get a reference to this input in our javascript, we would then write this

var txtPuppies = document.getElementById("txtPuppies");

To get the text that a user has typed into that input, we would use the .value property of the reference.

var txtPuppies = document.querySelector("#txtPuppies");

console.log(txtPuppies.value);//whatever is

Buttons

A second ‘input’ we will use with startling regularity is the button.

<input id="btnDosomething" type="button" value="Click here if you dare!"/>

TO respond to clicks, we would then write this code

document.querySelector("#btnDosomething").onclick = function() {
	console.log("You clicked it, didn't you?");
}

Resetting Inputs

Sometimes its helpful to remove the text inside an input. Here is how one goes about “resetting” an input.

<input id="txtPuppies" />

var txtPuppies = document.querySelector("#txtPuppies");

txtPuppies.value = ""; //sets the text inside of txtPuppies to.. nothing.