【问题标题】：how to pass an argument from a button?如何从按钮传递参数？
【发布时间】：2021-02-19 18:35:56
【问题描述】：

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

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

提前致谢

/* 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：我正在尝试将选项从插入的开始年份添加到插入的结束年份。

【问题讨论】：

标签： javascript html function arguments

【解决方案1】：

现在可以得到指定年份的渐变。对你来说有那么必要吗？

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>

【讨论】：

【解决方案2】：

试试这个：

/* 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>';
    }
}

【讨论】：

【解决方案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>

现在您可以看到这两个 sn-ps 之间的性能差异，方法是让它们都以 1 开始并以 2000 结束（1999 迭代）。

点击生成按钮后，您将看到第一个 sn-p (innerHTML)。整个页面将在几秒钟内处于非活动状态。这是因为脚本需要很长时间才能运行。在第二个 sn-p 中，我们没有任何不活动 (createElement/appendChild)。

【讨论】：