如何从按钮传递参数？
[英]how to pass an argument from a button?
问题描述
I'am trying to make a dynamic function which can take an arguments from the user input and making a simple mathematics operation... and i always get a Reference Error.
我正在尝试创建一个动态函数，该函数可以从用户输入中获取参数并进行简单的数学运算……但我总是得到一个参考错误。
i will show you my code and i hope you can understand what i'am aiming for我会向你展示我的代码，我希望你能理解我的目标
thanks in advance <3提前致谢 <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: I'am trying to add options from the inserted start year to the inserted end year in the . PS：我试图在 .
3 个解决方案
解决方案1
0 2020-11-07 05:00:12
Try this:尝试这个：
/* 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>';
}
}
解决方案2
0 2020-11-07 05:06:31
Now you can get the gradation of the specified years.现在您可以获得指定年份的渐变。 Was it so necessary for you?对你来说有那么必要吗？
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>
解决方案3
0 2020-11-07 05:40:14
Solution解决方案
Here a simple and easy to understand way of doing this这是一个简单易懂的方法
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>
As this does work fine (with small numbers of iterations) we could enter as many years as we wanted so this could create a ton of DOM elements in this loop using:由于这确实工作正常（迭代次数较少），我们可以输入任意数量的年数，因此这可以使用以下方法在此循环中创建大量DOM元素：
years.innerHTML += `<option>${start}</option>`
This really easy to read and understand but this isn't the best for performance one way we can solve this performance issue is by using createElement / appendChild like this:这真的很容易阅读和理解，但这对性能来说并不是最好的，我们可以解决这个性能问题的一种方法是使用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>
Now you can see the difference in performance between both of these snippets by making them both start at 1 and end at 2000 ( 1999 iterations).现在你可以看到这两个片段之间的性能差异，让它们都从1开始，到2000 （ 1999次迭代）结束。
You will see the first snippet ( innerHTML ) once you hit the generate button the whole page will be inactive for a few seconds this is because the script is taking so long to run.点击生成按钮后，您将看到第一个片段 ( innerHTML )，整个页面将处于非活动状态几秒钟，这是因为脚本运行时间太长。 While in the second snippet we don't have any inactivity ( createElement / appendChild ).而在第二个片段中，我们没有任何不活动（ createElement / appendChild ）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.