求助：JavaScript函数点击按钮后无法显示消息

你的代码其实就几个小细节没处理对，咱们一步步捋清楚：

核心问题拆解 #

• 操作input元素的方式错了：你用document.getElementById("name").innerHTML来操作输入框的内容，但<input>是自闭合标签，它的输入文本是存在value属性里的，innerHTML是用来修改元素内部的HTML内容，对输入框完全不适用哦。
• 逻辑搞反了：你现在的代码是把greeting赋值给输入框，而不是把消息显示到右边的结果区域（.result）里，这当然看不到效果啦！
• 变量声明不规范：greeting没加var/let/const，会不小心变成全局变量，虽然当前不影响功能，但这是容易踩坑的坏习惯。

修复后的完整代码 #

修正后的JavaScript #

function calc() {
  // 规范声明变量
  const greeting = "hello";
  // 正确获取输入框的内容
  const userName = document.getElementById("name").value;
  // 把消息插入到结果展示区
  const resultArea = document.querySelector(".result");
  // 这里用+=是追加消息，要是想每次点击覆盖之前的，改成=就行
  resultArea.innerHTML += `<p>${greeting}, ${userName}!</p>`;
}

对应的HTML（只需要保证结果区域存在，其他不用改） #

<header> 
  <p> BMI Calculator</p> 
</header>
<div class="grid">
  <div class="input">
    <form>
      <p> Fill in the form below</p>
      Name: <br>
      <input type="text" name="name" id="name"><br>
      Weight: <br>
      <input type="number" name="weight"><br>
      Height: <br>
      <input type="number" name="height"><br>
      <input type="radio" name="gender" value="female">Female
      <input type="radio" name="gender" value="male">Male
      <input type="radio" name="gender" value="other">Other<br>
      <br><input type="button" onclick="calc()" name="calculate" value="calculate">
    </form>
  </div>
  <div class="result">
    <p> Your Results</p>
  </div>
</div>

小提示 #

等你搞定这个显示消息的功能后，后续做BMI计算也很简单：只需要在calc函数里用同样的方式获取weight和height的value，然后用公式体重(kg) / (身高(m)的平方)计算，最后把结果插入到.result区域就好啦～

内容的提问来源于stack exchange，提问作者kriloots