Simple Javascript question

Question

When I click on the button, the first time, everything works fine, but the second time, nothing happens. Why is that?

<form name="alert"><input type="text" name="hour"><input type="text" name="min"><input type="button" value="ok" onclick="budilnik(this.form)">

<script type="text/javascript">
function budilnik(form)
{

budilnik=1;
min=form.min.value;
hour=form.hour.value;
alert (min+' '+hour+' '+budilnik);

}
</script>

Answer 1

Change budilnik=1; to i_budilnik=1 or some other variable name .. by specifying budilnik=1; you are changing the definition from a function to a int val.

Alternatively you could try var budilnik=1; but not sure if that solves.

Answer 2

The variable budilnik is shadowing the function budilnik. Change the name of the variable, and your function should work right every time.

In more detail:

First, JavaScript sees budilink defined as a function. When budilnik is executed, the value of budilnik is overwritten with the integer 1. So the next time JavaScript is told to execute budilink, it tries to execute 1, instead of the function that was there before.

Answer 3

Learn to use Firebug. It'll help you immensely in the future.

budilnik=1;

This may sound crazy, but this is redefining the function budilnik to an integer, which breaks your form's onlick. If you preface this statement with keyword var, you will shadow the function but not overwrite it. When you do not specify the var keyword, variables are assumed to be global scope, which can cause issues (like this).

I used firebug to see that on the second click, "budilnik is not defined." If you had used this tool, you could have probably debugged this issue yourself.

Answer 4

Put the var keyword before your variable name.

I've tested the following code and it just works:

<form name="alert">
<input type="text" name="hour">
<input type="text" name="min">
<input type="button" value="ok" onclick="budilnik(this.form);">

<script type="text/javascript">
function budilnik(form)
{
    var budilnik=1;
    var min=form.min.value;
    var hour=form.hour.value;
    alert (min+' '+hour+' '+budilnik); 
}
</script>