HTML input and Javascript not returning values

Question

I decided as a coding exercise to make a hypothenuse calculator. It worked fine, but I got stuck with implementing my Javascript code into HTML. Here is my code:

<!DOCTYPE html>
<html>
<head>
<script>

function getValueA() {
    var a = prompt("What is value a?");
}

function getValueB() {
    var b = prompt("What is value b?");
}

function hypothenuse(a, b) {
    var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    return c
    document.getElementById("result").innerHTML = "Answer is:" + str(c);
}

</script>
</head>

<body>

<p id="result">Answer:</p>

<button type="button" onclick="getValueA()">Input Value a</button>
<button type="button" onclick="getValueB()">Input Value b</button>
<button type="submit" onclick="hypothenuse()">Calculate</button>

</body>
</html>

The problem used to be that the string returned was undefined. But I've done some tweaking after doing some research on the site. Originally, variables a and b were in one function called getData with variable c being equal to the function hypothenuse. I moved variable c because it was calling the function before the Calculate button was pressed.

So now the string isn't changing at all. I hope my question was specific enough.

score 1 · Answer 1 · answered May 06 '15 at 10:14

var a,b;
function getValueA() {
    a = prompt("What is value a?");
}

function getValueB() {
    b = prompt("What is value b?");
}

function hypothenuse(a, b) {
    var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    document.getElementById("result").innerHTML = "Answer is:" + (c);
}

<p id="result">Answer:</p>

<button type="button" onclick="getValueA()">Input Value a</button>
<button type="button" onclick="getValueB()">Input Value b</button>
<button type="submit" onclick="hypothenuse(a, b)">Calculate</button>

There are few things, we need to focus, And

document.getElementById("result").innerHTML = "Answer is:" + (c);

there is a return c; statement so answer will not be updated. str(c) where you defined str(). Here is working code for you.

And we could do an extra validation for inputting only number and greater than zero.Write these for better performance.

score 1 · Answer 2 · edited Feb 14 '16 at 13:04

The variables a and b need to be in the global scope as mentioned by other users. Otherwise they are undefined.

In your program the values are local to the function, so the values are in the local scope of the respective function and not accessible/visible outside the respective function. By declaring them in the global scope you can access those variables in any other sub-scope (e.g. function) that you defined.

Also, remove the parameters a and b in the hypo function. They are not needed and might interfere with the values of the variables a and b from the global scope, because local scope variables with the same name overwrite variables from the parent's scope.

Also make sure not to return c, because the function will return the value of c and end, and it will not write the result into the HTML as desired. I think you don't need the return statement.

score 0 · Answer 3 · edited May 23 '17 at 11:45

. They are undefined because they are expected as parameters. So you should make them global or pass them as parameters in other way. 2. Your variables are enclosed into their functions. You need to make them global to access from another function

var a;
var b;
function getValueA() {
    a = prompt("What is value a?");
}

function getValueB() {
    b = prompt("What is value b?");
}

I highly recommend you to see What is the scope of variables in javascript

Edit after comment: You 'hypothenuse' function should look something like this:

function hypothenuse() {
    // Notice you don't need parameters if you use global variables
    var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    document.getElementById("result").innerHTML = "Answer is:" + c;
    // who is str(c) in your case?
    return c;
}

If you return variable c first then the function stops and the last part by changeing the string is not run. So it should change the string first then return

Or you could try somethings else:

<!DOCTYPE html>
<html>
<head>
<script>

function hypothenuse() {
    var a = prompt("a = ");
    var b = prompt("b = ");
    var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    document.getElementById("result").innerHTML = "Answer is:" + c;
}

</script>
</head>

<body>

<p id="result">Answer:</p>

<button type="submit" onclick="hypothenuse()">Calculate</button>

</body>
</html>

Thanks, but after pressing the calculate button, the string doesn't change. I added `is` to the function to make sure something was changing when I pressed the button. — Tyler, May 06 '15 at 10:08

