Executing Functions

[Jamie315x]

Hey guys, I'm new to JS and I have been having a lot of trouble with functions lately

here is the JavaScript I have so far (there are buttons, html ect. that I did not include)

main();
        
    	    function main() {
                document.getElementById("StartProcessButton").onclick = startProcess;    
	    }
	    
		    function startProcess() {
		     
		    var value = prompt("Enter the value");
		    
		    if  
		    (value == realNumber)
		    alert("Correct");
		    else
		    confirm ("Wrong")
		    }
		    
		function myRealNumber() {
		    var numValue1 = document.getElementById("Lowest");
		    var myText = numValue1.value;
		    var LowestButton = Number(myText);
     
		    var numValue2 = document.getElementById("Highest");
		    var myText = numValue2.value;
		    var Highest = Number(myText);
     
		    var realNumber = (Math.ceil(Math.random()*"Highest"+"Lowest"));
		}

How do I make my function "myRealNumber" execute when function "startProcess" does? specifically how do I make var "realNumber" execute when "startProcess" does

please let me know as to the errors in the code
any help is greatly appreciated! thanks so much!

[Eldarrion]

Why do:

main();
        
function main() {
    document.getElementById("StartProcessButton").onclick = startProcess;    
}

When you can easily do:

<input type="button" id="StartProcessButton" value="Test" onclick="startProcess()" />

And certainly, to call a function from within another function....

function startProcess() {
    myRealNumber();
    var value = prompt("Enter the value"); 
    if (value == realNumber)
        alert("Correct");
    else
        confirm ("Wrong")
}

And you'd want to define a global variable inside the second function, rather than declaring a local one (Which won't be accessible by startProcess()) and certainly using a string to do arithmetics... like in your case with *"Highest"+"Lowest" won't do a whole lot of good:

    realNumber = (Math.ceil(Math.random()*(numValue1+numValue2)));

That should about do the trick. Haven't tested your math part, but it seems clearly impossible to get a correct answer when you're randomly generating an integer to include in the calculation.

[Jamie315x]

I've always heard to stay away from global variables, but thanks for the response!
I was wondering if maybe I could just return the value of realNumber and then define it as a variable in the startProcess function

or wouldn't that work :/

[Eldarrion]

You certainly could, but I see no problem with defining a single global variable. It's not like you'll be generating realNumber ten times in the same page and calling it might get confusing. Plus, if you end up re-declaring it somewhere, it won't really affect anything else, I don't think. Especially when the function that declares it originally is only triggered on a click. Also, I apparently hadn't quite understood your math logic, so... the variable definition would look like:

    realNumber = (Math.ceil(Math.random()*(Highest+LowestButton)));

Instead of the one I gave you earlier. Once again, global variables aren't all that evil and scary, and returning a value from a function that isn't something incredibly long and complicated shouldn't really be needed.

[Jamie315x]

I am more interested in learning the process than the actual example but I see what you mean.
If I were to return the value and then define it as a variable in function startProcess how would I go about defining the variable?

thanks again, I appreciate the help

[Eldarrion]

It would work something like this:

function startProcess() {
    var realNumber = myRealNumber();
    var value = prompt("Enter the value"); 
    if (value == realNumber)
        alert("Correct");
    else
        confirm ("Wrong")
}

function myRealNumber() {
    var numValue1 = document.getElementById("Lowest");
    var myText = numValue1.value;
    var LowestButton = Number(myText);
   
    var numValue2 = document.getElementById("Highest");
    var myText = numValue2.value;
    var Highest = Number(myText);
    var realNumber = (Math.ceil(Math.random()*(Highest+LowestButton)));
    return realNumber;
}

Doesn't take too much code to achieve the desired effect. (marked in red) Of course, if you need to call the variable anywhere else, it won't be accessible.

[Jamie315x]

Originally Posted by Eldarrion

It would work something like this:

function startProcess() {
    var realNumber = myRealNumber();
    var value = prompt("Enter the value"); 
    if (value == realNumber)
        alert("Correct");
    else
        confirm ("Wrong")
}

function myRealNumber() {
    var numValue1 = document.getElementById("Lowest");
    var myText = numValue1.value;
    var LowestButton = Number(myText);
   
    var numValue2 = document.getElementById("Highest");
    var myText = numValue2.value;
    var Highest = Number(myText);
    var realNumber = (Math.ceil(Math.random()*(Highest+LowestButton)));
    return realNumber;
}

Doesn't take too much code to achieve the desired effect. (marked in red) Of course, if you need to call the variable anywhere else, it won't be accessible.

Ah, well thanks so much for the help
I do have one more question if you have the time to answer it
I know that my random function works with numbers shouldn't my Id's work as well? they correspond with the textfield id so Im not sure why they arn't working.

I really appreciate your help thanks alot!

[Eldarrion]

They could be made to work, although considering you're already assigning the value of the item to a variable... I certainly don't see why you'd want to take that approach. Also... the mathematical functions assume that what you're giving them is what you want to calculate so "Lowest" + "Highest" would try to directly add the text "Lowest" to the text "Highest", as opposed to going so far as to looking up the value of the element with the same id. All in all, when passed a string, the plus sign works as a concatenation of two strings, resulting in the string of "LowestHighest" in the end. If you want to reference IDs, you'd be doing something like:

document.getElementById("Lowest").value + document.getElementById("Highest")

As you can see, there really isn't much point in doing that, and it's much easier to use the variables you assign earlier:

    var numValue1 = document.getElementById("Lowest");
    var myText = numValue1.value;
    var LowestButton = Number(myText);
   
    var numValue2 = document.getElementById("Highest");
    var myText = numValue2.value;
    var Highest = Number(myText);
    
    var realNumber = (Math.ceil(Math.random()*(Highest+LowestButton)));

Now, in this case, you're clearly not passing a string (due to lack of quotes), but a variable and JS goes deeper and looks up the value of that variable (Which can also be a string, but in this case is not) A good reading on the subject of operators versus variable types could probably be found here:

http://www.w3schools.com/js/js_operators.asp