Forum Moderators: open
Here is my JS:
function percentAmps(){
var amps =(document.getElementById("resultbox4").value);
(document.getElementById("ampPerc").value = Math.round(amps*.8));
}
function wireSize(){
var amps = (document.getElementById("resultbox4").value);
if (amps <= 20)
{
size = ("1-#12 + #12grd in 1/2 C");
}
else if (amps > 20 && amps <= 30)
{
size = "1-#10 + #10grd in 1/2 C";
}
{
return size;
}
}
And the HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Conversions</title>
<script type= "text/javascript" src= "kva.js"></script>
<script type= "text/javascript" src= "amps.js"></script>
</head>
<body>
<h2>Kva to Amps</h2><br>
<input value="" id="kvaNum" type="text"> Kva<br>
<input value="480" id="volNum" type="text"> Volts<br>
<input value="3" id="phaseNum" type="text"> Phase<br>
<input value="Click for Amps" onclick="convertKva()" type="button">
<input type="text" name="myresultbox" id="resultbox"> Amps<br>
<h2>Wire size and 80%</h2><br>
<input type="text" name="myresultbox" id="resultbox4"> Amps<br>
<input value="Click for 80%" onclick="percentAmps()" type="button">
<input type="text" name="myresultbox" id="ampPerc"> Amps<br>
<input value="Click for Wire Size" onclick="(wireSize())" type="button">
<input type="text" name="myresultbox" id="wireSize" style="width:200px; height:16.775px;">" <br>
<h2>Amps to Kva</h2><br>
<input value="" id="ampNum" type="text"> Amps<br>
<input value="480" id="volNum2" type="text"> Volts<br>
<input value="3" id="phaseNum2" type="text"> Phase<br>
<input value="Click for Kva" onclick="convertAmps()" type="button">
<input type="text" name="myresultbox" id="resultbox2"> Kva<br>
</body>
</html>
return size;
When you call a function, generally you only return a true or false value, unless that function is used to return some other value, as in calculations. Example,
var total = addTwoPlusTwo();
function addTwoPlusTwo () {
return parseInt(2+2);
}
When you do this from a link or a form, "return" takes on a different meaning, so in effect, you're saying to return the value of "size" to the page. So let me guess: it navigates to a page that has only the value of size printed to it, right?
Two other examples of return within pages:
<a href="#" onClick="return myAlert();">Alert</a>
function myAlert() {
alert('Boo!');
return false;
}
What "false" does here is tells the browser to not perform it's natural action, navigate to the link in href. So it would **not** go to the top of the page.
Second example,
<form action="" onSubmit="return myAlert();">
<input type="submit" value="Submit">
</form>
Same thing . . . by returning false, it stops the form from submitting via the submit button. This one's a good one to remember - allows you to use submit buttons so if JS is disabled, your form works.
As said, some of your functions are missing, but revised of what you have so far - note you had opening and closing form tags missing, they are required. See exception below . . .
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Conversions</title>
<script type="text/javascript">
function percentAmps(){
var amps =(document.getElementById("resultbox4").value);
document.getElementById("ampPerc").value = Math.round(amps*.8);
}
function wireSize(){
var amps = document.getElementById("resultbox4").value;
if (amps <= 20) {
size = ("1-#12 + #12grd in 1/2 C");
}
else if (amps > 20 && amps <= 30) {
size = "1-#10 + #10grd in 1/2 C";
}
document.getElementById("resultbox").value=size;
// A "return" here would return a page with
// only the returned value written to it
}
</script>
</head>
<body>
<h2>Kva to Amps</h2>
<form action="">
<input value="" id="kvaNum" type="text"> Kva<br>
<input value="480" id="volNum" type="text"> Volts<br>
<input value="3" id="phaseNum" type="text"> Phase<br>
<input value="Click for Amps" onclick="convertKva()" type="button">
<input type="text" name="myresultbox" id="resultbox"> Amps<br>
<h2>Wire size and 80%</h2><br>
<input type="text" name="myresultbox" id="resultbox4"> Amps<br>
<input value="Click for 80%" onclick="percentAmps()" type="button">
<input type="text" name="myresultbox" id="ampPerc"> Amps<br>
<input value="Click for Wire Size" onclick="(wireSize())" type="button">
<input type="text" name="myresultbox" id="wireSize" style="width:200px; height:16.775px;">" <br>
<h2>Amps to Kva</h2><br>
<input value="" id="ampNum" type="text"> Amps<br>
<input value="480" id="volNum2" type="text"> Volts<br>
<input value="3" id="phaseNum2" type="text"> Phase<br>
<input value="Click for Kva" onclick="convertAmps()" type="button">
<input type="text" name="myresultbox" id="resultbox2"> Kva<br>
</form>
</body>
</html>
Exception: Per my comment about calculations - if wireSize() is used by some other function that requires size to be returned from it, what I would do is add another function for the button and get the size from wireSize() as you originally had it, like
<input value="Click for Wire Size" onclick="(getWireSize())" type="button">
function getWireSize() {
var mySize=wireSize();
document.getElementById("resultbox").value=mySize;
return false;
}
Return false is not necessary if you're using buttons. Buttons have no inherent action - but if you use a submit button, you'd need return false as shown.
Thank you for the help. That helped out a lot. I have just been playing with java script for about 5 weeks. Got alot to learn still. Thank you for your tips.
