使用全局变量时函数运行不正常

Question

我正在尝试制作一个概率查找器来获取一些随机数并从随机数数组中找到一个数字的概率。我有以下代码：

/*********************Select Random Number**********************/

//Number of cases
var nOC = document.getElementById("noc").value;

function rollDice() {

  //Number of trials
  let nOT = document.getElementById("not").value;

  //Empty Array to be filled
  let array = [];

  //Loop which pushes random numbers in the empty array
  for (let i = 1; i <= nOT; i++) {
    array.push(Math.ceil(Math.random() * nOC));
  }

  //Display results in a paragraph
  document.getElementById("para").innerHTML = "Your random numbers are " + array;
}

/*********************Get Probability**************************/

function getProbabilityOf() {

  //Probability of...
  let oP = document.getElementById("op").value;

  //Check if the number is out of range. If no, then find the probability of given number
  if (oP >= noC) {
    alert("This number is out of the range of possible outcomes that you have selected in step 1");
  } else {
    //Some code here
  }
}

<!---------------------------Intro------------------------------>
<h1>Probability Finder</h1>
<hr/>
<p>With our probability finder, you can easily choose the number of possible cases and select the number of times you want to select a random case each time from the total cases and finally find the empirical probability of and case you want from the selected
  total number of cases.</p>

<!---------------------------Step 1------------------------------>
<h3><span class="bold">Step 1 :</span>Select total number of cases:</h3>

<select id="noc">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<!---------------------------Step 2---------------------------->
<h3><span class="bold">Step 2 :</span>Select total number of trials</h3>

<select id="not">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
  <option value="50">50</option>
  <option value="60">60</option>
  <option value="70">70</option>
  <option value="80">80</option>
  <option value="90">90</option>
  <option value="100">100</option>
</select>

<!----------------------------Step 3----------------------------->
<h3><span class="bold">Step 3 :</span>Get random numbers by experiment</h3>

<button onclick="rollDice()">Get random numbers</button>

<p id="para"></p>
<!----------------------------Step 4----------------------------->


<h3><span class="bold">Step 4 :</span>Get probability of a particular number</h3>


<select id="op" onchange="getProbabilityOf()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

在声明第二个函数之前，nOC 被声明为函数 rollDice 的本地函数。但是在我声明下一个函数之后，我需要访问它以完成第 4 步（如代码 sn-p 中所述）。所以我从函数中删除了变量nOC并全局声明它（如代码sn-p所示）。 问题是在将变量声明为全局变量后，没有一个函数能够访问它。 为了解决这个问题，我多次重新检查语法，但没有发现任何问题（据我所知）。我尝试将变量的类型从 let 更改为 var 和 const 但仍然没有解决问题。 可能是什么问题呢？作为编码领域的新手，我知道小错误是我犯的，但对我来说知道自己的错误并改正它们是非常重要的。

Answer 1

使用内联事件处理程序一般是not a good idea。

错误源于内联处理程序。 onchange="getProbabilityOf()" 在文档呈现时执行。因此，在页面加载后onchange 属性将具有getProbabilityOf() 返回的任何结果的值。我怀疑这不是一个 javascript 函数。

以下是对您的代码的一些修改，使其能够正常工作（技术上）。我没有检查它是否是正确的输出，这只是一些技术调整。现在您可以以此为基础继续努力。

About event delegation...

与代码无关，但与“案例数量”和为了好玩：What's a sample of size one worth?

// store a reference to #noc
const nOC = document.querySelector("#noc");

// add event handlers (event delegation)
document.addEventListener("click", rollDice)
document.addEventListener("change",
  evt => {
    if (evt.target.id === "op") {
      return getProbabilityOf();
    }
  });


function rollDice(evt) {
  if (evt.target.tagName !== "BUTTON") { return; }
  
  //Number of trials
  const nOT = +document.querySelector("#not").value;
  const nocValue = +nOC.value;
  //                    ^ retrieve #nOC value here
  //Empty Array to be filled
  let array = [];

  //Loop which pushes random numbers in the empty array
  for (let i = 1; i <= nOT; i += 1) {
    array.push( Math.ceil(Math.random() * nocValue));
    
  }
  //Display results in a paragraph
  document.querySelector("#para").innerHTML = `Your random numbers are ${array}`;
}


