HTML输入和Javascript不返回值
[英]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. 效果很好，但是我坚持将我的Javascript代码实现为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 . 曾经是返回的字符串的问题是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 . 最初，变量a和b在一个名为getData函数中，变量c等于函数hypothenuse 。 I moved variable c because it was calling the function before the Calculate button was pressed. 我移动了变量c因为它在按下Calculate按钮之前正在调用该函数。
So now the string isn't changing at all . 所以，现在的字符串是不会改变的 。 I hope my question was specific enough. 我希望我的问题足够具体。
8 个解决方案
解决方案1
1 2015-05-06 10:14:43
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; 有回报c; statement so answer will not be updated. 声明，因此答案将不会更新。 str(c) where you defined str(). str（c）定义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. 我们可以做一个额外的验证，只输入数字且大于零，将其写入以获得更好的性能。
解决方案2
1 2015-05-06 10:51:03
The variables a and b need to be in the global scope as mentioned by other users. 变量a和b必须在其他用户提到的全局范围内。 Otherwise they are undefined . 否则，它们是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 (eg function) that you defined. 通过在全局范围内声明它们，您可以在您定义的任何其他子范围（例如函数）中访问这些变量。
Also, remove the parameters a and b in the hypo function. 同样，删除hypo函数中的参数a和b 。 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. 它们不是必需的，并且可能会干扰全局范围中的变量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. 还要确保不要return c ，因为该函数将返回c的值并结束，并且不会按需要将结果写入HTML。 I think you don't need the return statement. 我认为您不需要return语句。
解决方案3
0 2015-05-06 10:03:26
. 。 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. 2.您的变量包含在其函数中。 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: 注释后编辑：您的“斜边”功能应如下所示：
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. 如果首先返回变量c，则该函数将停止，并且不运行通过更改字符串的最后一部分。 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>
解决方案4
0 2015-05-06 10:09:31
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
0 2015-05-06 10:11:03
The problem, as @kikyalex pointed out, is that your variables aren't available in the global scope. 正如@kikyalex所指出的那样，问题在于您的变量在全局范围内不可用。 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>
解决方案6
0 已采纳 2015-05-06 10:21:33
<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>
解决方案7
0 2015-05-06 11:12:22
Hello tyler Here is working code for you which will diplay result for you 泰勒你好，这是给你的工作代码，它将为你显示结果
Note : return c will not return value in result id. 注意：return c不会返回结果ID中的值。 it will return value outside the function not with in function. 它将返回函数外部的值，而不是in函数。
str() : will work only with some index in javascript like str.search("value"). str（）：仅适用于javascript中的某些索引，例如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. 另外，如果要动态打印结果，则需要在单击按钮后保存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
0
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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.