Javascript HTML表单和全局变量：为什么'；它不能识别全局变量吗？_Javascript

Javascript HTML表单和全局变量：为什么'；它不能识别全局变量吗？

javascript

Javascript HTML表单和全局变量：为什么'；它不能识别全局变量吗？,javascript,Javascript,我以前问过这个问题，但我做得很差，所以自从我编辑它之后就没有人回答。无论如何，如果您查看下面的Javascript部分，在函数外部声明的变量不起作用，特别是“UncaughtTypeError:无法读取undefined的属性'p1'。当我在函数中移动它们时，它们就工作了。我不明白。我认为，通过将其置于职能之外，它们将变得全球化，并将发挥作用。为什么它在概念上不起作用？当调用函数时，它是否应该能够发现在函数外部声明/创建的变量/属性存在的事实 HTML <form name="percen

我以前问过这个问题，但我做得很差，所以自从我编辑它之后就没有人回答。无论如何，如果您查看下面的Javascript部分，在函数外部声明的变量不起作用，特别是“UncaughtTypeError:无法读取undefined的属性'p1'。当我在函数中移动它们时，它们就工作了。我不明白。我认为，通过将其置于职能之外，它们将变得全球化，并将发挥作用。为什么它在概念上不起作用？当调用函数时，它是否应该能够发现在函数外部声明/创建的变量/属性存在的事实

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>

如果要使用输入字段值初始化全局变量，则应声明它们加价后

如下

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


//通过使用输入字段值初始化全局变量来声明全局变量；

当您将变量移出函数时，它不起作用的原因是，在加载文档时，变量得到了正确的值集。要在单击

Compute

时获取值，需要在函数中移动变量

您可以做的另一件事是初始化函数外部的变量，然后在函数的后面给它们一个值

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 + "%";
}

这样，您仍然可以在其他函数的其他地方使用相同的变量。

请定义“不工作”。它会扔吗？它没用吗？浏览器控制台窗口中是否有任何内容？它明确表示“未捕获的TypeError:无法读取未定义的属性'p1'”Ok。我认为这与表格有关，所以这证实了这一点。这只是JavaScript的一条规则？如何更好地理解这一点？如果脚本在输入字段之前，脚本首先加载并扫描整个文档以查找输入，如果未加载输入，则会发生错误，这是有意义的。谢谢，谢谢。我在这里学到了一些东西。现在可以理解为什么在实践中声明变量而不赋值。

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 + "%";
}