html将输入传递给具有用户输入的函数

html passing an input to a function with user input

本文关键字：输入 用户 函数 html      更新时间：2023-09-26

所以我第一次使用html/javascript，我需要通过框/按钮获得用户输入，并使用这些数据来调用一个函数，比如：

<input id="xstart" type="number" min="0" max = "100"/>
<input id="ystart" type="number" min="0" max = "100"/>
<input id="zstart" type="number" min="0" max = "100"/>
<input id="clickit" type="button" value="click" onclick="myfunc(xstart, ystart, zstart);" />
function myfunc(num0, num1, num2) { do things with it }

我不知道如何实现这一点，它似乎确实调用了myfunc，但它崩溃了，因为xstart、ystart和zstart中的值实际上不是数字，我认为它们是字符串，但我不确定。

对于第一次编程的程序员来说，任何关于这类事情的帮助或教程链接都会很有帮助。非常感谢。

首先，我建议您将HTML与JS分离，以便于调试和获得更多自由。

您可以在JS中将myFunc绑定到#clickit，如下所示：

document.getElementById('clickit').addEventListener('click', myFunc);

然后获取myFunc中的值并使用它们。parseInt将它们转换为数字。这是完整的代码：

var xInput = document.getElementById('xstart'),
    yInput = document.getElementById('ystart'),
    zInput = document.getElementById('zstart');
document.getElementById('clickit').addEventListener('click', myFunc);
function myFunc(){
    var xstart = parseInt( xInput.value ),
        ystart = parseInt( yInput.value ),
        zstart = parseInt( zInput.value );
    alert( xstart + ', ' + ystart + ', ' + zstart);
}

JS Fiddle演示

相关文章：