javascript - Input values on click empty. Can someone explain why?

Question

I am trying to get inputs value but something is wrong. No error, just an empty value on click. Please see the code below. Could someone explain what is wrong?

let tipController = (() => {
  let DOMstring = {
    inputAmount: "#bill_amount",
    inputService: '#service_option',
    inputPeople: '#people'
  };
  return {
    getInput: () => {
      return {
        amount: parseInt(document.querySelector(DOMstring.inputAmount).value),
        service: document.querySelector(DOMstring.inputService).value,
        people: document.querySelector(DOMstring.inputPeople).value,
      }
    }
  })();

// APP CONTROLLER
let appCtrl = ((tipCtrl) => {

  let data = tipCtrl.getInput();
  let test = () => {
    console.log(data.amount);
    console.log(data.service);
    console.log(data.people);
  };

  document.querySelector('.submit').addEventListener('click', test);

})(tipController);

<input id="bill_amount" class="input" type="text" name="bill_amount">
<select class="input" id="service_option">
  <option value="">-- Pick an option --</option>
  <option value="exellent">Exellent</option>
  <option value="good">Good</option>
  <option value="ok">Ok</option>
  <option value="bad">Bad</option>
</select>
<input class="input" type="text" name='people' id='people' placeholder="Number of people">
<button type='submit' class='submit'>Calculate</button>

question from:https://stackoverflow.com/questions/65895466/input-values-on-click-empty-can-someone-explain-why

Answer 1

Waitting for answers