Menu
I'm writing a script that does a calculation with text inputs in a form. For some reason, my calculation is performed only once per page load. I have to refresh the page to get the function to run again when I press a "calculate" button.
Here's the HTML for my buttons:
<input type="button" value="Calculate" onclick="calculate(high, low, common);" />
<input type="reset" />
<div id="result"></div>
Here is the calculate function (the variables are defined elsewhere):
var calculate = function (high, low, common) {
if (high.length < 1 || low.length < 1 || common.length <1) {
document.getElementById('result').innerHTML="Please enter a number for all fields.";
} else {
if ((high - common) > (common - low)) {
document.getElementById('result').innerHTML="Result 1.";
} else if ((common - low) > (high - common)) {
document.getElementById('result').innerHTML="Result 2.";
} else if ((common - low) === (high - common)) {
document.getElementById('result').innerHTML="Result 3.";
}
}
};
Am I doing something that prevents the function from running more than once per page load?
915
Problem with your code is that you just setting high, low, common 1st time the page is loaded. These values remain same all the time.
You should pass your values in onclick event.
Updated your - jsfiddle
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset = "UTF-8" />
</head>
<body>
<h1>Calculator</h1>
<!--Form forvalue inputs-->
<form>
<label for="highRi">Highest:</label><input type ="text" id="highRi" />
<label for="lowRi">Lowest:</label><input type="text" id="lowRi" />
<label for="comm">Common Point:</label><input type ="text" id="comm" />
<!--Clicking the button should run the calculate() function-->
<input type="button" value="Calculate" onclick="calculate(document.getElementById('highRi').value, document.getElementById('lowRi').value, document.getElementById('comm').value);" />
<input type="reset" />
<!--Div will populate with result after calculation is performed-->
<div id="result"></div>
</form>
<script type="text/javascript">
var calculate = function (high, low, common) {
if (high.length < 1 || low.length < 1 || common.length <1) {
document.getElementById('result').innerHTML="Please enter a number for all fields.";
} else {
if ((high - common) > (common - low)) {
document.getElementById('result').innerHTML="Result 1.";
} else if ((common - low) > (high - common)) {
document.getElementById('result').innerHTML="Result 2.";
} else if ((common - low) === (high - common)) {
document.getElementById('result').innerHTML="Result 3.";
}
}
};
</script>
</body>
</html>
Or you can simply get those element values in you function call.
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset = "UTF-8" />
</head>
<body>
<h1>Calculator</h1>
<!--Form forvalue inputs-->
<form>
<label for="highRi">Highest:</label><input type ="text" id="highRi" />
<label for="lowRi">Lowest:</label><input type="text" id="lowRi" />
<label for="comm">Common Point:</label><input type ="text" id="comm" />
<!--Clicking the button should run the calculate() function-->
<input type="button" value="Calculate" onclick="calculate();" />
<input type="reset" />
<!--Div will populate with result after calculation is performed-->
<div id="result"></div>
</form>
<script type="text/javascript">
var calculate = function () {
var high = document.getElementById('highRi').value;
var low = document.getElementById('lowRi').value
var common = document.getElementById('comm').value
if (high.length < 1 || low.length < 1 || common.length <1) {
document.getElementById('result').innerHTML="Please enter a number for all fields.";
} else {
if ((high - common) > (common - low)) {
document.getElementById('result').innerHTML="Result 1.";
} else if ((common - low) > (high - common)) {
document.getElementById('result').innerHTML="Result 2.";
} else if ((common - low) === (high - common)) {
document.getElementById('result').innerHTML="Result 3.";
}
}
};
</script>
Jsfiddle See it working May be this will help you.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
