给我的问题是
创建一个用户变量，并为其分配一个空数组文字。 创建一个displaySelectedUser箭头功能 创建一个letCalculateBMI箭头函数 创建加电UI箭头功能 在startApp函数中，调用powerupTheUI函数，然后调用fetchAndDisplayUsers函数。 第2步 在powerupTheUI函数中，仅使用DOM Selector API：
将displaySelectedUser设置为SELECT UI元素的更改事件侦听器。 将letCalculateBMI设置为#oracle按钮的点击事件侦听器 第三步 fetchAndDisplayUsers尝试调用一个不存在的displayUsers函数。让我们解决这个问题！
在fetchAndDisplayUsers函数上方创建一个displayUsers箭头函数。它应该带有一个用户参数 它应该使用数组.forEach函数遍历用户，并使用OPTION元素填充SELECT UI元素。每个OPTION的值均应设置为给定用户的ID，而其显示文本则应设置为用户名 我们可以在我们的应用中看到一个示例用户；来自尼日利亚的某个查尔斯·奥迪利（Charles Odili）！在fetchAndDisplayUsers中的users数组中添加一个新的用户对象（例如代表您自己）。随意不要使用实际数据值，但要确保ID与现有用户的ID不同。 步骤4 当我们从列表中选择样本用户时，什么也不会发生。让我们解决这个问题！
在displaySelectedUser上方创建一个getSelectedUser箭头功能。它应该带有一个userId参数，并在users集合上使用Array .find函数来查找并返回所选的用户对象。您的.find调用应采用一个内联箭头函数，并对其参数进行解构以获得id属性。 第5步 回想一下displaySelectedUser函数被称为事件处理程序。这意味着在触发DOM事件时它将接收一个事件对象。
更新displaySelectedUser函数，并将预期事件参数解构为仅目标属性。
接下来，displaySelectedUser应该调用具有目标的某个特定属性的getSelectedUser，该属性表示更改事件中SELECT元素的选定值。如果您不知道有问题的酒店，可以随时进行谷歌搜索。最后，将.getSelectedUser调用的结果分配给用户变量。
接下来，使用Object.keys（..）获取用户属性的集合。将其分配给属性变量。
使用数组.forEach函数遍历属性，然后在UI中显示属性。提示：*给定的属性，例如* Age，具有一个带有data-age-value属性的对应SPAN元素。您可以使用ES6模板字符串构建针对该属性的SPAN的查询选择器，然后使用它查询DOM。您还希望确保仅在DOM查询成功的情况下才更新UI。祝你好运！
我已经尽力编写了一些代码，但仍然有bug。
我写的代码如下；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Mini App</title>
<style>
div.user-photo {
margin: 1em auto;
}
body{
background-color: white;
}
div.details{
color:white;
background:#6200ee;
font-size:1.3em;
margin-top:4em;
padding-top:0.5em;
padding-bottom:0.5em;
padding-right:1em;
padding-left:1em;
border-radius:10px;
}
.details p{
margin:0.3em
}
div#outcome{
position:absolute;
right:2.2em;
bottom:6.5em;
width:100px;
text-align:center
}
#outcome h1{
padding:1em;
background: white;
border-radius:10%;
margin:0
}
#outcome p{
height:40px;
color:white;
border-bottom:5px solid white;
font-size:2em;
margin:0;
padding-top: 0.5em;
padding-bottom:0.5em;
padding-left:0;
padding-right:0;
}
#oracle{
margin-top:2.5em;
border: 1px solid;
width:100%;
}
div.select{
margin-bottom:2.5em
}
div.user-photo {
margin: 1em auto;
height:150px;
width:150px;
border-radius:50%;
overflow:hidden;
}
</style>
</head>
<body>
<button id="filter-query" class="mdc-icon-button material-icons">filter_list</button>
<div class="select">
<select class="select-text">
<option disabled="disabled" selected="selected">
Select User
</option>
</select>
</div>
<div class="user-photo">
<img src="https://via.placeholder.com/150" alt="Image" />
</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></p>
</div>
<script>
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);
for(const property of properties) {
const valueSpan = document
.querySelector(`.details span[data-${ property }-value]`)
if(valueSpan) {
valueSpan.innerText = user[property]
}
}
};
const letsCalculateBMI = () => {
}
const powerupTheUI = () => {
var selectElement = document.querySelector("select-text");
selectElement.addEventListener("change", displaySelectedUser);
var button = document.querySelector("#oracle");
button.addEventListener("click", letsCalculateBMI);
}
const displayUsers=(users)=>{
var parent = document.querySelector("select");
users.forEach((user) => {
var option = document.createElement("option");
option.textContent = user.name;
option.setAttribute("value", user.id);
parent.appendChild(option);
});
};
const fetchAndDisplayUsers = () => {
users.push({
age: 40,
weight: 75,
height: 6,
country: 'Nigeria',
name: 'Charles Odili',
id: 'dfhb454768DghtF'
});
users.push({
age:28,
weight:65,
height:5,
name:'Charlse Wembley',
country:'America',
id:'1aGRat5679fuhGH'
});
displayUsers(users);
};
const startApp = () => {
powerupTheUI();
fetchAndDisplayUsers();
};
startApp();
</script>
</body>
</html>
请，一个帮手应该帮助我复习一下，并帮助我摆脱挑战。