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:
我决定作为编码练习制作一个hypothenuse计算器。它运行良好,但我坚持将我的Javascript代码实现为HTML。这是我的代码:
<!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.
过去的问题是返回的字符串是未定义的。但是在对网站进行一些研究之后我做了一些调整。最初,变量a和b在一个名为getData的函数中,变量c等于函数hypothenuse。我移动了变量c,因为它在按下Calculate按钮之前调用了该函数。
So now the string isn't changing at all. I hope my question was specific enough.
所以现在字符串根本没有变化。我希望我的问题足够具体。
8 个解决方案
#1
<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>
#2
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.
有回报c;声明所以答案不会更新。 str(c)你定义了str()。这是您的工作代码。
And we could do an extra validation for inputting only number and greater than zero.Write these for better performance.
我们可以进行额外的验证,只输入数字和大于零。写这些以获得更好的性能。
#3
The variables a and b need to be in the global scope as mentioned by other users. Otherwise they are undefined.
变量a和b需要在其他用户提到的全局范围内。否则他们是未定义的。
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.
另外,删除hypo函数中的参数a和b。它们不是必需的,可能会干扰全局作用域中变量a和b的值,因为具有相同名称的局部作用域变量会覆盖父作用域中的变量。
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.
另外请确保不返回c,因为该函数将返回c和end的值,并且不会根据需要将结果写入HTML。我认为你不需要return语句。
#4
The a and b variables you are declaring are not visible outside the functions scopes.
您声明的a和b变量在函数范围之外是不可见的。
And DO NOT use global variables, you are messing up the code and abusing javascript.
并且不要使用全局变量,你搞乱了代码并滥用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.
为什么不改为创建表单?或者你真的想玩提示吗?您可以添加两个输入(A和B),单击“提交”时可以更改结果。
#5
. 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
我强烈建议你看看javascript中的变量范围是什么
Edit after comment: You 'hypothenuse' function should look something like this:
评论后编辑:你'hypothenuse'函数应该看起来像这样:
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
如果先返回变量c,则函数停止,并且不运行更改字符串的最后一部分。所以它应该首先更改字符串然后返回
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>
#6
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;
}
#7
Hello tyler Here is working code for you which will diplay result for you
您好tyler这里有适合您的代码,它将为您显示结果
Note : return c will not return value in result id. it will return value outside the function not with in function.
注意:return c不会返回结果id中的值。它将在函数外返回值而不是函数。
str() : will work only with some index in javascript like str.search("value"). So it's undefind.
str():只能用于像str.search(“value”)这样的javascript中的某些索引。所以这是不可思议的。
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.
另外如果你想打印结果动态,那么你需要在点击按钮后保存a和b的值,当你需要调用参数时你也需要调用参数。
<button type="submit" onclick="hypothenuse(a,b)">Calculate</button>
In my case I will take 12,13 statically ,
在我的情况下,我会静态拿12,13,
console.log(a or b) to get value of a and b to print result dynamically.
console.log(a或b)获取a和b的值以动态打印结果。
<!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>
#8
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.
正如@kikyalex指出的那样,问题在于您的变量在全局范围内不可用。你需要这样的东西来解决它。
<!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>
#1
<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>
#2
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.
有回报c;声明所以答案不会更新。 str(c)你定义了str()。这是您的工作代码。
And we could do an extra validation for inputting only number and greater than zero.Write these for better performance.
我们可以进行额外的验证,只输入数字和大于零。写这些以获得更好的性能。
#3
The variables a and b need to be in the global scope as mentioned by other users. Otherwise they are undefined.
变量a和b需要在其他用户提到的全局范围内。否则他们是未定义的。
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.
另外,删除hypo函数中的参数a和b。它们不是必需的,可能会干扰全局作用域中变量a和b的值,因为具有相同名称的局部作用域变量会覆盖父作用域中的变量。
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.
另外请确保不返回c,因为该函数将返回c和end的值,并且不会根据需要将结果写入HTML。我认为你不需要return语句。
#4
The a and b variables you are declaring are not visible outside the functions scopes.
您声明的a和b变量在函数范围之外是不可见的。
And DO NOT use global variables, you are messing up the code and abusing javascript.
并且不要使用全局变量,你搞乱了代码并滥用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.
为什么不改为创建表单?或者你真的想玩提示吗?您可以添加两个输入(A和B),单击“提交”时可以更改结果。
#5
. 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
我强烈建议你看看javascript中的变量范围是什么
Edit after comment: You 'hypothenuse' function should look something like this:
评论后编辑:你'hypothenuse'函数应该看起来像这样:
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
如果先返回变量c,则函数停止,并且不运行更改字符串的最后一部分。所以它应该首先更改字符串然后返回
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>
#6
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;
}
#7
Hello tyler Here is working code for you which will diplay result for you
您好tyler这里有适合您的代码,它将为您显示结果
Note : return c will not return value in result id. it will return value outside the function not with in function.
注意:return c不会返回结果id中的值。它将在函数外返回值而不是函数。
str() : will work only with some index in javascript like str.search("value"). So it's undefind.
str():只能用于像str.search(“value”)这样的javascript中的某些索引。所以这是不可思议的。
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.
另外如果你想打印结果动态,那么你需要在点击按钮后保存a和b的值,当你需要调用参数时你也需要调用参数。
<button type="submit" onclick="hypothenuse(a,b)">Calculate</button>
In my case I will take 12,13 statically ,
在我的情况下,我会静态拿12,13,
console.log(a or b) to get value of a and b to print result dynamically.
console.log(a或b)获取a和b的值以动态打印结果。
<!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>
#8
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.
正如@kikyalex指出的那样,问题在于您的变量在全局范围内不可用。你需要这样的东西来解决它。
<!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>