需要重新加載頁面才能使 onclick 功能在 JS 中工作

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

然后，當您單擊計算按鈕時，您將實際讀取這些值。

代碼中還有其他應該更改的內容。 例如你有var rAtPow = new Number(); . 您不需要在 javascript 中分配一個數字。 你可以像var rAtPow;一樣聲明變量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 代碼 (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;
      }
    );
  }
);

需要考慮的事情：代碼中沒有錯誤處理。 您可以通過清除未使用的值來更清楚地表明您只使用其中一個輸入值。

需要重新加載頁面才能使 onclick 功能在 JS 中工作

問題描述

1 個解決方案

解決方案1
1 2015-09-12 15:27:28

需要重新加載頁面才能使 onclick 功能在 JS 中工作

問題描述

1 個解決方案

解決方案1 1 2015-09-12 15:27:28

解決方案1
1 2015-09-12 15:27:28