HTML表单和全局变量：为什么不能识别全局变量？

Question

I've asked this question before but I did it poorly so no one has replied since I editing it. 我之前曾问过这个问题，但是我做得不好，所以自从编辑以来没有人回复。 Anyway, if you look at the Javascript section below, the variables declared outside the function did not work specifically saying "Uncaught TypeError: Cannot read property 'p1' of undefined". 无论如何，如果您查看下面的Javascript部分，则在函数外部声明的变量无法正常工作，具体说“ Uncaught TypeError：无法读取未定义的属性'p1'”。 When I move them inside the function, they work. 当我将它们移入函数中时，它们会起作用。 I don't understand. 我不明白 I thought that by putting it outside the function, they would become global and would work. 我认为通过将其置于功能之外，它们将成为全球性的并且行之有效的。 Why doesn't it not work conceptually? 为什么它在概念上不起作用？ When the function is invoked, shouldn't it be able to pick up the fact that the variables/properties declared/created outside the function exist? 调用函数时，它是否不应该能够发现在函数外部声明/创建的变量/属性存在的事实？

HTML 的HTML

<form name="percent">
        <table id="heading">
            <tr><td><h2>Enter information here:</h2></td></tr>
        <table id="meat">
            <tr>    
                <td>Percentage 1</td>
                <td class="denid"><input type="number" name="p1" class="inputB"></td>
                <td class="percent1">%</td>
            </tr>
            <tr>
                <td>Denominator 1</td>
                <td><input type="number" name="d1" class="inputB"></td>
            </tr>
            <tr>
                <td>Numerator 1</td>
                <td><span id="n1"></span></td>
            </tr>
            <td>Percentage 2</td>
                <td class-"denid"><input type="number" name="p2" class="inputB"></td>
                <td class="percent1">%</td> 
            </tr>
            <tr>
                <td>Denominator 2</td>
                <td><input type="number" name="d2" class="inputB"></td> 
            </tr>
            <tr>
            <tr>
                <td>Numerator 2</td>
                <td><span id="2"></span></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="Compute" onclick="calculate()"></td>
            </tr>

        </table>

JavaScript 的JavaScript

var per1 = document.percent.p1.value;
var den1 = document.percent.d1.value;
var per2 = document.percent.p2.value;
var den2 = document.percent.d2.value;

function calculate () {
var numerator1 = (per1 * den1) / 100;
var numerator2 = (per2 * den2) / 100;

var numeratorT = numerator1 + numerator2;
document.getElementById("numeratorTotal").innerHTML=numeratorT;

var denominatorT = +den1 + +den2;
document.getElementById("denominatorTotal").innerHTML=denominatorT;

var weightedA = (numeratorT / denominatorT) * 100;
document.getElementById("weightedAvg").innerHTML=weightedA + "%";

}

Answer 1

if you want to initialize global variables with input fields values they should be declared after the markup 如果要使用输入字段值初始化全局变量，则应在标记后声明它们

as follows 如下

<html>
  <head></head>
  <body>
   <form>
   <!-- your inputs and something something ....-->
   </form>
<script>
 //your global variables here declared by initializing them with input fields values;

</script>
 </body>
</html>

Answer 2

The reason why it doesn't work when you move the variables out of the function is because they get a value set right when the document loads. 当您将变量移出函数时，它之所以不起作用，是因为在加载文档时，它们获得了正确设置的值。 To get the values when Compute is clicked, you need to move the variables inside the function. 要在单击“ Compute时获取值，您需要在函数内移动变量。

The other thing you can do is init the variables outside the function and then later on in the function give them a value. 您可以做的另一件事是在函数外部初始化变量，然后在函数中稍后给它们赋值。

var per1;
var den1;
var per2;
var den2;

function calculate () {
  per1 = document.percent.p1.value;
  den1 = document.percent.d1.value;
  per2 = document.percent.p2.value;
  den2 = document.percent.d2.value;

  var numerator1 = (per1 * den1) / 100;
  var numerator2 = (per2 * den2) / 100;

  var numeratorT = numerator1 + numerator2;
  document.getElementById("numeratorTotal").innerHTML=numeratorT;

  var denominatorT = +den1 + +den2;
  document.getElementById("denominatorTotal").innerHTML=denominatorT;

  var weightedA = (numeratorT / denominatorT) * 100;
  document.getElementById("weightedAvg").innerHTML=weightedA + "%";
}

This way you can still use the same variables somewhere else in another function. 这样，您仍然可以在其他函数的其他地方使用相同的变量。

HTML表单和全局变量：为什么不能识别全局变量？

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-05-15 06:02:35

解决方案2
1 2014-05-15 06:17:05

HTML表单和全局变量：为什么不能识别全局变量？

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-05-15 06:02:35

解决方案2 1 2014-05-15 06:17:05

解决方案1
2 已采纳 2014-05-15 06:02:35

解决方案2
1 2014-05-15 06:17:05