I have an input in html and want to put the text of the input into an object on JS and display it on a

tag on html as a result. Because I didnt wanted to simplify the code, i tried to create a function (so that I can call it for each object attribute. <input type="text" placeholder="Typ" id="type-mhouse" /> Is the input.

const land = {
  Type: "",
  Adress: "",
  Value: "",
  updateValue: function (x, y, z) {
    this.x = document.getElementById(y).value;
    document.getElementById(z).textContent = this.x;
    console.log(this[0]);
  },
};

Is the JS.

<p class="ergebnis" id="ergtype-house"></p>

Is where the result is displayed.

The problem is: when I type for example "Flat" in the input, it displays properly on the html output, but the land.Type remains "".

Ive tried everything and I'm still very new to JS so I cant solve it. (Also I know that I shouldnt name stuff "Type" or "Value".. I'll change it.)

Thanks for any comment!

IMPORTANT Edit: The land object is used in a linked js file. The function is called inside the HTML on a button click:

<script>
        $(document).ready(function () {
          
          //Button on Modal
          $("#submit").click(function () {
           
            land.updateValue("Type", "type-mhouse", "ergtype-house");

          });
        });
      </script>

CodePudding user response：

I'm not sure to understand what you try to do but here is a solution to fix your issues.

const land = {
  type: "",
  address: "",
  value: "",
  updateValue: function(landAttributeName, textElementId, displayElementId) {
    this[landAttributeName] = document.getElementById(textElementId).value;
    document.getElementById(displayElementId).innerText = this[landAttributeName] || '';
  },
};

BTW, you're right, you should use names more easily understandable :-)

There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton