¿Por qué mi función solo se ejecuta una vez por carga de página?

Estoy escribiendo un script que hace un cálculo con entradas de texto en un formulario. Por alguna razón, mi cálculo se realiza solo una vez por carga de página. Tengo que actualizar la página para que la función vuelva a funcionar cuando presiono el botón "calcular".¿Por qué mi función solo se ejecuta una vez por carga de página?

Aquí está el código HTML para los botones de mi:

<input type="button" value="Calculate" onclick="calculate(high, low, common);" /> 
<input type="reset" /> 
<div id="result"></div>

Aquí es la función de cálculo (las variables se definen en otra parte):

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."; 
     } 
     } 
    };

estoy haciendo algo que previene la función de ejecutar más de una vez por carga de página?

Fuente

2012-08-16 hlh

¿De dónde viene 'high, low, common'? – j08691

el código funciona bien, si cambiamos los valores de estos tres valores. la producción está cambiando. puedes crear un jsfiddle de tu código – Abhishek

@Abhishek, aquí hay un violín de la página completa. Por alguna razón, mi programa no irá más allá de la primera instrucción if/else ahora también. http://jsfiddle.net/vdrwh/ – hlh

problema con su código es que sólo la creación de alta, baja , común primera vez que se carga la página. Estos valores permanecen iguales todo el tiempo.

Debe pasar sus valores en el evento onclick.

actualizó su - 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>

o simplemente puede obtener los valores de los elementos en ti función de llamada.

<!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 Puede ser que esto le ayudará.

Fuente

2012-08-17 05:24:41 Abhishek

para mí también, su código trabajaron si cambio de los valores máximo, mínimo y comunes, probar este método, es posible que funcione para usted

<input type="button" id="button" value="Calculate" /> 

var button = document.getElementById("button"); 
var high = document.getElementById("high").value; 
var low = document.getElementById("low").value; 
var common = document.getElementById("common").value; 
button.addEventListener(onclick, calculate(high, low, common));

Fuente

2012-08-16 16:52:40 Shreedhar

¿Por qué mi función solo se ejecuta una vez por carga de página?

Respuesta

Cuestiones relacionadas