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:
getelementbyidmust in camel case. not capital d's @ endreference textbox should
var textbox = document.getelementbyid('result'), not.value@ end.button's type should
buttonotherwise 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
Post a Comment