Javascript function cannot be executed twice

Question

I'm kind of new to Javascript and I've bee wondering for hours how to solve my problem. I have a litle function associated to a button. It work once but I cannot get it to execute after the first time.

function CheckEmpty1(){return "false";}

function Generate(){    
    if(CheckEmpty1() == "true"){
        alert("Please fill all mandatory field.\n\nAll missing field are  black colored.\n\nPlease also make sure to make a choice for all radio button.");
    }
    else{
        document.getElementById('TemplateOutput').style.display = "block";
        lol = "lol";
        document.getElementById('TemplateOutput').value = lol;
        lol = "test2";
    }
    return;
}

"TemplateOutput" is a simple textarea centered in the browser. The code is originally more complicated than that but while doing the test to ensure the problem was not coming from somewhere else, it reduced to that but still doesn't work.

The second "lol = "test2";" is just to check that if I make a change to the variable, it is suposed to apply the second time I hit the button.

it seems to be basic for me but I can't figure out why... any help?

thanks.

EDIT:

I think I found the source of my error in my original script. My original code look like this:

function Output(){
    Output = "CSD Troubleshooting: " + Troubleshoot + "\n";
    return Output;
}

function Generate(){
    FillVars();

    GenerateOutput = Output();
    alert(GenerateOutput);

}
function FillVars(){
    Troubleshoot = document.getElementById('Troubleshoot').value;
}

I reduced it to the minimum but it still behave the same way.

The problem is coming from the Output() function because it work fine if I do it like this:

GenerateOutput = document.getElementById('Troubleshoot').value;
alert(GenerateOutput);

or

GenerateOutput = Troubleshoot;
alert(GenerateOutput);

BEHAVIOR: I click the button. The alert is filling like it is suposed to be. The second time I click the button, it just do nothing.

regards,

Not related, but for the first occurrence of lol, make it var lol so as to not create a global variable on accident. — ndugger
– ndugger, Commented Jun 3, 2014 at 12:41
What do you expect the second time? If the display and value are already set, what would setting them again to the same values do ? — adeneo
– adeneo, Commented Jun 3, 2014 at 12:41
@karthik: what's invalid about it; the returned value will simply be undefined. — David Thomas
– David Thomas, Commented Jun 3, 2014 at 12:43

T.J. Crowder · Accepted Answer · 2014-06-03 14:04:45Z

1

Updated Answer:

Your edit changes things markedly. The central issue is here:

function Output(){
    Output = "CSD Troubleshooting: " + Troubleshoot + "\n";
    return Output;
}

The first time you run that function, you replace the function with a string. The Output symbol is a reference to the function.

It looks like you might have a Visual Basic background. In JavaScript, you simply do this:

function Output(){
    return "CSD Troubleshooting: " + Troubleshoot + "\n";
}

or if you want it in a variable first, declare the variable (with var) and probably to avoid confusion use a different name:

function Output(){
    var result = "CSD Troubleshooting: " + Troubleshoot + "\n";
    return result;
}

Original Answer:

The second "lol = "test2";" is just to check that if I make a change to the variable, it is suposed to apply the second time I hit the button.

It won't, because your previous

lol = "lol";

...line runs, setting it back to "lol". You'll never see the code put "test2" into the input.

The line

document.getElementById('TemplateOutput').value = lol;

copies the value from lol to the value property. It does not make the value property a reference to the variable lol. Changing the variable later has no effect, because there is no continuing link between it and the value property.

Since the if block in your code will never run, let's just look at the else block. Here, in detail, is what happens:

// 1
document.getElementById('TemplateOutput').style.display = "block";

That looks in the DOM for the element with the id "TemplateOutput", and sets its style object's display property to "block".

// 2
lol = "lol";

That assigns the value "lol" to the lol variable. Unless you've declared lol somewhere you haven't shown, it also creates an implicit global variable. Details: The Horror of Implicit Globals.

// 3
document.getElementById('TemplateOutput').value = lol;

That copies the value "lol" from the lol variable into the value property of the input.

// 4
lol = "test2";

That copies the value "test2" into the lol variable.

edited Jun 3, 2014 at 14:04

answered Jun 3, 2014 at 12:45

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Johnny Prescott Over a year ago

Yeah, My logic was wrong in my test. I guess I tried too many thing and I did something like that. I edited my post above. Could you have a look at it to check where I'm wrong in my original script?

T.J. Crowder Over a year ago

@DrizztDoUrden: You're replacing the function with a string. I've updated the answer.

Johnny Prescott Over a year ago

that's it!? I have a VB and C++ background, you're right. I'm starting with JS. A BIG thanks to you, you save my life today! :D

Collectives™ on Stack Overflow

Javascript function cannot be executed twice

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related