Function returns 0 value even though it has a different number stored in it

January 14, 2022

I’m trying to return a value from a function so that it is displayed in HTML. It returns 0 on the HTML but it returns the correct input value on the alert message inside the function. Here is the code I have:

<body>
  <p>Number of bags: </p>
  <input type="number" id="numBagInputId">
  <input type="submit" id="numBagSubmitId" onClick="myFunction()">
  <p>You will need: </p> 
  <p id="bags"></p>
  <p>grams.</p>
            
<script>
   function myFunction() {
    let dryAmount = document.getElementById("numBagInputId").value * 921;
    alert (dryAmount);
    return dryAmount;
}
        
    let bagTotal = myFunction();
    document.getElementById("bags").innerHTML = bagTotal;
</script>
</body>

>Solution :

Since you haven’t defined any event listener methods, myFunction() is called first. However, the value 0 is returned because data has not yet been entered into the <input> element. To prevent this, I assigned a value to the value attribute of the <input> element. The event listener method of the <input> element is used to update the value within the program.

const inputElement = document.getElementById('numBagInputId');

function myFunction() {
  let dryAmount = inputElement.value * 921;
  console.log(`Result: ${dryAmount}`)
  return dryAmount;
}

function update(){
  let bagTotal = myFunction();
  document.getElementById("bags").innerHTML = bagTotal + " this is the bag total value";
}

inputElement.addEventListener('input', function(){
  update();
});

update();

<p>Number of bags: </p>

<!-- The value attribute is assigned a default value. -->
<input type="number" id="numBagInputId" value="10">

<input type="submit" id="numBagSubmitId" onClick="myFunction()">
<p>You will need: </p> 
<p id="bags"></p>
<span>grams</span>