点击Calculate按钮时如何让genbutton与calculate函数同时生效？

给一个按钮绑定两个函数，单独运行时两个函数都正常工作，但尝试通过onclick、addEventListener或者合并函数的方式让它们一起执行时，只有calculate函数生效，genbutton完全没反应。怎么实现点击Calculate按钮时，两个函数都能正常运行？

你的代码里HTML存在语法错误：<span id="b5" </span>这一行缺少闭合的>，导致浏览器解析DOM结构时出现错乱，explainbutton元素可能无法被正确获取，最终使得genbutton里修改按钮可见性的代码失效。你可以打开浏览器控制台，大概率能看到Cannot set properties of null这类报错，这就是元素未被正确获取的典型表现。

1. 先修复HTML里的span标签错误，把<span id="b5" </span>改成<span id="b5"></span>
2. 你当前用addEventListener绑定点击事件的写法本身是正确的，修复DOM结构后，两个函数就能依次执行。

修改后的完整代码 #

HTML #

<div id="b1">
  <span id="sp1">
    WEIGHT(kg) :
  </span>
  <input type="number" id="b2">
</div>
<br>
<div id="b9">
  <span id="sp2">
    HEIGHT(m) :
  </span>
  <input type="number" id="b3">
</div>
<br>

<div id="bmibox">
  BMI :
  <span id="b5"></span>
  <input type="button" value="What does this mean?" class="styled-button-2" id="explainbutton">
</div>

<br>
<br>
<div id="b6">
  <input type="button" value="Calculate" class="styled-button-2" id="b7">
  <button id="b8">Clear</button>
</div>

JavaScript #

const generatebutton = document.getElementById("explainbutton");
const wt = document.getElementById("b2");
const ht = document.getElementById("b3");
const bmi = document.getElementById("b5");
const calc = document.getElementById("b7");
const clr = document.getElementById("b8");

// 计算BMI函数
function calculate() {
  console.log(`running calculate`);
  const weight = wt.value;
  const height = ht.value;
  // 加个简单判断，避免空值或非数值导致计算异常
  if (!weight || !height || isNaN(weight) || isNaN(height)) return;
  const solve = Number.parseFloat(weight / height ** 2).toFixed(2);
  bmi.textContent = solve;
};

// 显示解释按钮函数
function genbutton () {
  console.log(`running genbutton`);
  generatebutton.style.visibility = "visible";
};

// 点击Calculate按钮触发两个函数
calc.addEventListener("click", function(){
  calculate();
  genbutton();
});

CSS #

#explainbutton {
  visibility: hidden;
  margin-left: 190px;
}

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