JavaScript - Object cannot access the value of input

Question

HTML part

      <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 part

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

whenever the object returns and i display it in the console it doesn't read any value from the input box and displays nothing

ex output in console --> {type: "inc", description: "", value: ""}

it only read the inc which is specified in the select type but not the input values

any idea why this is happening ? it should work according to me.

Are you calling that code after any user input or only once when the page is loaded? — VLAZ
– VLAZ, Commented Sep 13, 2019 at 15:49
As @VLAZ asked, when are you trying to capture these values? — EternalHour
– EternalHour, Commented Sep 13, 2019 at 16:14
i have set a event listener for add_btn to read whatever value i am giving in the input. So like im trying to input again and again whenever i press the button but everytime it just doesnt read any vlaues. — rudy7
– rudy7, Commented Sep 14, 2019 at 13:06

Igor · Accepted Answer · 2019-09-13 15:56:43Z

1

Values from inputs (and select) are read only once - during object construction. Make them into properties with getters.

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>

edited Sep 13, 2019 at 15:56

answered Sep 13, 2019 at 15:50

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript - Object cannot access the value of input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related