仅在按钮点击时修改表单内div的display属性技术咨询

嘿，我看了你的代码，发现几个关键问题导致你没法实现预期效果，下面一步步帮你修复并达成需求：

1. 先修复事件绑定的错误 #

你当前JavaScript里的事件监听写法有问题：

btn.addEventListener('click', getUserData());

这里的getUserData()是直接调用了函数，而不是把函数作为事件处理逻辑传递给监听方法。正确的写法应该去掉括号，只传函数引用：

btn.addEventListener('click', getUserData);

另外，你的HTML按钮上还写了onclick="getUserData()"，这会导致点击按钮时函数被触发两次，建议删掉这个内联绑定，保留addEventListener的方式，后续维护和调试会更方便。

2. 实现点击按钮切换目标div的显示状态 #

根据你的描述，目标div默认是display:none，需要在按钮点击时修改它的display属性。我假设你要么是想显示一个原本隐藏的结果区，要么是想切换表单容器的显示状态，下面给出完整的修正代码：

修正后的完整代码 #

HTML部分（新增默认隐藏的结果div）：

<form id="dino-compare">
  <div class="form-container">
    <p>Name:</p>
    <input id="name" class="form-field__full" type="text" name="name"> <!-- 这里type应该是text，HTML没有name类型的input -->
    <p>Height</p>
    <label>Feet: <input id="feet" class="form-field__short" type="number" name="feet"></label>
    <label>inches: <input id="inches" class="form-field__short" type="number" name="inches"></label>
    <p>Weight:</p>
    <label><input id="weight" class="form-field__full" type="number" name="weight">lbs</label>
    <p>Diet:</p>
    <select id="diet" class="form-field__full" name="diet">
      <option>Herbavor</option>
      <option>Omnivor</option>
      <option>Carnivor</option>
    </select>
    <div id="btn">Compare Me!</div> <!-- 删掉内联onclick -->
  </div>
  <!-- 新增默认隐藏的结果展示区 -->
  <div id="result-area" style="display: none;">
    表单已提交，这里是结果展示内容
  </div>
</form>

JavaScript部分：

const btn = document.getElementById('btn');
const userData = {};

function getUserData() {
  // 先获取所有表单数据
  const name = document.getElementById('name').value;
  const feet = document.getElementById('feet').value;
  const inches = document.getElementById('inches').value;
  const weight = document.getElementById('weight').value; // 你之前漏了获取weight的值
  const diet = document.getElementById('diet').value;
  
  // 把数据存到userData对象里
  Object.assign(userData, { name, feet, inches, weight, diet });
  console.log('获取到的用户数据:', userData);
  
  // 修改目标div的display属性，从none改为block（或者你需要的flex/inline等）
  const resultArea = document.getElementById('result-area');
  resultArea.style.display = 'block';
  
  // 如果你的需求是隐藏表单容器，也可以在这里加这行代码
  // document.querySelector('.form-container').style.display = 'none';
}

// 正确绑定点击事件
btn.addEventListener('click', getUserData);

3. 几个细节优化提示 #

• 你原来的input写了type="name"，这是错误的，HTML里没有这个类型，应该改成type="text"。
• 之前的代码漏了获取weight输入框的值，我已经补充上了。
• 如果你习惯用CSS类来控制显示隐藏，可以给目标div加个hide类（设置display:none），然后点击时用resultArea.classList.remove('hide')来切换，这样更符合模块化的CSS写法，比直接修改style更灵活。

这样修改后，点击按钮时就会触发函数，先获取表单数据，再把原本隐藏的div显示出来，完美实现你“仅在按钮点击时改变div的display属性”的需求～

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