/*********************Get Probability**************************/
function getProbabilityOf() {
  //Probability of...
  const oP = +document.querySelector("#op").value;

  //Check if the number is out of range. If no, then find the probability of given number
  if (oP >= +nOC.value) {
  //        ^ determine #nOC value here
    alert("This number is out of the range of possible outcomes that you have selected in step 1");
  } else {
    //Some code here
  }
}

<!---------------------------Intro------------------------------>
<h1>Probability Finder</h1>
<hr/>


<p>With our probability finder, you can easily choose the number of possible cases and select the number of times you want to select a random case each time from the total cases and finally find the empirical probability of and case you want from the selected
  total number of cases.</p>

<!---------------------------Step 1------------------------------>
<h3><span class="bold">Step 1 :</span>Select total number of cases:</h3>
<select id="noc">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<!---------------------------Step 2---------------------------->
<h3><span class="bold">Step 2 :</span>Select total number of trials</h3>

<select id="not">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
  <option value="50">50</option>
  <option value="60">60</option>
  <option value="70">70</option>
  <option value="80">80</option>
  <option value="90">90</option>
  <option value="100">100</option>
</select>

<!----------------------------Step 3----------------------------->
<h3><span class="bold">Step 3 :</span>Get random numbers by experiment</h3>

<button>Get random numbers</button>

<p id="para"></p>

<!----------------------------Step 4----------------------------->
<h3><span class="bold">Step 4 :</span>Get probability of a particular number</h3>

<select id="op">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

Answer 2

实际上，您的脚本使用 DOM 元素，因此必须在 DOM 加载后运行。您可以在关闭 body 标签之前使用脚本：

<!DOCTYPE html>

<html>
  <head>
    <title>Probability Finder</title>
  </head>

  <body>
    <!---------------------------Intro------------------------------>

    <h1>Probability Finder</h1>

    <hr />

    <p>
      With our probability finder, you can easily choose the number of possible
      cases and select the number of times you want to select a random case each
      time from the total cases and finally find the empirical probability of
      and case you want from the selected total number of cases.
    </p>

    <!---------------------------Step 1------------------------------>

    <h3><span class="bold">Step 1 :</span>Select total number of cases:</h3>

    <select id="noc">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>

    <!---------------------------Step 2---------------------------->

    <h3><span class="bold">Step 2 :</span>Select total number of trials</h3>

    <select id="not">
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
      <option value="50">50</option>
      <option value="60">60</option>
      <option value="70">70</option>
      <option value="80">80</option>
      <option value="90">90</option>
      <option value="100">100</option>
    </select>

    <!----------------------------Step 3----------------------------->

    <h3><span class="bold">Step 3 :</span>Get random numbers by experiment</h3>

    <button onclick="rollDice()">Get random numbers</button>

    <p id="para"></p>

    <!----------------------------Step 4----------------------------->

    <h3>
      <span class="bold">Step 4 :</span>Get probability of a particular number
    </h3>

    <select id="op" onchange="getProbabilityOf()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>

    <script>
      /*********************Select Random Number**********************/

      //Number of cases
      var nOC = document.getElementById('noc')
      function rollDice () {
        //Number of trials
        let nOT = document.getElementById('not').value

        //Empty Array to be filled
        let array = []

        //Loop which pushes random numbers in the empty array
        for (let i = 1; i <= nOT; i++) {
          array.push(Math.ceil(Math.random() * parseInt(nOC.value, 10)))
        }

        //Display results in a paragraph
        document.getElementById('para').innerHTML =
          'Your random numbers are ' + array
      }

      /*********************Get Probability**************************/

      function getProbabilityOf () {
        //Probability of...
        let oP = document.getElementById('op').value

        //Check if the number is out of range. If no, then find the probability of given number
        if (oP >= parseInt(nOC.value, 10)) {
          alert(
            'This number is out of the range of possible outcomes that you have selected in step 1'
          )
        } else {
          //Some code here
        }
      }
    </script>
  </body>
</html>