TypeScript - Form Controls

In this example, let's grab each type of form control and capture it's value.

let output: string = "";
let demo: HTMLElement = <HTMLElement>document.getElementById("demo");

// drop down
let colorsList: HTMLSelectElement = <HTMLSelectElement>document.getElementById("ColorList");
output += `Color value: ${colorsList.value}, Color text: ${colorsList.selectedOptions[0].text}
`;

// text box
let nameText: HTMLInputElement = <HTMLInputElement>document.getElementById("NameText");
output += `Name: ${nameText.value}<br />`;

// checkbox
let checkbox1Checkbox: HTMLInputElement = <HTMLInputElement>document.getElementById("CheckBox1");
output += `CheckMe checked?: ${checkbox1Checkbox.checked}<br />`;

// radios
// This was a little challenging in ts.
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
// https://stackoverflow.com/questions/9561625/checking-value-of-radio-button-group-via-javascript

let radioSelection: HTMLInputElement | null =
document.querySelector('input[name="RadioGroup1"]:checked');
output += `Selected Radio: ${radioSelection!.value}<br />`;

// results
demo.innerHTML = output;