score 0 · Answer 4 · answered May 06 '15 at 10:09

0

The a and b variables you are declaring are not visible outside the functions scopes.

And DO NOT use global variables, you are messing up the code and abusing javascript.

Why don't you instead create a form? Or do you really want to play around with prompts? You can add two inputs (A and B) and when you click submit you change the result.

answered May 06 '15 at 10:09

pmvrmc

33
5

Yeah, I was just about to edit the question and ask how I can use a number input to change Javascript variables. – Tyler May 06 '15 at 10:12

CerebralFart · Answer 5 · 2015-05-07T16:56:26.200

The problem, as @kikyalex pointed out, is that your variables aren't available in the global scope. You'd need something like this to solve it.

<!DOCTYPE html>
<html>
<head>
<script>
var a, b
function getValueA() {
    a = prompt("What is value a?");
}

function getValueB() {
    b = prompt("What is value b?");
}

function hypothenuse() {
    var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    document.getElementById("result").innerHTML = "Answer is:" + str(c);
}

</script>
</head>

<body>

<p id="result">Answer:</p>

<button type="button" onclick="getValueA()">Input Value a</button>
<button type="button" onclick="getValueB()">Input Value b</button>
<button type="submit" onclick="hypothenuse()">Calculate</button>

</body>
</html>

The "return c" statement has to be removed if you want to modify the "result". — Ely, May 06 '15 at 10:43

score 0 · Accepted Answer · answered May 06 '15 at 10:21

<html>
<head>
<script>
var a;
var b;
var c;

function getValueA() {
     a = prompt("What is value a?");
     }

function getValueB() {
     b = prompt("What is value b?");
}

function hypothenuse() {

     c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    //return c
document.getElementById("result").innerHTML = "Answer is:" + c;
}

</script>
</head>

<body>

<p id="result">Answer:</p>

<button type="button" onclick="getValueA()">Input Value a</button>
<button type="button" onclick="getValueB()">Input Value b</button>
<button type="submit" onclick="hypothenuse()">Calculate</button>

</body>
</html>

Thanks. This worked. For people who have the same issue, the things that were changed were: `str()` was removed, `return` was removed from the function, and `var a`, `var b`, and `var c` were added on the top. — Tyler, May 06 '15 at 23:35

smart developer · Answer 7 · 2015-05-06T11:30:12.020

Hello tyler Here is working code for you which will diplay result for you

Note : return c will not return value in result id. it will return value outside the function not with in function.

str() : will work only with some index in javascript like str.search("value"). So it's undefind.

Also if you want to print result dynamic then you need to save value of a and b after button click, when call to function you need to call parameter too.

<button type="submit" onclick="hypothenuse(a,b)">Calculate</button>

In my case I will take 12,13 statically ,

console.log(a or b) to get value of a and b to print result dynamically.

<!DOCTYPE html>
<html>
<head>
<script>

function getValueA() {
var a = prompt("What is value a?");
}

function getValueB() {
var b = prompt("What is value b?");
}

function hypothenuse(a, b) {
console.log(a);
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
document.getElementById("result").innerHTML = "Answer is:" + c;
 }

</script>
</head>

 <body>

 <p id="result">Answer:</p>

<button type="button" onclick="getValueA()">Input Value a</button>
<button type="button" onclick="getValueB()">Input Value b</button>
<button type="submit" onclick="hypothenuse(12,13)">Calculate</button>

</body>
</html>

score 0 · Answer 8 · answered May 06 '15 at 11:19

The variables used inside the function are not declared globally.

var a, b, c;

function getValueA() {
a = prompt("What is value a?");
}

function getValueB() {    
b = prompt("What is value b?");
}

function hypothenuse() 
{
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
return c;
document.getElementById("result").innerHTML = "Answer is:" + c;
}

HTML input and Javascript not returning values

8 Answers8