javascript - 如何从 HTML 元素获取选定值并将该值传递给函数调用，

Question

我正在构建一个应用程序，该应用程序应该根据用户的体重、高度和国家/地区来计算用户的BMI。

因此，在我的 letsCalculateBMI 箭头函数中，我需要让它从 select 元素和同一 letsCalculateBMI 内获取所选值函数将该值传递给 getSelectedUser 函数调用，该函数调用应返回所选值的用户对象。应将此用户对象分配给用户变量。

概括地说，这个letsCalculateBMI函数应该实现的就是计算用户的BMI。它应该通过调用 computeBMI 并向其传递 user 来完成此操作。然后，它将调用 computeBMI 的返回值设置为 bmi 变量，该变量最终设置为 #outcome 中 PARAGRAPH 的文本内容DIV

这是一个link

index.js

const users = [];

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

      const featToMeter = 0.3048;

      const bmiCountryRatio = 0.82;

      const computeBMI = ({weight, height, country}) => {
        const heightInMeters = height * featToMeter;
        let BMI = weight / (heightInMeters^2);

       if (countriesWithLowerBmi.includes(country)) 
         BMI *= bmiCountryRatio;

       return Math.round(BMI, 2);
      };

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


      const letsCalculateBMI = () => {

        const value = document.querySelector('.select-text').value;
        const user =getSelectedUser(target.value);      

        const bmi = computeBMI(user);

        document.querySelector('.bmi-text').innerHTML = bmi
      };

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

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

        select.addEventListener('change', displaySelectedUser);

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

index.html

<div class="select">
      <select class="select-text">
        <option disabled selected>Select User</option>        
      </select>
    </div>

    <div class="user-photo">
      <img src="https://via.placeholder.com/200" alt="Placeholder" >
    </div>

    <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>Nigerian</span>
      </p>
    </div>

    <button id="oracle" class="mdc-button">Calculate BMI</button>
    <div id="outcome">
      <h5 class="mdc-typography--headline5" >
        BMI
      </h5>
      <p></p> //This is the P element      
    </div>

Answer 1

您提供的代码不是 minimal, complete and verifiable example所以很难在它的基础上进行构建，但要点基本上是 <input> , <select>和其他表单元素，您可以使用 .value 访问它们的值属性(property)。请注意，该值始终是字符串，因此对于数字，您必须先将其转换以避免错误(例如在字符串值前面添加 +)。

一旦获得了国家、体重和高度的值，就可以简单地进行 JS 端编程了。这是一个快速的 BMI 计算器:

const computeBMI = () => {
  let country = document.querySelector('#country').value;
  let weight = +document.querySelector('#weight').value;
  let height = +document.querySelector('#height').value;
  let bmi = weight / (height^2);
  document.querySelector('#result').innerHTML = bmi;
}

<p>
  Country:
  <select id="country">
    <option value="usa">USA</option>
    <option value="other">Rest of the world</option>
  </select>
</p>
<p>
  Weight:
  <input id="weight" type="number" value="0">
  (in kg)
</p>
<p>
  Height:
  <input id="height" type="number" value="0">
  (in m)
</p>
<p>
  Your BMI is <span id="result">(not computed yet)</span>
  <button onclick="computeBMI()">Compute BMI</button>
</p>