title: Getting the value from <input> element in typescript
body: <p>I'm currently trying to get the values a user would insert into an input form. In vanilla javascript, I can just target the element by id or class, etc, and then I can just use the .value method to actually get in use that method. For some reason, typescript cannot do that, which I do not understand because typescript is a superset of javascript. Is there a specific way to get a value from an input element in pure typescript or do I have to use angular or something? </p>
  
  <p>Typescript code:</p>
  
  <pre><code>interface IUserFoodOptions {
      food: string;
      calories: number;
      foodDate: any;
  }
  
  class Food implements IUserFoodOptions {
      food: string;
      calories: number;
      foodDate: any;
  
      // store all the calories in an array and calculate the total amount of calories
      caloriesArray: number[] = [];
  
      // constructor
      constructor(food: string, calories: number, foodDate: any) {
          this.food = food;
          this.calories = calories;
          this.foodDate = foodDate;
      }
  }
  
  // event listener for when the add food button is clicked
  let addFood = document.getElementById("add-food-button").addEventListener("click", () =&gt; {
      // get the values from inputs and store them in an array
      let foodName = document.getElementById("food-name-val");
      let foodCalories = document.getElementById("calories-val");
      let dateVal = document.getElementById("date-val");
  
      // store these values in a list and display them below
      // user will have the ability to edit and delete them
      // am I create event listeners within event listeners
  });
  </code></pre>