html - Javascript button not working with function -


i can't figure out why function not working. assignment instructions call javascript function code in it's own javascript file.

here html

<h2>bmi calculator</h2>    <form>      <input type="text" id="weight" value="0" />      <label for="weight">weight in pounds</label>      <input type="text" id="height" value="0" />      <label for="height">height in inches</label>      <input type="text" id="result" value="0" />      <label for="result"> bmi result </label>      <input type="submit" id="submit" value="calculate bmi" />     </form> 

here function based on form. it's supposed calculate bmi.

function calcbmi() {     var weight = parseint(document.getelementbyid("weight").value);     var height = parseint(document.getelementbyid("height").value);     var result = (weight * 703) / (height * height);     var textbox = document.getelementbyid('result').value;      textbox.value = result; }  document.getelementbyid("submit").addeventlistener("click", calcbmi, false); 

3 things:

  1. getelementbyid must in camel case. not capital d's @ end

  2. reference textbox should var textbox = document.getelementbyid('result') , not .value @ end.

  3. button's type should button otherwise form being posted.

your working example:

function calcbmi() {      var weight = parseint(document.getelementbyid("weight").value);      var height = parseint(document.getelementbyid("height").value);      var result = (weight * 703) / (height * height);      var textbox = document.getelementbyid('result');      textbox.value = result;  }    document.getelementbyid("submit").addeventlistener("click", calcbmi, false);
<h2>bmi calculator</h2>    <form>    <input type="text" id="weight" value="0" />    <label for="weight">weight in pounds</label>    <input type="text" id="height" value="0" />    <label for="height">height in inches</label>    <input type="text" id="result" value="0" />    <label for="result"> bmi result </label>    <input type="button" id="submit" value="calculate bmi" />  </form>


Comments

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -