该函数在使用全局变量时表现不佳运行

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 步（如代码片段中所述）。所以我从函数中删除了变量 nOC 并在全局声明它（如代码片段所示）。问题是在将变量声明为全局变量后，函数的 none 能够访问它。为了解决这个问题，我多次重新检查语法，但没有发现任何问题（据我所知）。我尝试将变量的类型从 let 更改为 var 和 const 但问题仍然没有解决。可能是什么问题呢？作为编码领域的新手，我知道小错误是我犯的，但知道自己的错误并改正它们对我来说非常重要。

Answer 1

实际上您的脚本使用了 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>

Answer 2

通常not a good idea使用内联事件处理程序。

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

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

About event delegation...

与代码无关，但与 'number of cases' 相关，为了好玩：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>

该函数在使用全局变量时表现不佳运行

The function is not running well while using a global variable

html

javascript

global-variables

local-variables

该函数在使用全局变量时表现不佳 运行

The function is not running well while using a global variable

html

javascript

global-variables

local-variables

该函数在使用全局变量时表现不佳运行