Question

我把全局变量放在函数之外，我有两个不同的函数，比如这个

＆＃13;

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>


</head>

<body>
  <p>num 1 = <input id="num1" /></p>
  <p>num 2 = <input id="num2" /></p>

  <p><button type="button" onclick="findCalc1()">Calc 1</button>
    <p><button type="button" onclick="findCalc2()">Calc 2</button>

    </p>
    <p>The Result is ...</p>

    <script>
      var b = document.getElementById("num1").value;
      var c = document.getElementById("num2").value;

      function findCalc1() {
        document.getElementById("p1").innerHTML = b * c;
      }

      function findCalc2() {
        document.getElementById("p1").innerHTML = b / c;
      }
    </script>
    <p id="p1"></p>

    </body

＆＃13;

但它没有显示任何价值，我做错了什么？

Answer 1

问题是您将变量设置为等于页面加载时的值。一旦您在这些字段中输入了某些内容，就会设置该值。

要解决此问题，您只需将两个变量声明移动到两个函数中：

＆＃13;

function findCalc1() {
  b = document.getElementById("num1").value;
  c = document.getElementById("num2").value;
  document.getElementById("p1").innerHTML = b * c;
}

function findCalc2() {
  b = document.getElementById("num1").value;
  c = document.getElementById("num2").value;
  document.getElementById("p1").innerHTML = b / c;
}

＆＃13;

<body>
  <p>num 1 = <input id="num1" /></p>
  <p>num2 = <input id="num2" /></p>

  <p><button type="button" onclick="findCalc1()">Calc 1</button></p>
  <p><button type="button" onclick="findCalc2()">Calc 2</button></p>

  <p>The Result is ...</p>
  <p id="p1"></p>
</body>

＆＃13;

Answer 2

OP的脚本实际上成功访问了全局变量b和c。不幸的是，只要页面加载，就会在用户有机会提供任何输入之前立即执行此操作。乘法的逻辑结果为零，除法为NaN，即数学运算失败时的特殊值，例如在这种情况下除以零。

我以多种方式修改了代码，包括从全局空间中删除变量b和c，并将它们作为函数的本地，以便改进代码的组织。

一旦页面加载，就会收集按钮元素，并为每个按钮元素分配一个处理程序，以便用户单击其中任何一个。处理程序（匿名函数）依次调用doMathOp（），将按钮的id作为参数传递。用户定义的函数访问两个输入字段值，修剪空白字符并分别将它们分配给变量b和c。

代码调用函数来验证变量的含义，检查空值或无效数据。如果回调返回true，则值有效且为数字，因此数学运算继续进行。如果用户单击id为＆＃34; num1＆＃34;的按钮，则会发生乘法，否则如果单击其他按钮，则该功能执行除法。

顺便说一句，请注意，最好不要使用事件属性来编写HTML，而是使用JavaScript中的事件 - 这是一个更清晰的关注点分离，以下代码说明了这种方法：

＆＃13;

var d = document;
d.g = d.getElementById;

var num1 = d.g("num1");
var num2 = d.g("num2");
var but1 = d.g("but1");
var but2 = d.g("but2");
var res = d.g("res");

function doValidate() {
  var x = arguments[0];
  var y = arguments[1];

  console.clear();
  // empty value check
  if (x === "" ) {
    console.log("please input a value");
    num1.focus();
  } 
  else
  if (y === "") {
     console.log("please input a value");
     num2.focus()
  }
  else // invalid data check
  if (isNaN(x)) {
      console.log("invalid data: ", x);
      num1.focus();
      num1.select();
  }
  else
  if (isNaN(y)) {
    console.log("invalid data: ", y);
    num2.focus();
    num2.select();
  } else {
    return true;
  }

}

function doMathOp() {
  var b = num1.value.trim();
  var c = num2.value.trim();
  var str = arguments[0];

  if (doValidate(b, c) === true) {
    res.innerHTML = (str === "but1") ? b * c : b / c;
  } else {
    return false;
  }
}

window.onload = function() {
  var buts = d.getElementsByTagName("button");
  for (let i = 0, max = buts.length; i < max; i++) {
    buts[i].onclick = function() {
      doMathOp(this.id);
    };
  }
};

＆＃13;

button {
  background: #eeeee;
  width: 100px;
  margin-bottom: 4px;
}

#label {
  line-height: 0.2;
}

#res {
  background: #eff;
  width: 250px;
  border: 2px dotted #f0f;
}

＆＃13;

<p>#1 = <input id="num1" /></p>
<p>#2 = <input id="num2" /></p>
<button id="but1" type="button">Multiply</button><br>
<button id="but2" type="button">Divide</button>
<p id="label">Result:</p>
<p id="res"> </p>

＆＃13;

全局变量无法在函数中访问

2 个答案: