解决方案

Question

我正在尝试创建一个动态函数，该函数可以从用户输入中获取参数并进行简单的数学运算...而我总是会遇到参考错误。

我将向您展示我的代码，希望您能理解我的目标

提前感谢<3

/* global window*/

function generate(start, end) {
    "use strict";
    
    start = window.myInput.value;
    end = window.myOutput.value;
    
    var years;
    
    for (years = start; years <= end; years += 1) {
        window.mySelect.innerHTML += '<option>' + years + '</option>';
    }
}

<body>
        <table>
            <tr>
                <td>
                    <input type="text" id="myInput">
                </td>
                <td>
                    <input type="text" id="myOutput">
                </td>
                <td>
                    <button onclick="generate()">Generate!</button>
                </td>
                <td>
                    <select id="mySelect">
                        <option selected>your Years</option>
                    </select>
                </td>
            </tr>
        </table> 
        <script src="script.js"></script>
    </body>

PS：我正在尝试从中插入的开始年份到插入的结束年份添加选项。

Answer 1

尝试一下：

/* global window*/

function generate(start, end) {
    "use strict";
    
    start = document.getElementById("myInput").value;
    end = document.getElementById("myOutput").value;
    mySelect = document.getElementById("mySelect");
    
    var years;
    
    for (years = start; years <= end; years += 1) {
        mySelect.innerHTML += '<option>' + years + '</option>';
    }
}

Answer 2

现在，您可以获取指定年份的等级。对您来说有必要吗？

let myInput = document.querySelector('#myInput');
let myOutput = document.querySelector('#myOutput');
let mySelect = document.querySelector('#mySelect');

function generate() {
    "use strict";
    
    let start = myInput.value;
    let end = myOutput.value;
    
    var years;
    
    for (years = start; years <= end; years++) {
        window.mySelect.innerHTML += '<option>' + years + '</option>';
    }
}

<body>
   
            <tr>
                <td>
                    <input type="text" id="myInput">
                </td>
                <td>
                    <input type="text" id="myOutput">
                </td>
                <td>
                    <button onclick="generate()">Generate!</button>
                </td>
                <td>
                    <select id="mySelect">
                        <option selected>your Years</option>
                    </select>
                </td>
            </tr>
  
        <script src="script.js"></script>
    </body>

Answer 3

解决方案

这是一种简单易懂的方法

const generate = () => {
  let start = document.querySelector('#myInput').value
  const end = document.querySelector('#myOutput').value
  const years = document.querySelector('#mySelect')

  while (start <= end) { 
    years.innerHTML += `<option>${start}</option>`
    start++
  }
}

<body>
  <table>
    <tr>
      <td>
        <input type="text" id="myInput">
      </td>
      <td>
        <input type="text" id="myOutput">
      </td>
      <td>
        <button onclick="generate()">Generate!</button>
      </td>
      <td>
        <select id="mySelect">
          <option selected>your Years</option>
        </select>
      </td>
    </tr>
  </table> 
</body>

由于此方法运行良好（迭代次数很少），因此我们可以输入所需的任意年限，因此可以使用以下方法在此循环中创建大量DOM元素：

years.innerHTML += `<option>${start}</option>`

这真的很容易阅读和理解，但这并不是提高性能的最佳方法，我们可以通过使用createElement / appendChild这样的方法来解决此性能问题：

const generate = () => {
  let start = document.querySelector('#myInput').value
  const end = document.querySelector('#myOutput').value
  const years = document.querySelector('#mySelect')

  while (start <= end) { 
    const newOption = document.createElement('option') // Create option node
    newOption.innerText = start // Set option node text
    
    years.appendChild(newOption) // Append option node to select element
    start++
  }
}

<body>
  <table>
    <tr>
      <td>
        <input type="text" id="myInput">
      </td>
      <td>
        <input type="text" id="myOutput">
      </td>
      <td>
        <button onclick="generate()">Generate!</button>
      </td>
      <td>
        <select id="mySelect">
          <option selected>your Years</option>
        </select>
      </td>
    </tr>
  </table> 
</body>

现在，您可以通过将两个代码段都开始于1和结束于2000（1999个迭代）来看到这两个代码段之间的性能差异。

点击生成按钮后，您将看到第一个代码段（innerHTML），整个页面将处于无效状态几秒钟，这是因为该脚本花费了很长时间才能运行。在第二个片段中，我们没有任何活动（createElement / appendChild）。

如何通过按钮传递参数？

3 个答案:

解决方案