I want to add two functions to a button, but only one function runs

February 27, 2024

The two functions work fine separately, but when I try to run them together using onclick in the HTML or AddEventListner or by creating a combined function of the two function, only the calculate function works.

How do I make the genbutton function also work when calculate is clicked?

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");

// // calculate bmi funtion
function calculate() {
  console.log(`running calculate`);
  const wt = document.getElementById("b2").value;
  const ht = document.getElementById("b3").value;
  const solve = Number.parseFloat(wt / ht ** 2).toFixed(2);
  document.getElementById("b5").textContent = solve;
};

// function make explain button appear 

function genbutton () {
  console.log(`running genbutton`);
  generatebutton.style.visibility = "visible";
};

//activate both functions in one click
calc.addEventListener("click", function(){
     calculate();
     genbutton();
});

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

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

<div id="bmibox">
  BMI :
  <span id="b5" </span>
    <INPUT TYPE="BUTTON" VALUE="What does this mean?" class="styled-button-2" id="explainbutton"> </b>
    

</div>

<br>
<br>
<div id="b6">
  <INPUT TYPE="BUTTON" VALUE="Calculate" class="styled-button-2" id="b7">
  <button id="b8">Clear</button>
</div>

>Solution :

JS is fine as the comments have said, correct the HTML tags (close the input tags and remove the isolated tags with no pair). Works as needed.

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");

// // calculate bmi funtion
function calculate() {
  const wt = document.getElementById("b2").value;
  const ht = document.getElementById("b3").value;
  const solve = Number.parseFloat(wt / ht ** 2).toFixed(2);
  document.getElementById("b5").textContent = solve;
};

// function make explain button appear 

function genbutton () {
  generatebutton.style.visibility = "visible";
};

//activate both functions in one click
calc.addEventListener("click", function(){
     calculate();
     genbutton();
});

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

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