How do I build an event handler function that an `event` object when the dom is triggered

Question

So I have a list of user details of prop and values of an individual whereby for instance height is a prop and 169cm is the value.

displaySelectedUser is supposed to receive an event object when the DOM event is triggered, and is set in powerupTheUI as a change event listener. I have set getSelectedUser which finds the users by their Ids. I am using Object.keys() method to get the collection of properties of a user.

Now inside this displaySelectedUser function I am supposed to Iterate over properties with the array .forEach function, and display the properties in the UI. Whereby, for instance a given property like Age has a corresponding span element with a data-age-value attribute. I am recommended to use the ES6 template strings to build the query selector targeting the span for that property, and then query the DOM with it. I need to make sure I only update the UI if the DOM query was successful.

js

const users = [];

      const getSelectedUser = (userId) => {
        return users.find(({id}) => id === userId);
      };

      const displaySelectedUser = (event) => {
        const { target } = event;
        const user = getSelectedUser(target.value);
        const properties = Object.keys(user);
      };



      const letsCalculateBMI = () => {

      };

      const powerupTheUI = () => {
        const button = document.querySelector('#oracle');

        const select = document.querySelector('.select-text');

        select.addEventListener('change', displaySelectedUser);

        button.addEventListener('click',letsCalculateBMI);
      };      

      const displayUsers = (users) => {
        users.forEach(user => {
        const select = document.querySelector('.select-text');
        const option = document.createElement('option');

        option.text = user.name; 
        option.value = user.id;
        select.appendChild(option);
        });
      };


      const fetchAndDisplayUsers = () => {
        users.push(
          {
          age: 40,
          weight: 75,
          height: 6,
          country: 'Nigeria',
          name: 'Charles Odili',
          id: 'dfhb454768DghtF'
          },
          {
          age: 23,
          weight: 68,
          height: 6,
          country: 'Nigeria',
          name: 'Simpcy',
          id: 'gibberish'
          }
        );

        displayUsers(users);
      };

      const startApp = () => {
        powerupTheUI();
        fetchAndDisplayUsers();
      };

html

<div class="details mdc-elevation--z3">
      <p>
        <span class="prop" data-age>Age :</span>
        <span class="value" data-age-value>23 years</span>
      </p>
      <p>
        <span class="prop" data-height>Height :</span>
        <span class="value" data-height-value>169cm</span>
      </p>
      <p>
        <span class="prop" data-weight>Weight :</span>
        <span class="value" data-weight-value>68kg</span>
      </p>
      <p>
        <span class="prop" data-gender>Gender :</span>
        <span class="value" data-gender-value>Female</span>
      </p>
      <p>
        <span class="prop" data-country>Country :</span>
        <span class="value" data-country-value>Ghana</span>
      </p>
    </div>

Answer 1

If I understand your question correctly, then you can update display of a selected user's property values by constructing a query string to match the <span> corresponding to that property, and then selecting that element via the document.querySelector() method which in your case would be:

document.querySelector(`.details span[data-${ property }-value]`)

Once the <span> element of a user property has been acquired, you can the update it's innerText with the value of that key in the selected user object:

const displaySelectedUser = (event) => {
    const { target } = event;
    const user = getSelectedUser(target.value);
    const properties = Object.keys(user);

    /* Iterate each property of the user */
    for(const property of properties) {

        /* Query the document for a span element with the data attribute
        corresponding to this property */
        const valueSpan = document
        .querySelector(`.details span[data-${ property }-value]`)

        /* If span element found, update it's text with the value of 
        this user property */
        if(valueSpan) {
            valueSpan.innerText = user[property]
        }
    }
};

Hope that helps :-)