CODEWITHSUNDEEP
javascripthtmlinput
Tyler
Tyler

Reputation: 13

HTML input and Javascript not returning values

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.

Upvotes: 1

Views: 1295

Answers (8)

Ely
Ely

Reputation: 11162

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.

Upvotes: 1

CerebralFart
CerebralFart

Reputation: 3490

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>

Upvotes: 0

smart developer
smart developer

Reputation: 49

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>

Upvotes: 0

user4869075
user4869075

Reputation:

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;
}

Upvotes: 0

Alexandru Chichinete
Alexandru Chichinete

Reputation: 1183

. 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>

Upvotes: 0

Sudhakar Singajogi
Sudhakar Singajogi

Reputation: 58

<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>

Upvotes: 0

saikiran.vsk
saikiran.vsk

Reputation: 1796

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.

Upvotes: 1

pmvrmc
pmvrmc

Reputation: 33

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.

Upvotes: 0

Related Questions