JavaScript - 对象无法访问输入的值

Question

HTML 部分

      <select class="data_type">
         <option value="inc" selected>+</option>
         <option value="exp" >-</option>
      </select>

      <div>
          <input type="text" placeholder="description" class="data_description">
          <input type="number" placeholder="value" class="data_value">
          <button class="add_btn">Add value</button>
      </div>

javascript部分

var uiController = (function() {
    return { 
             inputVal : {
                          type:document.querySelector('.data_type').value,
                          description: document.querySelector('.data_description').value,
                          value:document.querySelector('.data_value').value
             } 
    };
})();

每当对象返回并且我在控制台中显示它时，它不会从输入框中读取任何值并且不显示任何内容

控制台中的 ex 输出 --> {type: "inc", description: "", value: ""}

它只读取在选择类型中指定的 inc 而不是输入值

知道为什么会这样吗？它应该根据我的工作。

Answer 1

来自输入(和选择)的值只被读取一次——在对象构造期间。使用 getter 将它们变成属性。

var uiController = (function() {

  return {
    inputVal: {
      get type() { return document.querySelector('.data_type').value; },
      get description() { return document.querySelector('.data_description').value; },
      get value() { return document.querySelector('.data_value').value; }

    }
  };

})();

console.log(uiController);

function show_uiController() {
  console.log(uiController);
}

<select class="data_type">
  <option value="inc" selected>+</option>
  <option value="exp">-</option>
</select>

<div>
  <input type="text" placeholder="description" class="data_description">
  <input type="number" placeholder="value" class="data_value">
  <button class="add_btn">Add value</button>
</div>

<button onclick="show_uiController()">Show uiController</button>