Why is input field not getting cleared

Question

I have a function which gets input from a set of input field and stores them as an object like this:

getinput:function () {
  return{
    type:document.querySelector(domstring.type).value,
    description:document.querySelector(domstring.description).value,
    value:document.querySelector(domstring.value).value,
    heading:document.querySelector(domstring.heading).innerHTML,
  }
},

Here domstring is another object which contains the class names of the target fields. Now I wrote a clearfields function and what I am trying to do is to access the type object which is a document.querySelector(domstring.type).value and set it to "" so that value is cleared.Here the base iife is called UIcontroller hence I am accessing as UIcontroller.getinput().description so UIcontroller looks like this :

var UIcontroller=(function (){
domstring={
  type:'.add__type',
  description:'.add__description',
  value:'.add__value',
  add__btn:".add__btn",
  heading:".icome__title",
  income_section:".income__list",
  expense_section:".expenses__list"
}
return{
  getinput:function () {
      return{
        type:document.querySelector(domstring.type).value,
        description:document.querySelector(domstring.description).value,
        value:document.querySelector(domstring.value).value,
        heading:document.querySelector(domstring.heading).innerHTML,
      }
    },
  getdom:function () {
    return domstring

  },
  display:function (r,type) {
    var html,newHTML,element;
    if (type=='inc') {
      element=domstring.income_section;
      html="<div class='item clearfix' id='income-0'><div class='item__description'>%description%</div><div class='right clearfix'><div class='item__value'>%valu%</div><div class='item__delete'><button class='item__delete--btn'><i class='ion-ios-close-outline'></i></button></div></div></div>";

    }
    else {
      element=domstring.expense_section;
      html="<div class='item clearfix' id='income-0'><div class='item__description'>%description%</div><div class='right clearfix'><div class='item__value'>%valu%</div><div class='item__delete'><button class='item__delete--btn'><i class='ion-ios-close-outline'></i></button></div></div></div>";
    }
    newHTML=html.replace("%description%",r.description);
    newHTML=newHTML.replace("%valu%",r.valu);
    document.querySelector(element).insertAdjacentHTML('beforeend',newHTML);

  },
  clearfields:function () {
    console.log("Clear");
    UIcontroller.getinput().description="";
    console.log(UIcontroller.getinput().description);
    document.querySelector(domstring.value).value="";
  }

}


})();

I tried the following way:

clearfields:function () {
console.log("Clear");

//first one
UIcontroller.getinput().description="";

//second one
document.querySelector(domstring.value).value="";

} I understand that first one and second one are basically the same right but first one does not set to blank however second one works fine. Can somebody explain.

that is the iife function like a self executing function.clear and getinput are the return objects — leo, Apr 19 '18 at 19:59
Setting `description` would not be the same as setting an input's `value` property as they are not referencing the same thing. — Patrick Evans, Apr 19 '18 at 20:00
Are you saying `UIcontroller` is an IIFE? I don't see an IIFE in your code. When you call `getinput()` you would be invoking that function. IIFE invokes immediately. — adprocas, Apr 19 '18 at 20:03
I still don't see an IIFE - they end with `();`. Either way, you have your answer in what Patrick Evans said. -- oh, now I see it. You didn't have it there a moment ago. — adprocas, Apr 19 '18 at 20:05
It doesn't matter if this is an example. `description` or whatever is the real code has no ties to `input.value`, you simply are copying a primitive value to another property in the `getinput()` function, changing one doesn't change the other — Patrick Evans, Apr 19 '18 at 20:06
Please edit your code to be more readable. It hurts my eyes. — adprocas, Apr 19 '18 at 20:06
Ok, as @PatrickEvans said, `description` is the value of the `value` of the element in question. It is not bound to that object. So, changing the value of `description` will not change the `value` of the element you got the value of `description` from. Carefully take a look at which value and `value` I am referring to. — adprocas, Apr 19 '18 at 20:10
What I am saying is that description points to the value in the input field using the queryselector().value right.So technically that is equivalent to document.querySelector(domstring.description).value isn't it — leo, Apr 19 '18 at 20:14
No, it is not pointing to the input field's `value`, it holds a copy of that string value. There is no binding going on, ie changing one does not change the other. This Q/A post might help: [Primitive Value vs Reference Value](https://stackoverflow.com/questions/13266616/primitive-value-vs-reference-value) — Patrick Evans, Apr 19 '18 at 20:19
Is there any way I could access this way using UIController IIFE ? without using the document.queryselector directly — leo, Apr 19 '18 at 20:22
you could just do `description:document.querySelector(domstring.description)` and then when you need to set the value, `getinput().description.value = ""` as `description` would then hold a reference to the input element, instead of just a primitive value. You would also have to read the value by doing `getinput().description.value` instead of just `getinput().description` — Patrick Evans, Apr 19 '18 at 22:01

Why is input field not getting cleared

0 Answers0