This is my submission for a class project. The task given was:
"Create a function that will kickstart the program and name it main(). From the main() function, invoke a function named getValue(). The getValue() function will prompt the user to input a number to be used later. Also from the main() function, call a function called getSquareRoot(). The getSquareRoot() function will calculate the square root of the number obtained from the user in the getValue() function. Ensure that you present the results, including the original number and its square root, in a format that is easy to comprehend.
The bolding is part of the original text.
I have written the code below, and it functions properly, except for the fact that some functions are triggered twice, leading to double output display during the second run where userInput receives a value of 0. I am struggling to identify where this 'loop' is being initiated (I am a beginner). Any assistance would be greatly appreciated; I've been staring at it but unable to pinpoint the issue.
<html lang="en">
<head>
<title>Project 3 Part A</title>
<meta charset="utf-8">
<script>
function main()
{
var msg1="";
var msg2="";
var userInput = "";
getValue(userInput);
getSquareRoot(userInput);
}
function getValue(userInput)
{
var userInput = document.getElementById("userNumber").value;
return getSquareRoot(userInput);
}
function getSquareRoot(userInput)
{
squareRoot = Math.sqrt(userInput);
var msg1 = "Your original number was " + userInput + ".";
var msg2 = "The square root of " + userInput + " is " + squareRoot + ".";
document.getElementById("original").innerHTML += msg1;
document.getElementById("results").innerHTML += msg2;
}
</script>
</head>
<body>
<br>
<input type="button" id="userInputButton" onclick="javascript:main();" value="Square root input value: "/>
<input type="text" id="userNumber">
</div>
<div id="original">
</div>
<div id="results">
</div>
</body>
Please feel free to provide your insights on how to resolve the duplication issue.