Question

我刚刚在2天前用Javascript创建了一个脚本，因为我正在学习它。该脚本基本上计算圆上缺少的元素。例如，如果我的半径为2，则脚本将返回4的直径，4π的周长或者我可以使它做4 * Math.PI（所以4 * 3.14）。现在脚本基本上工作了，除非我第一次打开页面并在其中一个输入中输入一个值，然后点击我的按钮，“calcola”（对不起，它是意大利语，我只是想让你看看在脚本的核心）没有任何反应，我必须重新加载页面1次甚至2次才能看到结果。我不知道为什么。我认为这是一个缓存问题或导致浏览器或js文件在第一页加载后无法获取值... 我有一个外部脚本文件，我把它放在html页面的末尾，在body标签关闭之前。对于脚本部分，这里是：

window.onload = function() {

  var r = document.getElementById("raggio").value;
  var d = document.getElementById("diametro").value;
  var C = document.getElementById("circonferenza").value;
  var A = document.getElementById("area").value;
  var calc = document.getElementById("calc");
  var rAtPow = new Number();

  var rResult = document.getElementById("r");
  var dResult = document.getElementById("d");
  var CResult = document.getElementById("C");
  var AResult = document.getElementById("A");

  rResult.innerHTML = "Raggio:";
  dResult.innerHTML = "Diametro:";
  CResult.innerHTML = "Circonferenza:";
  AResult.innerHTML = "Area:";

  calc.onclick = function() {

    if (r.length > 0) {
      rAtPow = Math.pow(r, 2);
      d = r * 2;
      C = 2 * r * Math.PI;
      A = rAtPow * Math.PI;

      rResult.innerHTML = "Raggio:" + " " + r;
      dResult.innerHTML = "Diametro:" + " " + d;
      CResult.innerHTML = "Circonferenza:" + " " + C;
      AResult.innerHTML = "Area:" + " " + A;

    } else if (d.length > 0) {
      r = d / 2;
      C = d + "π";
      rAtPow = Math.pow(r, 2);
      A = rAtPow + "π";

      rResult.innerHTML = "Raggio:" + " " + r;
      dResult.innerHTML = "Diametro:" + " " + d;
      CResult.innerHTML = "Circonferenza:" + " " + C;
      AResult.innerHTML = "Area:" + " " + A;
    } else if (C.length > 0) {
      r = C / 2;
      d = C;
      rAtPow = Math.pow(r, 2);
      A = rAtPow + "π";

      rResult.innerHTML = "Raggio:" + " " + r;
      dResult.innerHTML = "Diametro:" + " " + d;
      CResult.innerHTML = "Circonferenza:" + " " + C + "π";
      AResult.innerHTML = "Area:" + " " + A;
    } else if (A.length > 0) {
      r = Math.sqrt(A);
      d = r * 2;
      C = 2 * r + "π";

      rResult.innerHTML = "Raggio:" + " " + r;
      dResult.innerHTML = "Diametro:" + " " + d;
      CResult.innerHTML = "Circonferenza:" + " " + C;
      AResult.innerHTML = "Area:" + " " + A + "π";
    }
  }
}

该脚本有效，但仅在重新加载页面1次或甚至2次后才能使用。希望你能解决我的问题。

Answer 1

它不起作用的原因是因为您正在读取用户提供的值的代码的第一部分在页面加载时运行，而不是在用户单击calc-button时运行。

重新加载页面时它起作用的原因是因为浏览器使用上次的值填充空框。

如果更改值并单击calc，则使用旧值完成计算。

如果您更改此代码：

var r = document.getElementById("raggio").value;
var d = document.getElementById("diametro").value;
var C = document.getElementById("circonferenza").value;
var A = document.getElementById("area").value;

进入此代码：

var input = {
  r : document.getElementById("raggio"),
  d : document.getElementById("diametro"),
  C : document.getElementById("circonferenza"),
  A : document.getElementById("area")
}

然后在点击处理程序的第一部分中有这个：

calc.onclick = function() {
  var
    r = input.r.value,
    d = input.d.value,
    C = input.C.value,
    A = input.A.value;

  // ... the rest of your code ...
}

然后，当您单击calc按钮时，您将实际读取值。

在代码中还应该更改其他内容。例如，您有var rAtPow = new Number();。您不需要在javascript中分配数字。您可以声明变量，例如var rAtPow;或var rAtPow=null;甚至var rAtPow=NaN;您也可以重复输出结果。

我假设输出的HTML代码类似于：

<div id="r"></div>
<div id="d"></div>
<div id="C"></div>
<div id="A"></div>

您可以将其更改为：

<div>Raggio: <output id="r"></div>
<div>Diametro: <output id="d"></div>
<div>Circonferenza: <output id="C"></div>
<div>Area: <output id="A"></div>

然后在不更改代码的情况下轻松翻译。它还使代码更清晰。

我重构了你的代码。

HTML code（index.html）

<!doctype html>
<html>
  <head>
    <title>Stack overflow 32539264</title>
    <script src="index.js"></script>
  </head>
  <body>

    <div>
      <label>Raggio <input id="in_r"></label>
      <label>Diametro <input id="in_d"></label>
      <label>Circonferenza <input id="in_c"></label>
      <label>Area <input id="in_a"></label>
      <button id="calc">Calc</button>
    </div>

    <div>
      <div>Raggio: <output id="out_r"></div>
      <div>Diametro: <output id="out_d"></div>
      <div>Circonferenza: <output id="out_c"></div>
      <div>Area: <output id="out_a"></div>
    </div>

  </body>
</html>

和javascript（index.js）

document.addEventListener(
  "DOMContentLoaded",
  function(event) {
    var input = {
      r : document.getElementById("in_r"),
      d : document.getElementById("in_d"),
      C : document.getElementById("in_c"),
      A : document.getElementById("in_a")
    }

    var output = {
      r : document.getElementById("out_r"),
      d : document.getElementById("out_d"),
      C : document.getElementById("out_c"),
      A : document.getElementById("out_a")
    }

    var calc = document.getElementById("calc");
    calc.addEventListener(
      'click',
      function() {
        var
          r = input.r.value,
          d = input.d.value,
          C = input.C.value,
          A = input.A.value,
          rAtPow;

        if (r.length > 0) {
          rAtPow = Math.pow(r, 2);
          d = r * 2;
          C = 2 * r * Math.PI;
          A = rAtPow * Math.PI;
        } else if (d.length > 0) {
          r = d / 2;
          C = d + "π";
          rAtPow = Math.pow(r, 2);
          A = rAtPow + "π";
        } else if (C.length > 0) {
          r = C / 2;
          d = C;
          rAtPow = Math.pow(r, 2);
          A = rAtPow + "π";
        } else if (A.length > 0) {
          r = Math.sqrt(A);
          d = r * 2;
          C = 2 * r + "π";
        }
        output.r.value = r;
        output.d.value = d;
        output.C.value = C;
        output.A.value = A;
      }
    );
  }
);

需要考虑的事项：代码中没有错误处理。您可以通过清除未使用的值来更清楚地表明您只使用其中一个输入值。

需要重新加载页面以使JS

1 个答案: