Question

我目前正在做此作业，它需要我使用数组.forEach()函数遍历变量，属性，并在UI中显示属性。提示：*给定的属性，例如* Age，具有一个带有data-age-value属性的对应SPAN元素。您可以使用ES6模板字符串构建针对该属性的SPAN的查询选择器，然后使用它查询DOM。您还希望确保仅在DOM查询成功的情况下才更新UI。这可以在displaySelectedUser() rrrr函数中完成。

ES6模板字符串似乎无法使用document.querySelector识别span标签。我曾尝试将ES6模板字符串仅应用于${props}元素，但无济于事

<script>
      const users = [];


      const computeBMI = ({weight,height,country}) => {


        const healthyCountries = ["Chad","Sierra Leone","Mali","Gambia","Uganda","Ghana","Senegal","Somalia","Ivory Coast","isreal"];

        const bmiRate = 0.82;      
        let heightInMeters = height * 0.3048;
        let BMI = weight / Math.pow(heightInMeters,2);
        if (healthyCountries.includes(country)) {
          BMI *= bmiRate;
        }
        return Number(BMI.toFixed(2));
      };


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


      const displaySelectedUser = ({target}) => {
        const user = getSelectedUser(target.value);

        const properties = Object.keys(user);

        properties.forEach(props => {


          const iterate = document.querySelector(`span[data-${props}-value]`);
          if(iterate !== ""){
            iterate.textContent = user[props];          
          }
        });
      };


      const letsCalculateBMI = () => {
        const query = document.querySelector('.select-text').value;
        const user = getSelectedUser(query);
        const bmi = computeBMI(user);
        document.querySelector('.bmi-text').textContent = bmi;

      };


      const powerupTheUI = () => {
        document.querySelector('.select-text').addEventListener('change', displaySelectedUser);

        document.querySelector('#oracle').addEventListener('click', letsCalculateBMI);
      };

      const displayUsers = (users) => {

        const select = document.querySelector('.select-text');
        users.forEach(user => {
          const option = document.createElement('option');
          option.value = user.id;
          option.textContent = user.name;
          select.appendChild(option);
        }); 
      };

      const fetchAndDisplayUsers = () => {
        users.push(
        {
          age: 40,
          weight: 75,
          height: 6,
          country: 'Nigeria',
          name: 'Charles Odili',
          id: 'dfhb454768DghtF'
        },
        {
          age: 26,
          weight: 80,
          height: 5.5,
          country: 'Mali',
          name: 'Mohammed Salah',
          id: 'jdks468654Galsh'
        }
        );

        displayUsers(users);
      };

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

      startApp();
</script>

// HTML代码

<body>
    <button id="filter-query" class="mdc-icon-button material-icons">filter_list</button>
    <div class="select">
      <select class="select-text">
        <option disabled selected>Select User</option>
      </select>
    </div>
    <div class="user-photo">
      <img src="" alt="User Photo">
    </div>
    <div class="details mdc-elevation--z3">
      <p><span class="prop" data-age>Age: </span>
        <span class="value" data-age-value></span></p>
      <p><span class="prop" data-height>Height: </span>
        <span class="value" data-height-value></span></p>
      <p><span class="prop" data-weight>Weight: </span>
        <span class="value" data-weight-value></span></p>
      <p><span class="prop" data-gender>Gender: </span>
        <span class="value" data-gender-value></span></p>
      <p><span class="prop" data-country>Country: </span>
        <span class="value" data-country-value></span></p>
    </div>

    <button id="oracle" class="mdc-button">Calculate BMI</button>

    <div id="outcome">
      <h1 class="mdc-typography--headline5">BMI</h1>
      <p class="bmi-text"></p>
    </div>
<body>

我期望的结果是querySelector使用ES6模板字符串来选择包含属性data-age-value，date-height-value，data-weight-value和{{1 }}，并使用data-country-value中的span循环将相应的年龄，身高，体重和国家/地区值写入相应的properties.forEach()标签中箭头功能。

如何使用displaySelectedUser函数中的数组.forEach函数遍历properties数组并在UI中显示属性

0 个答案: